@motion-proto/live-tokens 0.1.0 → 0.3.1

package/src/component-editor/SectionDividerEditor.svelte

@@ -0,0 +1,263 @@
+<script context="module" lang="ts">
+  import { buildSiblings } from './scaffolding/siblings';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'sectiondivider';
+
+  type Variant = 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special';
+  const variants: { key: Variant; title: string }[] = [
+    { key: 'primary', title: 'Primary' },
+    { key: 'accent', title: 'Accent' },
+    { key: 'neutral', title: 'Neutral' },
+    { key: 'special', title: 'Special' },
+    { key: 'canvas', title: 'Canvas' },
+    { key: 'alternate', title: 'Alternate' },
+  ];
+
+  /** Frame tokens for a variant. Gradient tokens are owned by GradientCard, and
+   *  outline thickness/color are rendered nested under the title TypeEditor;
+   *  both are emitted only for `allTokens` (reset/registry) — not for the
+   *  per-state token grid. */
+  function frameTokens(v: Variant): Token[] {
+    return [
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--sectiondivider-${v}-padding` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--sectiondivider-${v}-radius` },
+      { label: 'border color', canBeLinked: true, groupKey: 'border', variable: `--sectiondivider-${v}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--sectiondivider-${v}-border-width` },
+      { label: 'drop shadow', canBeLinked: true, groupKey: 'shadow', variable: `--sectiondivider-${v}-shadow` },
+    ];
+  }
+  /** Title outline tokens — rendered inside the title TypeEditor (not the
+   *  property grid) but registered here so reset/linkage still see them. */
+  function titleOutlineTokens(v: Variant): Token[] {
+    return [
+      { label: 'outline thickness', canBeLinked: true, groupKey: 'title-border-width', variable: `--sectiondivider-${v}-title-border-width` },
+      { label: 'outline color', canBeLinked: true, groupKey: 'title-stroke-color', variable: `--sectiondivider-${v}-title-stroke-color` },
+    ];
+  }
+  function gradientTokens(v: Variant): Token[] {
+    return [
+      { label: 'gradient angle', groupKey: 'angle', variable: `--sectiondivider-${v}-gradient-angle` },
+      { label: 'gradient stop 1 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-1-color` },
+      { label: 'gradient stop 1 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-1-position` },
+      { label: 'gradient stop 2 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-2-color` },
+      { label: 'gradient stop 2 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-2-position` },
+      { label: 'gradient stop 3 color', groupKey: 'color', variable: `--sectiondivider-${v}-gradient-stop-3-color` },
+      { label: 'gradient stop 3 position', groupKey: 'position', variable: `--sectiondivider-${v}-gradient-stop-3-position` },
+    ];
+  }
+  function variantTokens(v: Variant): Token[] {
+    return [...frameTokens(v), ...titleOutlineTokens(v), ...gradientTokens(v)];
+  }
+
+  /** Two type groups per variant: title and description. The TypeEditor
+   *  fieldset visually groups each color with its font-shape props. The
+   *  title fieldset also nests the SVG-text outline width + color so those
+   *  controls sit with the typography that drives them. */
+  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
+    return [
+      {
+        legend: 'title',
+        colorVariable: `--sectiondivider-${v}-title`,
+        familyVariable: `--sectiondivider-${v}-title-font-family`,
+        sizeVariable: `--sectiondivider-${v}-title-font-size`,
+        weightVariable: `--sectiondivider-${v}-title-font-weight`,
+        lineHeightVariable: `--sectiondivider-${v}-title-line-height`,
+        outlineWidthVariable: `--sectiondivider-${v}-title-border-width`,
+        outlineColorVariable: `--sectiondivider-${v}-title-stroke-color`,
+      },
+      {
+        legend: 'description',
+        colorVariable: `--sectiondivider-${v}-description`,
+        familyVariable: `--sectiondivider-${v}-description-font-family`,
+        sizeVariable: `--sectiondivider-${v}-description-font-size`,
+        weightVariable: `--sectiondivider-${v}-description-font-weight`,
+        lineHeightVariable: `--sectiondivider-${v}-description-line-height`,
+      },
+    ];
+  }
+
+  /** Token registry entries for the type-group properties. Colors are emitted
+   *  with canBeLinked so the LinkedBlock keeps the cross-variant linkage they
+   *  ship with (title/description colors share the same theme defaults across
+   *  every variant). */
+  function variantTypeGroupTokens(v: Variant): Token[] {
+    return [
+      { label: 'title color', canBeLinked: true, groupKey: 'title-color', variable: `--sectiondivider-${v}-title` },
+      { label: 'title font family', canBeLinked: true, groupKey: 'title-font-family', variable: `--sectiondivider-${v}-title-font-family` },
+      { label: 'title font size', canBeLinked: true, groupKey: 'title-font-size', variable: `--sectiondivider-${v}-title-font-size` },
+      { label: 'title font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: `--sectiondivider-${v}-title-font-weight` },
+      { label: 'title line height', canBeLinked: true, groupKey: 'title-line-height', variable: `--sectiondivider-${v}-title-line-height` },
+      { label: 'description color', canBeLinked: true, groupKey: 'description-color', variable: `--sectiondivider-${v}-description` },
+      { label: 'description font family', canBeLinked: true, groupKey: 'description-font-family', variable: `--sectiondivider-${v}-description-font-family` },
+      { label: 'description font size', canBeLinked: true, groupKey: 'description-font-size', variable: `--sectiondivider-${v}-description-font-size` },
+      { label: 'description font weight', canBeLinked: true, groupKey: 'description-font-weight', variable: `--sectiondivider-${v}-description-font-weight` },
+      { label: 'description line height', canBeLinked: true, groupKey: 'description-line-height', variable: `--sectiondivider-${v}-description-line-height` },
+    ];
+  }
+
+  export const allTokens: Token[] = variants.flatMap((v) => [
+    ...variantTokens(v.key),
+    ...variantTypeGroupTokens(v.key),
+  ]);
+
+  // Linked block contexts: every linkable token registers under its variant name.
+  // Gradient stops are intentionally absent — they're variant-defining and never link.
+  const LINKED_GROUP_KEYS = [
+    'padding', 'radius',
+    'border', 'border-width', 'shadow',
+    'title-border-width', 'title-stroke-color',
+    'title-color', 'title-font-family', 'title-font-size', 'title-font-weight', 'title-line-height',
+    'description-color', 'description-font-family', 'description-font-size', 'description-font-weight', 'description-line-height',
+  ] as const;
+  const linkableContexts = new Map<string, string>(
+    variants.flatMap((v) =>
+      [...variantTokens(v.key), ...variantTypeGroupTokens(v.key)]
+        .filter((t) => t.groupKey && (LINKED_GROUP_KEYS as readonly string[]).includes(t.groupKey))
+        .map((t) => [t.variable, v.key] as const),
+    ),
+  );
+
+  const variantOptions = variants.map((v) => ({ value: v.key, label: v.title }));
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import SectionDivider from '../components/SectionDivider.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import GradientCard from './scaffolding/GradientCard.svelte';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { setCssVar } from '../lib/cssVarSync';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  let testTitle = 'Section Title';
+  let showDescription = true;
+  let descriptionText = 'This text is meant to provide additional context or meaning.';
+
+  const bgVar = '--backdrop-sectiondivider-surface';
+
+  onMount(() => {
+    if (!document.documentElement.style.getPropertyValue(bgVar)) {
+      setCssVar(bgVar, 'var(--surface-canvas)');
+    }
+  });
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  // The gradient tokens are owned by GradientCard, so the property grid only
+  // shows the frame tokens (padding/radius/outline). Gradient tokens still
+  // live in `allTokens` so they participate in reset and the registry.
+  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(frameTokens(v), linked.varSet);
+</script>
+
+<ComponentEditorBase {component} title="Section Divider" description="Full-width section banner with display font and palette variants. Import from <code>components/SectionDivider.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  <svelte:fragment slot="config">
+    <label class="text-field">
+      <span>Test title</span>
+      <input type="text" bind:value={testTitle} placeholder="Section Title" />
+    </label>
+    <label class="checkbox-field">
+      <input type="checkbox" bind:checked={showDescription} />
+      <span>Show description</span>
+    </label>
+    <label class="text-field text-field-wide">
+      <span>Description text</span>
+      <input type="text" bind:value={descriptionText} placeholder="Description text" />
+    </label>
+    <label class="backdrop-config">
+      <span>Sample background</span>
+      <div class="picker-slot">
+        <UIPaletteSelector variable={bgVar} />
+      </div>
+    </label>
+  </svelte:fragment>
+  {#each variants as v}
+    <VariantGroup
+      name={v.key}
+      title={v.title}
+      states={{ [v.key]: visibleVariantTokens(v.key) }}
+      typeGroups={{ [v.key]: variantTypeGroups(v.key) }}
+      {component}
+      siblings={buildSiblings(
+        variants.map((x) => x.key),
+        v.key,
+        (sv) => ({ [sv]: variantTokens(sv) }),
+        (sv) => ({ [sv]: variantTypeGroups(sv) }),
+      )}
+    >
+      <ShadowBackdrop mode="color" colorVariable={bgVar} padding="32px">
+        <SectionDivider
+          title={testTitle || v.title}
+          variant={v.key}
+          description={showDescription ? descriptionText : undefined}
+        />
+      </ShadowBackdrop>
+      <svelte:fragment slot="composite-controls">
+        <span class="gradient-section-label">Gradient</span>
+        <GradientCard {component} prefix={`--sectiondivider-${v.key}`} />
+      </svelte:fragment>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .text-field,
+  .checkbox-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+  }
+
+  .checkbox-field {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .checkbox-field input {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .text-field input {
+    padding: var(--ui-space-4) var(--ui-space-8);
+    background: var(--ui-surface-input);
+    color: var(--ui-text-primary);
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--ui-radius-sm);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    min-width: 16rem;
+  }
+
+  .text-field-wide input {
+    min-width: 28rem;
+  }
+
+  .backdrop-config {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+  }
+
+  .picker-slot {
+    min-width: 8rem;
+  }
+
+  .picker-slot :global(.ui-token-selector) {
+    width: 100%;
+  }
+
+  .gradient-section-label {
+    display: block;
+    margin-top: var(--ui-space-8);
+    font-size: var(--ui-font-size-md);
+    font-weight: 500;
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/component-editor/SegmentedControlEditor.svelte

@@ -0,0 +1,154 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  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[]> = {
+    '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: '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' },
+      { label: 'padding-top', variable: '--segmentedcontrol-bar-padding-top', groupKey: 'bar-padding-top', hidden: true },
+      { label: 'padding-right', variable: '--segmentedcontrol-bar-padding-right', groupKey: 'bar-padding-right', hidden: true },
+      { 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 },
+    ],
+    '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' },
+    ],
+    '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.
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    'default option': [{
+      legend: 'option text',
+      colorVariable: '--segmentedcontrol-option-text',
+      familyVariable: '--segmentedcontrol-option-text-font-family',
+      sizeVariable: '--segmentedcontrol-option-text-font-size',
+      weightVariable: '--segmentedcontrol-option-text-font-weight',
+      lineHeightVariable: '--segmentedcontrol-option-text-line-height',
+    }],
+    'selected option': [{
+      legend: 'option text',
+      colorVariable: '--segmentedcontrol-selected-text',
+      familyVariable: '--segmentedcontrol-selected-text-font-family',
+      sizeVariable: '--segmentedcontrol-selected-text-font-size',
+      weightVariable: '--segmentedcontrol-selected-text-font-weight',
+      lineHeightVariable: '--segmentedcontrol-selected-text-line-height',
+    }],
+    'hover option': [{
+      legend: 'option text',
+      colorVariable: '--segmentedcontrol-option-hover-text',
+      familyVariable: '--segmentedcontrol-option-hover-text-font-family',
+      sizeVariable: '--segmentedcontrol-option-hover-text-font-size',
+      weightVariable: '--segmentedcontrol-option-hover-text-font-weight',
+      lineHeightVariable: '--segmentedcontrol-option-hover-text-line-height',
+    }],
+    'disabled option': [{
+      legend: 'option text',
+      colorVariable: '--segmentedcontrol-disabled-text',
+      familyVariable: '--segmentedcontrol-disabled-text-font-family',
+      sizeVariable: '--segmentedcontrol-disabled-text-font-size',
+      weightVariable: '--segmentedcontrol-disabled-text-font-weight',
+      lineHeightVariable: '--segmentedcontrol-disabled-text-line-height',
+    }],
+  };
+
+  // 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 typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups);
+  export const allTokens: Token[] = [...Object.values(states).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'],
+  ]);
+</script>
+
+<script lang="ts">
+  import SegmentedControl from '../components/SegmentedControl.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  type Segment = { value: string; label: string; icon?: string; disabled?: boolean };
+  const segments: Segment[] = [
+    { value: 'option-1', label: 'Option 1', icon: 'fas fa-star' },
+    { value: 'option-2', label: 'Option 2', icon: 'fas fa-check' },
+    { value: 'option-3', label: 'Option 3', icon: 'fas fa-heart' },
+  ];
+  let showIcons = true;
+  $: previewSegments = showIcons ? segments : segments.map((s) => ({ ...s, icon: undefined }));
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+
+  $: visibleStates = Object.fromEntries(
+    Object.entries(states).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}>
+  <svelte:fragment slot="config">
+    <label>
+      <input type="checkbox" bind:checked={showIcons} />
+      <span>Show icons</span>
+    </label>
+  </svelte:fragment>
+  <VariantGroup
+    name="segmentedcontrol"
+    title="Segmented Control"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+    let:activeState
+  >
+    {@const previewValue = activeState === 'selected option' ? 'option-2' : ''}
+    {@const previewForceHover = activeState === 'hover option' ? 'option-1' : null}
+    {@const previewDisabled = activeState === 'disabled option'}
+    <div>
+      <SegmentedControl
+        segments={previewSegments}
+        value={previewValue}
+        forceHoverValue={previewForceHover}
+        disabled={previewDisabled}
+      />
+    </div>
+  </VariantGroup>
+</ComponentEditorBase>
+

package/src/component-editor/StandardButtonsEditor.svelte

@@ -0,0 +1,178 @@
+<script context="module" lang="ts">
+  import { buildSiblings } from './scaffolding/siblings';
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'button';
+
+  const variants = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
+  type Variant = typeof variants[number];
+  const stateNames = ['default', 'hover', 'disabled'] as const;
+  type StateName = typeof stateNames[number];
+  function statePrefix(v: Variant, s: StateName): string {
+    return s === 'default' ? `--button-${v}` : `--button-${v}-${s}`;
+  }
+  /** Buttons have a single text slot, so its typography props live as peer
+   *  rows in the unified token grid (no TypeEditor fieldset). Default state
+   *  carries the full font shape (family/weight/size/line-height); hover and
+   *  disabled only override text color, so they keep just the color row. */
+  function variantStateTokens(v: Variant, s: StateName): Token[] {
+    const p = statePrefix(v, s);
+    const tokens: Token[] = [
+      { label: 'surface color', groupKey: 'surface', variable: `${p}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `${p}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `${p}-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `${p}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `${p}-padding` },
+    ];
+    if (s === 'default') {
+      tokens.push(
+        { label: 'text color', groupKey: 'text', variable: `--button-${v}-text` },
+        { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--button-${v}-text-font-family` },
+        { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--button-${v}-text-font-size` },
+        { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--button-${v}-text-font-weight` },
+        { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--button-${v}-text-line-height` },
+        { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--button-${v}-icon-size` },
+      );
+    } else {
+      tokens.push({ label: 'text color', groupKey: 'text', variable: `--button-${v}-${s}-text` });
+    }
+    return tokens;
+  }
+
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return Object.fromEntries(stateNames.map((s) => [s, variantStateTokens(v, s)]));
+  }
+  export const allTokens: Token[] = variants.flatMap((v) =>
+    Object.values(variantStates(v)).flat(),
+  );
+
+  // Linked block:
+  //   - shape props (border-width, radius, padding) link across every variant × state — buttons share one geometry.
+  //   - typography props link across all six variants.
+  const linkableContexts = new Map<string, string>([
+    ...variants.flatMap((v) => stateNames.flatMap((s) => [
+      [`${statePrefix(v, s)}-border-width`, `${v} ${s}`] as const,
+      [`${statePrefix(v, s)}-radius`, `${v} ${s}`] as const,
+      [`${statePrefix(v, s)}-padding`, `${v} ${s}`] as const,
+    ])),
+    ...variants.flatMap((v) => [
+      [`--button-${v}-text-font-family`, v] as const,
+      [`--button-${v}-text-font-size`, v] as const,
+      [`--button-${v}-text-font-weight`, v] as const,
+      [`--button-${v}-text-line-height`, v] as const,
+      [`--button-${v}-icon-size`, v] as const,
+    ]),
+  ]);
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Button from '../components/Button.svelte';
+  import Toggle from '../ui/Toggle.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState, setComponentAlias } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  $: shimmerRef = $editorState.components.button?.aliases['--button-shimmer'];
+  $: shimmerEnabled = !(shimmerRef?.kind === 'token' && shimmerRef.name === '--shimmer-off');
+
+  function handleShimmerChange(e: CustomEvent<boolean>) {
+    setComponentAlias('button', '--button-shimmer', { kind: 'token', name: e.detail ? '--shimmer-on' : '--shimmer-off' });
+  }
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+
+  $: visibleVariantStates = (v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>;
+</script>
+
+<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes. Import from <code>components/Button.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  <svelte:fragment slot="config">
+    <label>
+      <span>Hover shimmer</span>
+      <Toggle checked={shimmerEnabled} on:change={handleShimmerChange} />
+    </label>
+  </svelte:fragment>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={visibleVariantStates(v)}
+      {component}
+      columns={2}
+      siblings={buildSiblings(variants, v, variantStates)}
+      let:activeState
+    >
+      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+      {@const isDisabled = activeState === 'disabled'}
+      <div class="size-row">
+        <div class="size-section">
+          <span class="size-label">size="default"</span>
+          <div class="button-showcase-grid">
+            <div class="button-showcase-item">
+              <Button variant={v} disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+            </div>
+            <div class="button-showcase-item">
+              <Button variant={v} icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+            </div>
+          </div>
+        </div>
+        <div class="size-divider"></div>
+        <div class="size-section">
+          <span class="size-label">size="small"</span>
+          <div class="button-showcase-grid">
+            <div class="button-showcase-item">
+              <Button variant={v} size="small" disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+            </div>
+            <div class="button-showcase-item">
+              <Button variant={v} size="small" icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .size-row {
+    display: flex;
+    gap: var(--space-12);
+    align-items: flex-start;
+  }
+
+  .size-divider {
+    width: 1px;
+    background: var(--ui-border-faint);
+    align-self: stretch;
+  }
+
+  .size-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+  }
+
+  .size-label {
+    font-size: var(--font-size-xs);
+    font-family: var(--ui-font-mono);
+    color: var(--ui-text-tertiary);
+  }
+
+  .button-showcase-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-16);
+    align-items: start;
+  }
+
+  .button-showcase-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    align-items: flex-start;
+  }
+</style>