Cycles
Design · c26

Document Dev Components

archivedcreated 2026-09-11· last activity 2026-09-11

Why

The layer ships 11 dev components but only 5 were registered in the design site. The control-panel family (DevControls, DevControlSlider, DevControlColor, DevControlSelect, DevControlSection) and DevMetaPropsMachine had no documentation or demos, making it harder for developers to discover and use the full dev tooling when building component demos.

Objective

Register all missing dev components and create interactive demos for every dev component, so the design site fully documents its own tooling.

Scope

  • New dev-controls registry group for the 6 control-panel components
  • 6 new component entries in component-registry.ts
  • 11 demo files in _demos/ (5 existing doc primitives + 6 new controls)
  • Both dev and dev-controls groups hidden from public components index

Key Changes

  • app/data/component-registry.ts — added dev-controls group + 6 entries
  • app/pages/components/index.vue — filter excludes dev-controls
  • app/pages/components/coverage.vue — filter excludes dev-controls
  • app/pages/components/_demos/Dev*.vue — 11 new demo files

Outcome

All 11 dev components are documented with interactive demos at /components/dev/ and /components/dev-controls/. Developers writing new component demos can reference the tooling documentation.

Visual record

4 captures — heroes, page slices, and full-page renders. Click to view.

c26 hero
c26 slice
c26 slice
c26 full

In the archive

Artifacts

  • cycle-creation.md

Qpoint Brand Style Guide