@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/component-editor/CollapsibleSectionEditor.svelte

@@ -0,0 +1,167 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'collapsiblesection';
+
+  const VARIANTS = ['chromeless', 'divider', 'container'] as const;
+  type Variant = typeof VARIANTS[number];
+  const HEADER_STATES = ['default', 'hover', 'active'] as const;
+  type HeaderState = typeof HEADER_STATES[number];
+
+  function capitalize(s: string): string {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  }
+
+  const VARIANT_LABELS: Record<Variant, string> = {
+    chromeless: 'Chromeless',
+    divider: 'With Divider',
+    container: 'Container',
+  };
+
+  // Header tokens per variant. Chromeless has no chrome; divider exposes the
+  // bottom-border (the divider line) per state; container's outer chrome lives
+  // in `frame` so the header strip itself just owns surface + padding + text.
+  function headerStateTokens(v: Variant, s: HeaderState): Token[] {
+    const p = `--collapsiblesection-${v}-${s}`;
+    const base: Token[] = [
+      { label: 'surface color', groupKey: 'surface', variable: `${p}-surface` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `${p}-padding` },
+      { label: 'icon color', groupKey: 'icon', variable: `${p}-icon` },
+      { label: 'icon size', canBeLinked: true, groupKey: 'font-size', variable: `${p}-icon-size` },
+    ];
+    if (v === 'divider') {
+      base.splice(1, 0,
+        { label: 'divider color', groupKey: 'border', variable: `${p}-border` },
+        { label: 'divider width', canBeLinked: true, groupKey: 'border-width', variable: `${p}-border-width` },
+      );
+    }
+    return base;
+  }
+
+  // Container has a single Frame ruleset for the always-on outer chrome.
+  const frameTokens: Token[] = [
+    { label: 'surface color', groupKey: 'surface', variable: '--collapsiblesection-container-frame-surface' },
+    { label: 'border color', groupKey: 'border', variable: '--collapsiblesection-container-frame-border' },
+    { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--collapsiblesection-container-frame-border-width' },
+    { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--collapsiblesection-container-frame-radius' },
+  ];
+
+  // Expanded panel: chromeless/divider only own padding; container also paints
+  // its own surface so the content area can read distinct from the header strip.
+  function expandedTokens(v: Variant): Token[] {
+    const p = `--collapsiblesection-${v}-expanded`;
+    const tokens: Token[] = [];
+    if (v === 'container') tokens.push({ label: 'surface color', groupKey: 'surface', variable: `${p}-surface` });
+    tokens.push({ label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `${p}-padding` });
+    return tokens;
+  }
+
+  // Single per-variant state map: frame (container only), default/hover/active,
+  // expanded. State-tab strip inside the VariantGroup walks this sequence so the
+  // user moves through the whole variant from one tabbed surface.
+  function variantStates(v: Variant): Record<string, Token[]> {
+    const out: Record<string, Token[]> = {};
+    if (v === 'container') out.frame = frameTokens;
+    for (const s of HEADER_STATES) out[s] = headerStateTokens(v, s);
+    out.expanded = expandedTokens(v);
+    return out;
+  }
+
+  // Label typography only attaches to header states; frame and expanded don't
+  // own text. VariantGroup tolerates a partial map.
+  function variantTypeGroups(v: Variant): Record<string, TypeGroupConfig[]> {
+    return Object.fromEntries(HEADER_STATES.map((s) => [s, [{
+      legend: 'label',
+      colorVariable: `--collapsiblesection-${v}-${s}-label`,
+      familyVariable: `--collapsiblesection-${v}-${s}-label-font-family`,
+      sizeVariable: `--collapsiblesection-${v}-${s}-label-font-size`,
+      weightVariable: `--collapsiblesection-${v}-${s}-label-font-weight`,
+      lineHeightVariable: `--collapsiblesection-${v}-${s}-label-line-height`,
+    }]]));
+  }
+
+  const headerTypeGroupTokens: Token[] = VARIANTS.flatMap((v) => HEADER_STATES.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--collapsiblesection-${v}-${s}-label-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--collapsiblesection-${v}-${s}-label-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--collapsiblesection-${v}-${s}-label-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--collapsiblesection-${v}-${s}-label-line-height` },
+  ]));
+
+  export const allTokens: Token[] = [
+    ...VARIANTS.flatMap((v) => Object.values(variantStates(v)).flat()),
+    ...VARIANTS.flatMap((v) => buildTypeGroupColorTokens(variantTypeGroups(v))),
+    ...headerTypeGroupTokens,
+  ];
+
+  const linkableContexts = new Map<string, string>([
+    ...VARIANTS.flatMap((v) => HEADER_STATES.flatMap((s) => {
+      const base: Array<[string, string]> = [
+        [`--collapsiblesection-${v}-${s}-padding`, `${v} ${s}`],
+        [`--collapsiblesection-${v}-${s}-icon-size`, `${v} ${s}`],
+        [`--collapsiblesection-${v}-${s}-label-font-family`, `${v} ${s}`],
+        [`--collapsiblesection-${v}-${s}-label-font-size`, `${v} ${s}`],
+        [`--collapsiblesection-${v}-${s}-label-font-weight`, `${v} ${s}`],
+        [`--collapsiblesection-${v}-${s}-label-line-height`, `${v} ${s}`],
+      ];
+      if (v === 'divider') base.push([`--collapsiblesection-divider-${s}-border-width`, `divider ${s}`]);
+      return base;
+    })),
+    ['--collapsiblesection-container-frame-border-width', 'container frame'],
+    ['--collapsiblesection-container-frame-radius', 'container frame'],
+    ...VARIANTS.flatMap((v) => [
+      [`--collapsiblesection-${v}-expanded-padding`, `${v} expanded`] as [string, string],
+    ]),
+  ]);
+
+  const variantOptions = VARIANTS.map((v) => ({ value: v, label: VARIANT_LABELS[v] }));
+</script>
+
+<script lang="ts">
+  import CollapsibleSection from '../components/CollapsibleSection.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { buildSiblings } from './scaffolding/siblings';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  $: 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="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, divider, container. Import from <code>components/CollapsibleSection.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  {#each VARIANTS as v}
+    <VariantGroup
+      name={v}
+      title={VARIANT_LABELS[v]}
+      states={visibleVariantStates(v)}
+      typeGroups={variantTypeGroups(v)}
+      {component}
+      siblings={buildSiblings(VARIANTS, v, variantStates, variantTypeGroups)}
+      let:activeState
+    >
+      {@const isExpanded = activeState === 'expanded'}
+      {@const isFrame = activeState === 'frame'}
+      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+      {@const forceActive = activeState === 'active'}
+      <CollapsibleSection
+        variant={v}
+        label="Click to expand"
+        expanded={isExpanded}
+        active={forceActive}
+        class={forceClass}
+      >
+        <p style="margin: 0; color: var(--text-secondary);">
+          {#if isFrame}
+            (Frame) — outer chrome only; expand the section to see content area styling.
+          {:else}
+            This content is revealed when the section is expanded. Any content can go here.
+          {/if}
+        </p>
+      </CollapsibleSection>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>

package/src/component-editor/CornerBadgeEditor.svelte

@@ -0,0 +1,207 @@
+<script context="module" lang="ts">
+  import type { Token } from './scaffolding/types';
+  import { badgeVariants } from '../components/Badge.svelte';
+
+  export const component = 'cornerbadge';
+
+  // One state per Badge variant. Each variant carries the same five tokens, and
+  // every token has a role-specific groupKey so the LinkedBlock groups
+  // "outer-radius" across variants (not against inner/h-axis/v-axis). Changing
+  // a variant's outer corner radius propagates to the same role on every other
+  // variant when linked; roles within a variant stay independent.
+  function variantTokens(v: typeof badgeVariants[number]): Token[] {
+    return [
+      { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: `--corner-badge-${v}-margin` },
+      { label: 'outer corner radius', canBeLinked: true, groupKey: 'outer-radius', variable: `--corner-badge-${v}-outer-radius` },
+      { label: 'inner corner radius', canBeLinked: true, groupKey: 'inner-radius', variable: `--corner-badge-${v}-inner-radius` },
+      { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: `--corner-badge-${v}-h-axis-radius` },
+      { label: 'vertical-axis radius', canBeLinked: true, groupKey: 'v-axis-radius', variable: `--corner-badge-${v}-v-axis-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--corner-badge-${v}-padding` },
+      // Per-side overrides written by the UIPaddingSelector when the user splits
+      // padding. Declared (hidden) so the schema sees them as siblings across
+      // variants — `padding-top` on primary links to `padding-top` on accent, etc.
+      // The themed-padding mixin in CornerBadge.svelte reads them via
+      // `var(--corner-badge-${v}-padding-top, fallback)`; no `:root` default is
+      // needed (test skips `hidden: true` tokens by design — see editorTokens.test.ts).
+      { label: 'padding-top', canBeLinked: true, groupKey: 'padding-top', variable: `--corner-badge-${v}-padding-top`, hidden: true },
+      { label: 'padding-right', canBeLinked: true, groupKey: 'padding-right', variable: `--corner-badge-${v}-padding-right`, hidden: true },
+      { label: 'padding-bottom', canBeLinked: true, groupKey: 'padding-bottom', variable: `--corner-badge-${v}-padding-bottom`, hidden: true },
+      { label: 'padding-left', canBeLinked: true, groupKey: 'padding-left', variable: `--corner-badge-${v}-padding-left`, hidden: true },
+      { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: `--corner-badge-${v}-text-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: `--corner-badge-${v}-text-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: `--corner-badge-${v}-text-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--corner-badge-${v}-text-line-height` },
+    ];
+  }
+  const states: Record<string, Token[]> = Object.fromEntries(
+    badgeVariants.map((v) => [v, variantTokens(v)]),
+  );
+
+  export const allTokens: Token[] = Object.values(states).flat();
+
+  // Every linkable variable across variants — the LinkedBlock uses this to detect
+  // when ≥2 variants currently agree on an alias for the same groupKey. Variant
+  // name is the context label so the chart rows mirror the variant tab strip.
+  const linkableContexts = new Map<string, string>(
+    badgeVariants.flatMap((v) =>
+      variantTokens(v)
+        .filter((t) => t.canBeLinked)
+        .map((t) => [t.variable, v] as [string, string]),
+    ),
+  );
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import CornerBadge, { type CornerAnchor } from '../components/CornerBadge.svelte';
+  import type { BadgeVariant } from '../components/Badge.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import UIRadioGroup from '../ui/UIRadioGroup.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+  import { setCssVar } from '../lib/cssVarSync';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import demoImageUrl from '../assets/newspaper.webp';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  $: visibleStates = Object.fromEntries(
+    badgeVariants.map((v) => [v, withLinkedDisabled(variantTokens(v), linked.varSet)]),
+  ) as Record<string, Token[]>;
+
+  const bgVar = '--backdrop-cornerbadge-surface';
+
+  onMount(() => {
+    if (!document.documentElement.style.getPropertyValue(bgVar)) {
+      setCssVar(bgVar, 'var(--surface-canvas)');
+    }
+  });
+
+  let anchor: CornerAnchor = 'bottom-right';
+  const anchorGrid: ReadonlyArray<{ value: CornerAnchor; icon: string; label: string }> = [
+    { value: 'top-left',     icon: 'fas fa-arrow-up-left',     label: 'Top left' },
+    { value: 'top-right',    icon: 'fas fa-arrow-up-right',    label: 'Top right' },
+    { value: 'bottom-left',  icon: 'fas fa-arrow-down-left',   label: 'Bottom left' },
+    { value: 'bottom-right', icon: 'fas fa-arrow-down-right',  label: 'Bottom right' },
+  ];
+
+  let variant: BadgeVariant = 'accent';
+  const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<ComponentEditorBase {component} title="Corner Badge" description="Badge pinned flush to a corner of a positioned ancestor. Composes <code>Badge</code>; adds offset + inner-radius tokens. Import from <code>components/CornerBadge.svelte</code>" tokens={allTokens} {linked}>
+  <svelte:fragment slot="config">
+    <label class="backdrop-config">
+      <span>Sample background</span>
+      <div class="picker-slot">
+        <UIPaletteSelector variable={bgVar} />
+      </div>
+    </label>
+    <div class="control-row">
+      <span>Anchor</span>
+      <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
+        {#each anchorGrid as opt (opt.value)}
+          <button
+            type="button"
+            class="anchor-btn"
+            class:checked={anchor === opt.value}
+            role="radio"
+            aria-checked={anchor === opt.value}
+            aria-label={opt.label}
+            title={opt.label}
+            on:click={() => (anchor = opt.value)}
+          >
+            <i class={opt.icon} aria-hidden="true"></i>
+          </button>
+        {/each}
+      </div>
+    </div>
+    <div class="control-row">
+      <span>Variant</span>
+      <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
+    </div>
+  </svelte:fragment>
+  <VariantGroup name="cornerbadge" title="Corner Badge" states={visibleStates} {component}>
+    <ShadowBackdrop mode="color" colorVariable={bgVar}>
+      <div class="corner-stage-wrap">
+        <div class="corner-stage">
+          <img src={demoImageUrl} alt="" class="corner-stage-image" />
+          <CornerBadge {variant} {anchor}>{variant.charAt(0).toUpperCase() + variant.slice(1)}</CornerBadge>
+        </div>
+      </div>
+    </ShadowBackdrop>
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  /* Center the stage in the backdrop so the smaller surface doesn't stretch full-width. */
+  .corner-stage-wrap {
+    display: grid;
+    place-items: center;
+  }
+
+  /* Anchor parent for the preview — gives CornerBadge a positioned ancestor so it
+     actually pins to a corner, and a visible surface so offset/radius are observable. */
+  /* No overflow:hidden here — the badge needs to be able to extend past the stage
+     (e.g. when the offset is 0 or negative). Rounded corners live on the image. */
+  .corner-stage {
+    position: relative;
+    width: 380px;
+  }
+
+  .corner-stage-image {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--ui-radius-md);
+  }
+
+  .control-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+
+  .backdrop-config {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+  .picker-slot {
+    min-width: 8rem;
+  }
+  .picker-slot :global(.ui-token-selector) {
+    width: 100%;
+  }
+
+  .anchor-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1.5rem);
+    grid-template-rows: repeat(2, 1.5rem);
+    gap: 2px;
+  }
+  .anchor-btn {
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.1));
+    border-radius: var(--ui-radius-sm);
+    background: transparent;
+    color: var(--ui-text-tertiary);
+    cursor: pointer;
+    font-size: 0.7rem;
+    line-height: 1;
+    transition: background var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+  .anchor-btn:hover {
+    color: var(--ui-text-primary);
+  }
+  .anchor-btn.checked {
+    background: var(--ui-surface-active, rgba(255, 255, 255, 0.12));
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-strong, rgba(255, 255, 255, 0.25));
+  }
+</style>

package/src/component-editor/DialogEditor.svelte

@@ -0,0 +1,172 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'dialog';
+
+  const BUTTON_VARIANTS = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
+  type ButtonVariant = typeof BUTTON_VARIANTS[number];
+
+  const CONFIRM_VAR = '--dialog-confirm-variant';
+  const CANCEL_VAR = '--dialog-cancel-variant';
+  const DEFAULT_CONFIRM: ButtonVariant = 'primary';
+  const DEFAULT_CANCEL: ButtonVariant = 'outline';
+
+  // Frame-level tokens (the dialog box itself + overlay + header + body + footer + close icon).
+  // Button styling lives in Button.svelte — the dialog only owns its own chrome.
+  const frameStates: Record<string, Token[]> = {
+    overlay: [
+      { label: 'backdrop color', groupKey: 'surface', variable: '--dialog-overlay-surface' },
+    ],
+    dialog: [
+      { label: 'surface color', variable: '--dialog-surface' },
+      { label: 'border color', variable: '--dialog-border' },
+      { label: 'border width', groupKey: 'width', variable: '--dialog-border-width' },
+      { label: 'corner radius', variable: '--dialog-radius' },
+      { label: 'dialog shadow', variable: '--dialog-shadow' },
+      { label: 'background blur', variable: '--dialog-blur' },
+    ],
+    header: [
+      { label: 'surface color', groupKey: 'surface', variable: '--dialog-header-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--dialog-header-border' },
+      { label: 'border width', groupKey: 'width', variable: '--dialog-header-border-width' },
+      { label: 'padding', groupKey: 'padding', variable: '--dialog-header-padding' },
+      { label: 'close icon color', groupKey: 'icon', variable: '--dialog-close-icon' },
+      { label: 'close icon size', groupKey: 'size', variable: '--dialog-close-icon-size' },
+    ],
+    body: [
+      { label: 'padding', groupKey: 'padding', variable: '--dialog-body-padding' },
+    ],
+    footer: [
+      { label: 'border color', groupKey: 'border', variable: '--dialog-footer-border' },
+      { label: 'border width', groupKey: 'width', variable: '--dialog-footer-border-width' },
+      { label: 'padding', groupKey: 'padding', variable: '--dialog-footer-padding' },
+    ],
+  };
+
+  const frameTypeGroups: Record<string, TypeGroupConfig[]> = {
+    header: [{
+      legend: 'title',
+      colorVariable: '--dialog-title',
+      familyVariable: '--dialog-title-font-family',
+      sizeVariable: '--dialog-title-font-size',
+      weightVariable: '--dialog-title-font-weight',
+      lineHeightVariable: '--dialog-title-line-height',
+    }],
+    body: [{
+      legend: 'body text',
+      colorVariable: '--dialog-body',
+      familyVariable: '--dialog-body-font-family',
+      sizeVariable: '--dialog-body-font-size',
+      weightVariable: '--dialog-body-font-weight',
+      lineHeightVariable: '--dialog-body-line-height',
+    }],
+  };
+  // Slot-prefixed groupKeys keep title and body typography independent.
+  // Sharing a groupKey would phantom-link the two slots in the schema without
+  // surfacing the link in the LinkedBlock.
+  const frameTypeGroupTokens: Token[] = [
+    { label: 'font family', groupKey: 'title-font-family', variable: '--dialog-title-font-family' },
+    { label: 'font size', groupKey: 'title-font-size', variable: '--dialog-title-font-size' },
+    { label: 'font weight', groupKey: 'title-font-weight', variable: '--dialog-title-font-weight' },
+    { label: 'line height', groupKey: 'title-line-height', variable: '--dialog-title-line-height' },
+    { label: 'font family', groupKey: 'body-font-family', variable: '--dialog-body-font-family' },
+    { label: 'font size', groupKey: 'body-font-size', variable: '--dialog-body-font-size' },
+    { label: 'font weight', groupKey: 'body-font-weight', variable: '--dialog-body-font-weight' },
+    { label: 'line height', groupKey: 'body-line-height', variable: '--dialog-body-line-height' },
+  ];
+
+  export const allTokens: Token[] = [
+    ...Object.values(frameStates).flat(),
+    ...buildTypeGroupColorTokens(frameTypeGroups),
+    ...frameTypeGroupTokens,
+  ];
+
+  function variantLabel(v: ButtonVariant): string {
+    return v.charAt(0).toUpperCase() + v.slice(1);
+  }
+</script>
+
+<script lang="ts">
+  import Dialog from '../components/Dialog.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState, setComponentConfig } from '../lib/editorStore';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
+
+  $: config = $editorState.components.dialog?.config ?? {};
+  $: confirmVariant = (BUTTON_VARIANTS.includes(config[CONFIRM_VAR] as ButtonVariant) ? config[CONFIRM_VAR] : DEFAULT_CONFIRM) as ButtonVariant;
+  $: cancelVariant = (BUTTON_VARIANTS.includes(config[CANCEL_VAR] as ButtonVariant) ? config[CANCEL_VAR] : DEFAULT_CANCEL) as ButtonVariant;
+
+  function setConfirmVariant(e: Event) {
+    const v = (e.target as HTMLSelectElement).value;
+    setComponentConfig(component, CONFIRM_VAR, v);
+  }
+  function setCancelVariant(e: Event) {
+    const v = (e.target as HTMLSelectElement).value;
+    setComponentConfig(component, CANCEL_VAR, v);
+  }
+
+  let bgMode: 'image' | 'color' = 'image';
+  const bgVar = '--backdrop-dialog-surface';
+</script>
+
+<ComponentEditorBase {component} title="Dialog" description="Modal dialog with focus management and slide-in animation. Import from <code>components/Dialog.svelte</code>" tokens={allTokens}>
+  <svelte:fragment slot="config">
+    <label>
+      <span>Cancel button (left)</span>
+      <select class="form-select" value={cancelVariant} on:change={setCancelVariant}>
+        {#each BUTTON_VARIANTS as v}
+          <option value={v}>{variantLabel(v)}</option>
+        {/each}
+      </select>
+    </label>
+    <label>
+      <span>Confirm button (right)</span>
+      <select class="form-select" value={confirmVariant} on:change={setConfirmVariant}>
+        {#each BUTTON_VARIANTS as v}
+          <option value={v}>{variantLabel(v)}</option>
+        {/each}
+      </select>
+    </label>
+    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+  </svelte:fragment>
+  <div class="dialog-preview">
+    <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding="0">
+      <Dialog
+        show
+        inline
+        title="Sample Dialog"
+        confirm={{ label: 'Save', onClick: () => {} }}
+        cancel={{ label: 'Cancel', onClick: () => {} }}
+      >
+        <p style="margin: 0;">This is the dialog body content. It supports any slotted content including forms, lists, or other components.</p>
+      </Dialog>
+    </ShadowBackdrop>
+  </div>
+  <VariantGroup name="dialog" title="Dialog" states={frameStates} typeGroups={frameTypeGroups} {component} />
+</ComponentEditorBase>
+
+<style>
+  .dialog-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+  }
+  .dialog-preview :global(.shadow-backdrop) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+  }
+  .dialog-preview :global(.dialog-backdrop.inline) {
+    width: auto;
+    box-sizing: border-box;
+    padding: clamp(24px, 6vw, 128px);
+  }
+</style>
+

package/src/component-editor/ImageEditor.svelte

@@ -0,0 +1,72 @@
+<script context="module" lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'image';
+
+  // Single object: image frame.
+  const states: Record<string, Token[]> = {
+    image: [
+      { label: 'border color', groupKey: 'border', variable: '--image-default-border' },
+      { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
+      { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
+      { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
+    ],
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Image from '../components/Image.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import demoImageUrl from '../assets/offering.webp';
+  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+  import { setCssVar } from '../lib/cssVarSync';
+
+  const bgVar = '--backdrop-image-surface';
+
+  onMount(() => {
+    if (!document.documentElement.style.getPropertyValue(bgVar)) {
+      setCssVar(bgVar, 'var(--surface-canvas)');
+    }
+  });
+</script>
+
+<ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow. Import from <code>components/Image.svelte</code>" tokens={allTokens}>
+  <svelte:fragment slot="config">
+    <label class="backdrop-config">
+      <span>Sample background</span>
+      <div class="picker-slot">
+        <UIPaletteSelector variable={bgVar} />
+      </div>
+    </label>
+  </svelte:fragment>
+  <VariantGroup name="image" title="Image" {states} {component}>
+    <ShadowBackdrop mode="color" colorVariable={bgVar}>
+      <div class="image-demo-grid">
+        <Image src={demoImageUrl} alt="Demo" variant="banner" />
+      </div>
+    </ShadowBackdrop>
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .image-demo-grid {
+    display: grid;
+    place-items: center;
+  }
+  .backdrop-config {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+  .picker-slot {
+    min-width: 8rem;
+  }
+  .picker-slot :global(.ui-token-selector) {
+    width: 100%;
+  }
+</style>