component-canvas — the documentation workbench

ComponentCanvas is the documentation workbench: a header (font-nav title, description, copy-command install badge, icon-only sourceUrl anchor), a LIVE demo stage on the muted tint so components prove themselves on a differently-toned ground, the floating playground dock over the stage's top-right corner, and a collapsible code drawer pairing a file tree with one code-card. The page owns every byte of state through the P1 protocol — onreset, output, resolveFileContent are callbacks, never state pushed into the canvas.

Platform first: the stage and dock are Svelte 5 snippets (render seams, live by construction), the drawer tiers and the dock's width switch on CSS container queries (the host tier @container/jx-canvas-host at 48rem; the named demo container rides the scrollport itself, so demo queries see the width the scrollbar actually leaves), and the collapses are grid-template-rows: 0fr→1fr with inert keeping closed content out of the tab order. The workbench adds the layer law (muted stage under a surface-card dock), the outline law — the root carries data-toc-skip and the title is a styled paragraph, so no canvas chrome joins a ToC — and deterministic aria ids slug-derived from the title.

The dock ships on EVERY canvas: its head is the eight-axis bar (below), and a canvas without a playground snippet, schema, or output stands as the bar alone — no chevron, no body. Stage posture (fill/center/start) and the scroll cap (capped/grow) are props; the id is also the same-source extraction key (its own section below). This page's demo nests one simplified canvas inside the stage — a canvas may showcase a canvas exactly one level down.

Reading the table: Property is the axis, Type is the real carrier or seat it drives on THIS family, Default is the lane default — the named steps, number unit, and consumption on this family are in each description.

Deviations, cited: the six-lane adoption is the census fold row — component-canvas carries SIX lanes, theme LEFT OUT (the stage-preview bindable owns the name) and density's universal lane absent at the fold while the legacy local densitySlot('default') stayed (both under the §13 no-rename law, W6-dossier-flagged beside code-card/mermaid; openspec/changes/explicit-props/research/migration-census.md). The W7 bar — the Owner's eight-axis directive (2026-09-21) — later gave the density AXIS its supply seat beside the other six. No §13 renames; the two name-shadowing seats ride the generated table's extra lane.

<script lang="ts">
  import ComponentCanvas from '@ui/component-canvas.svelte';
  import PressButton from '@ui/press-button.svelte';
  import { meta, annotations } from '$lib/meta/component-canvas.meta';
  import { withAnnotations } from '$lib/schema/ir';
  import { toJSONSchema } from '$lib/schema/lower';
</script>

<!-- the family's own generated meta lowers to dock rows; the page
     owns the lane state and drives the six explicit lane props -->
<ComponentCanvas
  title="component-canvas · the six explicit lanes"
  files={files}
  schema={toJSONSchema(withAnnotations(meta, annotations))}
  bind:values
  {size} {shape} {radius} {color} {elevation} {motion}
>
  <!-- seats: an em-keyed caption (size), anchor panels (radius), a
       fill button (shape/color/elevation), a sweep bar (motion) -->
  <div style={axisRestamp || undefined}>
    <p style="font-size: 0.875em">size keys the root font-size — this caption rides em</p>
    <PressButton variant="fill" {size} {shape} {radius} {color} {elevation} {motion}>
      fill seat — color re-hues, elevation re-shadows
    </PressButton>
    <div data-cc-axis-motion-seat aria-hidden="true"><span data-cc-axis-motion-bar></span></div>
  </div>
</ComponentCanvas>

<script lang="ts">
  import ComponentCanvas from '@ui/component-canvas.svelte';
  import PressButton from '@ui/press-button.svelte';
  import { meta, annotations } from '$lib/meta/component-canvas.meta';
  import { withAnnotations } from '$lib/schema/ir';
  import { toJSONSchema } from '$lib/schema/lower';
</script>

<!-- the family's own generated meta lowers to dock rows; the page
     owns the lane state and drives the six explicit lane props -->
<ComponentCanvas
  title="component-canvas · the six explicit lanes"
  files={files}
  schema={toJSONSchema(withAnnotations(meta, annotations))}
  bind:values
  {size} {shape} {radius} {color} {elevation} {motion}
>
  <!-- seats: an em-keyed caption (size), anchor panels (radius), a
       fill button (shape/color/elevation), a sweep bar (motion) -->
  <div style={axisRestamp || undefined}>
    <p style="font-size: 0.875em">size keys the root font-size — this caption rides em</p>
    <PressButton variant="fill" {size} {shape} {radius} {color} {elevation} {motion}>
      fill seat — color re-hues, elevation re-shadows
    </PressButton>
    <div data-cc-axis-motion-seat aria-hidden="true"><span data-cc-axis-motion-bar></span></div>
  </div>
</ComponentCanvas>

<script lang="ts">
  import ComponentCanvas from '@ui/component-canvas.svelte';
  import { query } from '$lib/universal-props-query.svelte';
</script>

<!-- the explicit size lane wraps query(): SSR paints the base (14px);
     at the md viewport rung (≥48rem) the root font-size steps to 18px
     and the em-keyed caption follows -->
<ComponentCanvas title="responsive size" files={files} size={query({ md: 18 }, 14)}>
  <p style="font-size: 0.875em">this caption rides em off the root font-size</p>
</ComponentCanvas>

<script lang="ts">
  import ComponentCanvas from '@ui/component-canvas.svelte';
  import { query } from '$lib/universal-props-query.svelte';
</script>

<!-- the explicit size lane wraps query(): SSR paints the base (14px);
     at the md viewport rung (≥48rem) the root font-size steps to 18px
     and the em-keyed caption follows -->
<ComponentCanvas title="responsive size" files={files} size={query({ md: 18 }, 14)}>
  <p style="font-size: 0.875em">this caption rides em off the root font-size</p>
</ComponentCanvas>