@motion-proto/live-tokens 0.8.0 → 0.10.0

package/src/editor/component-editor/SegmentedControlEditor.svelte

@@ -4,16 +4,18 @@
 
   export const component = 'segmentedcontrol';
 
-  // Non-text tokens per state. Text/font properties live in `typeGroups` below
-  // and are rendered via TypeEditor instead of TokenLayout.
-  const states: Record<string, Token[]> = {
+  // Default-size schema. Non-text tokens per state; typography lives in
+  // `typeGroups` below and is rendered via TypeEditor. Per-option shape +
+  // icon-size are promoted into "option base" (one source of truth) since
+  // they don't vary per state in the runtime.
+  const defaultStates: Record<string, Token[]> = {
     'control bar': [
       { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-bar-surface' },
       { label: 'border color', groupKey: 'border', variable: '--segmentedcontrol-bar-border' },
       { label: 'border width', groupKey: 'width', variable: '--segmentedcontrol-bar-border-width' },
       { label: 'divider color', groupKey: 'color', variable: '--segmentedcontrol-divider-color' },
       { label: 'divider width', groupKey: 'thickness', variable: '--segmentedcontrol-divider-thickness' },
-      { label: 'divider height', groupKey: 'height', variable: '--segmentedcontrol-divider-height' },
+      { label: 'divider inset', groupKey: 'divider-inset', variable: '--segmentedcontrol-divider-inset' },
       { label: 'corner radius', groupKey: 'radius', variable: '--segmentedcontrol-bar-radius' },
       { label: 'option gap', groupKey: 'gap', variable: '--segmentedcontrol-bar-gap' },
       { label: 'padding', variable: '--segmentedcontrol-bar-padding', groupKey: 'bar-padding' },
@@ -22,14 +24,21 @@
       { label: 'padding-bottom', variable: '--segmentedcontrol-bar-padding-bottom', groupKey: 'bar-padding-bottom', hidden: true },
       { label: 'padding-left', variable: '--segmentedcontrol-bar-padding-left', groupKey: 'bar-padding-left', hidden: true },
     ],
+    'option base': [
+      { label: 'padding', variable: '--segmentedcontrol-option-padding', groupKey: 'option-padding' },
+      { label: 'padding-top', variable: '--segmentedcontrol-option-padding-top', groupKey: 'option-padding-top', hidden: true },
+      { label: 'padding-right', variable: '--segmentedcontrol-option-padding-right', groupKey: 'option-padding-right', hidden: true },
+      { label: 'padding-bottom', variable: '--segmentedcontrol-option-padding-bottom', groupKey: 'option-padding-bottom', hidden: true },
+      { label: 'padding-left', variable: '--segmentedcontrol-option-padding-left', groupKey: 'option-padding-left', hidden: true },
+      { label: 'icon gap', groupKey: 'option-gap', variable: '--segmentedcontrol-option-gap' },
+      { label: 'icon size', groupKey: 'icon-size', variable: '--segmentedcontrol-option-icon-size' },
+    ],
     'default option': [
       { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-option-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--segmentedcontrol-option-icon-size' },
     ],
     'selected option': [
       { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-selected-surface' },
       { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-selected-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--segmentedcontrol-selected-icon-size' },
       { label: 'border color', groupKey: 'border', variable: '--segmentedcontrol-selected-border' },
       { label: 'border width', groupKey: 'width', variable: '--segmentedcontrol-selected-border-width' },
       { label: 'corner radius', groupKey: 'radius', variable: '--segmentedcontrol-selected-radius' },
@@ -37,18 +46,46 @@
     'hover option': [
       { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-option-hover-surface' },
       { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-option-hover-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--segmentedcontrol-option-hover-icon-size' },
     ],
     'disabled option': [
       { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-disabled-surface' },
       { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-disabled-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--segmentedcontrol-disabled-icon-size' },
     ],
   };
 
-  // Per-state typography groups for the option text element. All five
-  // properties are exposed and individually share-able via groupKey across
-  // the four states.
+  // Small-size schema. Thin delta layer — only the size-driven properties.
+  // Per-state colors, borders, font-family/weight stay shared with default.
+  // States with no small overrides are omitted entirely so they don't render
+  // empty fieldsets. Typography is regular rows (no typeGroups at small)
+  // since family/weight/color don't differ.
+  const smallStates: Record<string, Token[]> = {
+    'control bar': [
+      { label: 'divider inset', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-divider-small-inset' },
+      { label: 'divider width', groupKey: 'small-thickness', variable: '--segmentedcontrol-divider-small-thickness' },
+      { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
+      { label: 'padding', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
+      { label: 'padding-top', variable: '--segmentedcontrol-bar-small-padding-top', groupKey: 'bar-small-padding-top', hidden: true },
+      { label: 'padding-right', variable: '--segmentedcontrol-bar-small-padding-right', groupKey: 'bar-small-padding-right', hidden: true },
+      { label: 'padding-bottom', variable: '--segmentedcontrol-bar-small-padding-bottom', groupKey: 'bar-small-padding-bottom', hidden: true },
+      { label: 'padding-left', variable: '--segmentedcontrol-bar-small-padding-left', groupKey: 'bar-small-padding-left', hidden: true },
+    ],
+    'option base': [
+      { label: 'icon size', groupKey: 'small-icon-size', variable: '--segmentedcontrol-option-small-icon-size' },
+      { label: 'font size', groupKey: 'small-text-font-size', variable: '--segmentedcontrol-option-small-text-font-size' },
+      { label: 'line height', groupKey: 'small-text-line-height', variable: '--segmentedcontrol-option-small-text-line-height' },
+      { label: 'padding', variable: '--segmentedcontrol-option-small-padding', groupKey: 'option-small-padding' },
+      { label: 'padding-top', variable: '--segmentedcontrol-option-small-padding-top', groupKey: 'option-small-padding-top', hidden: true },
+      { label: 'padding-right', variable: '--segmentedcontrol-option-small-padding-right', groupKey: 'option-small-padding-right', hidden: true },
+      { label: 'padding-bottom', variable: '--segmentedcontrol-option-small-padding-bottom', groupKey: 'option-small-padding-bottom', hidden: true },
+      { label: 'padding-left', variable: '--segmentedcontrol-option-small-padding-left', groupKey: 'option-small-padding-left', hidden: true },
+      { label: 'icon gap', groupKey: 'option-small-gap', variable: '--segmentedcontrol-option-small-gap' },
+    ],
+    'selected option': [
+      { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-selected-small-radius' },
+    ],
+  };
+
+  // Per-state typography groups (default size only).
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     'default option': [{
       legend: 'option text',
@@ -84,20 +121,23 @@
     }],
   };
 
-  // Schema entries for the type-group variables — registered for groupKey
-  // resolution but not rendered through TokenLayout. Derived from `typeGroups`
-  // so the four font props × four states stay in lockstep with the per-state
-  // TypeGroupConfig declarations above.
+  const emptyTypeGroups: Record<string, TypeGroupConfig[]> = {};
+
+  // allTokens unions BOTH sizes so the store registers every editable variable.
+  // The visibleStates filter is purely UI (which subset to render now).
   const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups);
-  export const allTokens: Token[] = [...Object.values(states).flat(), ...typeGroupTokens];
+  export const allTokens: Token[] = [
+    ...Object.values(defaultStates).flat(),
+    ...Object.values(smallStates).flat(),
+    ...typeGroupTokens,
+  ];
 
-  const linkableContexts = new Map<string, string>([
-    ...buildTypeGroupShareableContexts(typeGroups),
-    ['--segmentedcontrol-option-icon-size', 'default option'],
-    ['--segmentedcontrol-selected-icon-size', 'selected option'],
-    ['--segmentedcontrol-option-hover-icon-size', 'hover option'],
-    ['--segmentedcontrol-disabled-icon-size', 'disabled option'],
-  ]);
+  // Cross-size linkage is intentionally not declared: small lives in its own
+  // namespace. The per-state icon-size links are gone now that icon-size is a
+  // single source-of-truth token in "option base".
+  const linkableContexts = new Map<string, string>(
+    buildTypeGroupShareableContexts(typeGroups),
+  );
 </script>
 
 <script lang="ts">
@@ -114,34 +154,45 @@
     { value: 'option-3', label: 'Option 3', icon: 'fas fa-heart' },
   ];
   let showIcons = $state(true);
+  let previewSize = $state<'default' | 'small'>('default');
   let previewSegments = $derived(showIcons ? segments : segments.map((s) => ({ ...s, icon: undefined })));
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
+  let activeStates = $derived(previewSize === 'small' ? smallStates : defaultStates);
+  let activeTypeGroups = $derived(previewSize === 'small' ? emptyTypeGroups : typeGroups);
+
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(activeStates).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
   ) as Record<string, Token[]>);
 </script>
 
 <ComponentEditorBase {component} title="Segmented Control" description="A connected set of buttons for toggling between mutually exclusive options." tokens={allTokens} {linked}>
-  {#snippet config()}
-  
-      <label>
-        <input type="checkbox" bind:checked={showIcons} />
-        <span>Show icons</span>
-      </label>
-    
-  {/snippet}
   <VariantGroup
     name="segmentedcontrol"
     title="Segmented Control"
     states={visibleStates}
-    {typeGroups}
+    typeGroups={activeTypeGroups}
     {component}
-    
   >
+    {#snippet previewActions()}
+      <label>
+        <span>Size</span>
+        <select bind:value={previewSize}>
+          <option value="default">Default</option>
+          <option value="small">Small</option>
+        </select>
+      </label>
+    {/snippet}
+    {#snippet canvasToolbarExtras()}
+      <hr class="canvas-toolbar-divider" />
+      <label class="sc-preview-check">
+        <input type="checkbox" bind:checked={showIcons} />
+        <span>Show icons</span>
+      </label>
+    {/snippet}
     {#snippet children({ activeState })}
-        {@const previewValue = activeState === 'selected option' ? 'option-2' : ''}
+      {@const previewValue = activeState === 'selected option' ? 'option-2' : ''}
       {@const previewForceHover = activeState === 'hover option' ? 'option-1' : null}
       {@const previewDisabled = activeState === 'disabled option'}
       <div>
@@ -150,9 +201,19 @@
           value={previewValue}
           forceHoverValue={previewForceHover}
           disabled={previewDisabled}
+          size={previewSize}
         />
       </div>
-          {/snippet}
-    </VariantGroup>
+    {/snippet}
+  </VariantGroup>
 </ComponentEditorBase>
 
+<style>
+  .sc-preview-check {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+</style>

package/src/editor/component-editor/SideNavigationEditor.svelte

@@ -0,0 +1,342 @@
+<script module lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'sidenavigation';
+
+  // Single-variant component with five structural parts. Three of them (Title,
+  // Item, Footer) carry default/hover/active interaction sub-states; Toggle
+  // carries default/hover. Panel is geometry only. Keys use the " / " convention
+  // VariantGroup recognises for two-tier parts/state strips.
+  const STATEFUL_STATES = ['default', 'hover', 'active'] as const;
+  const TOGGLE_STATES = ['default', 'hover'] as const;
+  type StatefulState = typeof STATEFUL_STATES[number];
+  type ToggleState = typeof TOGGLE_STATES[number];
+
+  const STATE_LABELS: Record<string, string> = {
+    default: 'Default',
+    hover: 'Hover',
+    active: 'Active',
+  };
+
+  // --- Panel --------------------------------------------------------------
+  const panelTokens: Token[] = [
+    { label: 'surface color', groupKey: 'panel-surface', variable: '--sidenavigation-panel-surface' },
+    { label: 'border color', groupKey: 'panel-border', variable: '--sidenavigation-panel-border' },
+    { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--sidenavigation-panel-border-width' },
+    { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: '--sidenavigation-panel-padding' },
+    { label: 'section gap', groupKey: 'panel-section-gap', variable: '--sidenavigation-panel-section-gap' },
+    { label: 'item indent', splittable: false, groupKey: 'panel-item-padding', variable: '--sidenavigation-panel-item-padding' },
+    { label: 'footer gap', groupKey: 'panel-footer-gap', variable: '--sidenavigation-panel-footer-gap' },
+  ];
+
+  // --- Animation ----------------------------------------------------------
+  const animationTokens: Token[] = [
+    { label: 'open duration', groupKey: 'open-duration', variable: '--sidenavigation-open-duration' },
+    { label: 'open easing', groupKey: 'open-easing', variable: '--sidenavigation-open-easing' },
+    { label: 'close duration', groupKey: 'close-duration', variable: '--sidenavigation-close-duration' },
+    { label: 'close easing', groupKey: 'close-easing', variable: '--sidenavigation-close-easing' },
+  ];
+
+  // --- Title --------------------------------------------------------------
+  function titleStateTokens(s: StatefulState): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'title-surface', variable: `--sidenavigation-title-${s}-surface` },
+      { label: 'divider color', groupKey: 'title-border', variable: `--sidenavigation-title-${s}-border` },
+      { label: 'divider width', canBeLinked: true, groupKey: 'title-border-width', variable: `--sidenavigation-title-${s}-border-width` },
+      { label: 'padding', canBeLinked: true, groupKey: 'title-padding', variable: `--sidenavigation-title-${s}-padding` },
+      { label: 'indicator color', groupKey: 'title-accent', variable: `--sidenavigation-title-${s}-accent` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'title-accent-width', variable: `--sidenavigation-title-${s}-accent-width` },
+    ];
+  }
+  function titleStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
+    return [{
+      legend: 'title label',
+      colorVariable: `--sidenavigation-title-${s}-label`,
+      familyVariable: `--sidenavigation-title-${s}-label-font-family`,
+      sizeVariable: `--sidenavigation-title-${s}-label-font-size`,
+      weightVariable: `--sidenavigation-title-${s}-label-font-weight`,
+      lineHeightVariable: `--sidenavigation-title-${s}-label-line-height`,
+    }];
+  }
+  const titleTypographyTokens: Token[] = STATEFUL_STATES.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'title-label-font-family', variable: `--sidenavigation-title-${s}-label-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'title-label-font-size', variable: `--sidenavigation-title-${s}-label-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'title-label-font-weight', variable: `--sidenavigation-title-${s}-label-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'title-label-line-height', variable: `--sidenavigation-title-${s}-label-line-height` },
+  ]);
+
+  // --- Toggle -------------------------------------------------------------
+  function toggleStateTokens(s: ToggleState): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'toggle-surface', variable: `--sidenavigation-toggle-${s}-surface` },
+      { label: 'border color', groupKey: 'toggle-border', variable: `--sidenavigation-toggle-${s}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'toggle-border-width', variable: `--sidenavigation-toggle-${s}-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'toggle-radius', variable: `--sidenavigation-toggle-${s}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'toggle-padding', variable: `--sidenavigation-toggle-${s}-padding` },
+      { label: 'icon color', groupKey: 'toggle-icon', variable: `--sidenavigation-toggle-${s}-icon` },
+      { label: 'icon size', canBeLinked: true, groupKey: 'toggle-icon-size', variable: `--sidenavigation-toggle-${s}-icon-size` },
+    ];
+  }
+
+  // --- Section ------------------------------------------------------------
+  // Section header is a CollapsibleSection wrapped in `.sn-section-header`;
+  // the wrapper paints surface + left indicator and forwards section text
+  // tokens into the inner CollapsibleSection (chromeless variant) by
+  // shadowing its slots, so section typography is editable per-state
+  // without modifying CollapsibleSection itself.
+  function sectionStateTokens(s: StatefulState): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'section-surface', variable: `--sidenavigation-section-${s}-surface` },
+      { label: 'indicator color', groupKey: 'section-accent', variable: `--sidenavigation-section-${s}-accent` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'section-accent-width', variable: `--sidenavigation-section-${s}-accent-width` },
+    ];
+  }
+  function sectionStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
+    return [{
+      legend: 'section text',
+      colorVariable: `--sidenavigation-section-${s}-text`,
+      familyVariable: `--sidenavigation-section-${s}-text-font-family`,
+      sizeVariable: `--sidenavigation-section-${s}-text-font-size`,
+      weightVariable: `--sidenavigation-section-${s}-text-font-weight`,
+      lineHeightVariable: `--sidenavigation-section-${s}-text-line-height`,
+    }];
+  }
+  const sectionTypographyTokens: Token[] = STATEFUL_STATES.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'section-text-font-family', variable: `--sidenavigation-section-${s}-text-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'section-text-font-size', variable: `--sidenavigation-section-${s}-text-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'section-text-font-weight', variable: `--sidenavigation-section-${s}-text-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'section-text-line-height', variable: `--sidenavigation-section-${s}-text-line-height` },
+  ]);
+
+  // --- Item ---------------------------------------------------------------
+  function itemStateTokens(s: StatefulState): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'item-surface', variable: `--sidenavigation-item-${s}-surface` },
+      { label: 'padding', canBeLinked: true, groupKey: 'item-padding', variable: `--sidenavigation-item-${s}-padding` },
+      { label: 'indicator color', groupKey: 'item-accent', variable: `--sidenavigation-item-${s}-accent` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'item-accent-width', variable: `--sidenavigation-item-${s}-accent-width` },
+    ];
+  }
+  function itemStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
+    return [{
+      legend: 'item text',
+      colorVariable: `--sidenavigation-item-${s}-text`,
+      familyVariable: `--sidenavigation-item-${s}-text-font-family`,
+      sizeVariable: `--sidenavigation-item-${s}-text-font-size`,
+      weightVariable: `--sidenavigation-item-${s}-text-font-weight`,
+      lineHeightVariable: `--sidenavigation-item-${s}-text-line-height`,
+    }];
+  }
+  const itemTypographyTokens: Token[] = STATEFUL_STATES.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'item-text-font-family', variable: `--sidenavigation-item-${s}-text-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'item-text-font-size', variable: `--sidenavigation-item-${s}-text-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'item-text-font-weight', variable: `--sidenavigation-item-${s}-text-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'item-text-line-height', variable: `--sidenavigation-item-${s}-text-line-height` },
+  ]);
+
+  // --- Footer -------------------------------------------------------------
+  function footerStateTokens(s: StatefulState): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'footer-surface', variable: `--sidenavigation-footer-${s}-surface` },
+      { label: 'padding', canBeLinked: true, groupKey: 'footer-padding', variable: `--sidenavigation-footer-${s}-padding` },
+      { label: 'icon gap', groupKey: 'footer-gap', variable: `--sidenavigation-footer-${s}-gap` },
+      { label: 'indicator color', groupKey: 'footer-accent', variable: `--sidenavigation-footer-${s}-accent` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'footer-accent-width', variable: `--sidenavigation-footer-${s}-accent-width` },
+      { label: 'icon color', groupKey: 'footer-icon', variable: `--sidenavigation-footer-${s}-icon` },
+      { label: 'icon size', canBeLinked: true, groupKey: 'footer-icon-size', variable: `--sidenavigation-footer-${s}-icon-size` },
+    ];
+  }
+  function footerStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
+    return [{
+      legend: 'footer text',
+      colorVariable: `--sidenavigation-footer-${s}-text`,
+      familyVariable: `--sidenavigation-footer-${s}-text-font-family`,
+      sizeVariable: `--sidenavigation-footer-${s}-text-font-size`,
+      weightVariable: `--sidenavigation-footer-${s}-text-font-weight`,
+      lineHeightVariable: `--sidenavigation-footer-${s}-text-line-height`,
+    }];
+  }
+  const footerTypographyTokens: Token[] = STATEFUL_STATES.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'footer-text-font-family', variable: `--sidenavigation-footer-${s}-text-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'footer-text-font-size', variable: `--sidenavigation-footer-${s}-text-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'footer-text-font-weight', variable: `--sidenavigation-footer-${s}-text-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'footer-text-line-height', variable: `--sidenavigation-footer-${s}-text-line-height` },
+  ]);
+
+  // Assemble part/state map. " / " separator triggers the two-tier strip.
+  const states: Record<string, Token[]> = {
+    'Panel': panelTokens,
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Title / ${STATE_LABELS[s]}`, titleStateTokens(s)])),
+    ...Object.fromEntries(TOGGLE_STATES.map((s) => [`Toggle / ${STATE_LABELS[s]}`, toggleStateTokens(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Section / ${STATE_LABELS[s]}`, sectionStateTokens(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Item / ${STATE_LABELS[s]}`, itemStateTokens(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Footer / ${STATE_LABELS[s]}`, footerStateTokens(s)])),
+    'Animation': animationTokens,
+  };
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Title / ${STATE_LABELS[s]}`, titleStateTypeGroups(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Section / ${STATE_LABELS[s]}`, sectionStateTypeGroups(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Item / ${STATE_LABELS[s]}`, itemStateTypeGroups(s)])),
+    ...Object.fromEntries(STATEFUL_STATES.map((s) => [`Footer / ${STATE_LABELS[s]}`, footerStateTypeGroups(s)])),
+  };
+
+  export const allTokens: Token[] = [
+    ...Object.values(states).flat(),
+    ...buildTypeGroupColorTokens(typeGroups),
+    ...titleTypographyTokens,
+    ...sectionTypographyTokens,
+    ...itemTypographyTokens,
+    ...footerTypographyTokens,
+  ];
+
+  // Link contexts: within each part, the per-state values share a link tree so
+  // a single edit can fan padding/border-width/typography across default/hover/active.
+  const linkableContexts = new Map<string, string>([
+    ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
+      [`--sidenavigation-title-${s}-border-width`, `title ${s}`],
+      [`--sidenavigation-title-${s}-padding`, `title ${s}`],
+      [`--sidenavigation-title-${s}-accent-width`, `title ${s}`],
+      [`--sidenavigation-title-${s}-label-font-family`, `title ${s}`],
+      [`--sidenavigation-title-${s}-label-font-size`, `title ${s}`],
+      [`--sidenavigation-title-${s}-label-font-weight`, `title ${s}`],
+      [`--sidenavigation-title-${s}-label-line-height`, `title ${s}`],
+    ]),
+    ...TOGGLE_STATES.flatMap((s): Array<[string, string]> => [
+      [`--sidenavigation-toggle-${s}-border-width`, `toggle ${s}`],
+      [`--sidenavigation-toggle-${s}-radius`, `toggle ${s}`],
+      [`--sidenavigation-toggle-${s}-padding`, `toggle ${s}`],
+      [`--sidenavigation-toggle-${s}-icon-size`, `toggle ${s}`],
+    ]),
+    ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
+      [`--sidenavigation-section-${s}-accent-width`, `section ${s}`],
+      [`--sidenavigation-section-${s}-text-font-family`, `section ${s}`],
+      [`--sidenavigation-section-${s}-text-font-size`, `section ${s}`],
+      [`--sidenavigation-section-${s}-text-font-weight`, `section ${s}`],
+      [`--sidenavigation-section-${s}-text-line-height`, `section ${s}`],
+    ]),
+    ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
+      [`--sidenavigation-item-${s}-padding`, `item ${s}`],
+      [`--sidenavigation-item-${s}-accent-width`, `item ${s}`],
+      [`--sidenavigation-item-${s}-text-font-family`, `item ${s}`],
+      [`--sidenavigation-item-${s}-text-font-size`, `item ${s}`],
+      [`--sidenavigation-item-${s}-text-font-weight`, `item ${s}`],
+      [`--sidenavigation-item-${s}-text-line-height`, `item ${s}`],
+    ]),
+    ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
+      [`--sidenavigation-footer-${s}-padding`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-accent-width`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-icon-size`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-text-font-family`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-text-font-size`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-text-font-weight`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-text-line-height`, `footer ${s}`],
+    ]),
+    ['--sidenavigation-panel-border-width', 'panel'],
+    ['--sidenavigation-panel-padding', 'panel'],
+  ]);
+</script>
+
+<script lang="ts">
+  import SideNavigation, { type SideNavSection, type SideNavFooter } from '../../system/components/SideNavigation.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  const demoSections: SideNavSection[] = [
+    {
+      path: 'section-1',
+      title: 'Section 1',
+      hasIndexPage: true,
+      items: [
+        { path: 'section-1/item-1', title: 'Item 1' },
+        { path: 'section-1/item-2', title: 'Item 2' },
+        { path: 'section-1/item-3', title: 'Item 3' },
+      ],
+    },
+    {
+      path: 'section-2',
+      title: 'Section 2',
+      hasIndexPage: true,
+      items: [],
+    },
+  ];
+  const demoFooter: SideNavFooter = {
+    path: 'footer',
+    title: 'Footer',
+    icon: 'fa-solid fa-file-lines',
+  };
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let previewOpen = $state(true);
+
+  let visibleStates = $derived(Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+
+  // Map the active part/state to the demo's force-hover / force-active hooks
+  // so token edits always have a row painted in that state for the viewer.
+  function deriveForce(activeState: string) {
+    const [part, sub] = activeState.includes(' / ') ? activeState.split(' / ') : [activeState, ''];
+    const partKey = part.toLowerCase();
+    const subKey = sub.toLowerCase();
+    let forceHoverPart: 'title' | 'toggle' | 'item' | 'footer' | 'section' | null = null;
+    let forceActivePart: 'title' | 'item' | 'footer' | 'section' | null = null;
+    if (subKey === 'hover' && (partKey === 'title' || partKey === 'toggle' || partKey === 'item' || partKey === 'footer' || partKey === 'section')) {
+      forceHoverPart = partKey;
+    } else if (subKey === 'active' && (partKey === 'title' || partKey === 'item' || partKey === 'footer' || partKey === 'section')) {
+      forceActivePart = partKey;
+    }
+    return { forceHoverPart, forceActivePart };
+  }
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Side Navigation"
+  description="Collapsible left panel with title header, sections, sub-page links, and an optional footer link."
+  tokens={allTokens}
+  {linked}
+>
+  <VariantGroup
+    name="sidenavigation"
+    title="Side Navigation"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+    selectorLabel="Part"
+  >
+    {#snippet children({ activeState })}
+      {@const { forceHoverPart, forceActivePart } = deriveForce(activeState)}
+      <div class="sn-preview-frame">
+        <SideNavigation
+          sections={demoSections}
+          footer={demoFooter}
+          titleLabel="Title"
+          titleHref="#"
+          currentPath="section-1/item-2"
+          open={previewOpen}
+          ontoggle={() => (previewOpen = !previewOpen)}
+          {forceHoverPart}
+          {forceActivePart}
+        />
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  /* Frame reserves room for the panel at its widest (so collapse animates into
+     empty space rather than reshaping the canvas), and lets the panel manage
+     its own width via the open/closed tokens. */
+  .sn-preview-frame {
+    min-width: 16rem;
+    min-height: 26rem;
+    display: flex;
+    align-items: stretch;
+  }
+  .sn-preview-frame :global(.sidenavigation) {
+    height: auto;
+  }
+</style>

package/src/editor/component-editor/index.ts

@@ -1,5 +1,20 @@
 export { default as ComponentsTab } from './scaffolding/ComponentsTab.svelte';
 export type { ComponentSection } from './scaffolding/componentSectionType';
-export { defaultSections } from './scaffolding/defaultSections';
+export { getDefaultSections } from './scaffolding/defaultSections';
 
+// Editor primitives for consumer-authored components.
+export { default as ComponentEditorBase } from './scaffolding/ComponentEditorBase.svelte';
+export { default as VariantGroup } from './scaffolding/VariantGroup.svelte';
+export { default as LinkedBlock } from './scaffolding/LinkedBlock.svelte';
+export { default as TypeEditor } from './scaffolding/TypeEditor.svelte';
 export { default as TokenLayout } from './scaffolding/TokenLayout.svelte';
+
+// Helpers for assembling a VariantGroup's siblings and the linked-block view.
+export { buildSiblings } from './scaffolding/siblings';
+export type { Sibling } from './scaffolding/siblings';
+export { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+export type { LinkedToken, LinkedGroup, LinkedBlockResult } from './scaffolding/linkedBlock';
+export { buildTypeGroupTokens } from './scaffolding/buildTypeGroupTokens';
+
+// Token schema type — the shape of an entry in an editor's `allTokens` array.
+export type { Token } from './scaffolding/types';