@motion-proto/live-tokens 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
@@ -23,9 +23,12 @@
     "src/system",
     "src/app/site.css",
     "dist-plugin",
+    ".claude/skills",
     "!**/*.test.ts",
     "!**/*.spec.ts",
-    "!**/__tests__/**"
+    "!**/__tests__/**",
+    "!src/system/components/Stat.svelte",
+    "!src/system/components/StatEditor.svelte"
   ],
   "exports": {
     ".": {
@@ -94,6 +97,9 @@
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
     "happy-dom": "^20.9.0",
+    "highlight.js": "^11.11.1",
+    "marked": "^18.0.4",
+    "mermaid": "^11.15.0",
     "sass": "^1.98.0",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",

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

@@ -1,58 +1,59 @@
 <script module lang="ts">
-  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token } from './scaffolding/types';
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'badge';
   const variants = badgeVariants;
   type Variant = typeof variants[number];
 
-  // Each variant is its own visual presentation; surface/text/border colors are unique.
-  // Shape props (radius/border-width/padding/shadow) and font props can be linked across variants.
-  function variantTokens(variant: Variant): Token[] {
+  // Base part: shape, spacing, and typography props that almost never differ
+  // between variants. Defaults are identical across the palette; the linked
+  // block surfaces that equality so authors edit one value and it co-applies.
+  // Tagged with `element` so StateBlock partitions the panel into labeled
+  // `frame` and `text` subsections instead of one long column.
+  function variantBaseTokens(v: Variant): Token[] {
     return [
-      { label: 'surface color', groupKey: 'surface', variable: `--badge-${variant}-surface` },
-      { label: 'border color', groupKey: 'border', variable: `--badge-${variant}-border` },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--badge-${variant}-border-width` },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--badge-${variant}-radius` },
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--badge-${variant}-padding` },
-      { label: 'badge shadow', canBeLinked: true, groupKey: 'shadow', variable: `--badge-${variant}-shadow` },
-      { label: 'backdrop blur', canBeLinked: true, groupKey: 'blur', variable: `--badge-${variant}-blur` },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--badge-${variant}-icon-size` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--badge-${v}-padding`, element: 'frame' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--badge-${v}-radius`, element: 'frame' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--badge-${v}-border-width`, element: 'frame' },
+      { label: 'badge shadow', canBeLinked: true, groupKey: 'shadow', variable: `--badge-${v}-shadow`, element: 'frame' },
+      { label: 'backdrop blur', canBeLinked: true, groupKey: 'blur', variable: `--badge-${v}-blur`, element: 'frame' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--badge-${v}-icon-size`, element: 'frame' },
+      { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--badge-${v}-text-font-family`, element: 'text' },
+      { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--badge-${v}-text-font-size`, element: 'text' },
+      { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--badge-${v}-text-font-weight`, element: 'text' },
+      { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--badge-${v}-text-line-height`, element: 'text' },
     ];
   }
-  function variantTypeGroups(variant: Variant): TypeGroupConfig[] {
-    return [{
-      legend: `${variant} text`,
-      colorVariable: `--badge-${variant}-text`,
-      familyVariable: `--badge-${variant}-text-font-family`,
-      sizeVariable: `--badge-${variant}-text-font-size`,
-      weightVariable: `--badge-${variant}-text-font-weight`,
-      lineHeightVariable: `--badge-${variant}-text-line-height`,
-    }];
-  }
-  function variantTypeGroupTokens(variant: Variant): Token[] {
+
+  // Colors part: the shade triple that actually distinguishes one variant from
+  // another. groupKey keys siblings across variants so a user can opt into a
+  // shared value via the link UI, but they default divergent (variant = palette).
+  function variantColorTokens(v: Variant): Token[] {
     return [
-      { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--badge-${variant}-text-font-family` },
-      { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--badge-${variant}-text-font-size` },
-      { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--badge-${variant}-text-font-weight` },
-      { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--badge-${variant}-text-line-height` },
+      { label: 'surface color', groupKey: 'surface', variable: `--badge-${v}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--badge-${v}-border` },
+      { label: 'text color', groupKey: 'text', variable: `--badge-${v}-text` },
     ];
   }
+
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return { base: variantBaseTokens(v), colors: variantColorTokens(v) };
+  }
+
   export const allTokens: Token[] = variants.flatMap((v) => [
-    ...variantTokens(v),
-    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
-    ...variantTypeGroupTokens(v),
+    ...variantBaseTokens(v),
+    ...variantColorTokens(v),
   ]);
 
-  // Cross-variant sharing: any token with canBeLinked+groupKey participates in
-  // the linked block when ≥2 variants currently agree on its alias.
-  const linkableProps = [
-    'border-width', 'radius', 'padding', 'shadow', 'blur', 'icon-size',
-    'text-font-family', 'text-font-size', 'text-font-weight', 'text-line-height',
-  ] as const;
+  // Only base props join the linked block — colors are intentionally per-variant
+  // so each shade can be retuned without dragging shape/type behind it.
   const linkableContexts = new Map<string, string>(
-    variants.flatMap((v) => linkableProps.map((p) => [`--badge-${v}-${p}`, v] as [string, string]))
+    variants.flatMap((v) =>
+      variantBaseTokens(v)
+        .filter((t) => t.canBeLinked)
+        .map((t) => [t.variable, `${v} base`] as [string, string]),
+    ),
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
@@ -67,7 +68,9 @@
   import { buildSiblings } from './scaffolding/siblings';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
 </script>
 
 <ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants." tokens={allTokens} {linked} variants={variantOptions}>
@@ -75,10 +78,9 @@
     <VariantGroup
       name={v}
       title={v.charAt(0).toUpperCase() + v.slice(1)}
-      states={{ [v]: visibleVariantTokens(v) }}
-      typeGroups={{ [v]: variantTypeGroups(v) }}
+      states={visibleVariantStates(v)}
       {component}
-      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+      siblings={buildSiblings(variants, v, variantStates)}
     >
       <div class="badge-showcase-grid">
         <Badge variant={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>

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

@@ -0,0 +1,224 @@
+<script 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}`;
+  }
+
+  // Shape + type. These don't change per state in the runtime — promoted into
+  // their own "base" part so state panels carry only what genuinely varies.
+  // Tagged with `element` so StateBlock partitions base into labeled `frame`
+  // and `text` subsections, matching the Badge editor's layout.
+  function variantBaseTokens(v: Variant): Token[] {
+    return [
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--button-${v}-padding`, element: 'frame' },
+      { label: 'padding-top', canBeLinked: true, groupKey: 'padding-top', variable: `--button-${v}-padding-top`, hidden: true, element: 'frame' },
+      { label: 'padding-right', canBeLinked: true, groupKey: 'padding-right', variable: `--button-${v}-padding-right`, hidden: true, element: 'frame' },
+      { label: 'padding-bottom', canBeLinked: true, groupKey: 'padding-bottom', variable: `--button-${v}-padding-bottom`, hidden: true, element: 'frame' },
+      { label: 'padding-left', canBeLinked: true, groupKey: 'padding-left', variable: `--button-${v}-padding-left`, hidden: true, element: 'frame' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--button-${v}-radius`, element: 'frame' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--button-${v}-border-width`, element: 'frame' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--button-${v}-icon-size`, element: 'frame' },
+      { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--button-${v}-text-font-family`, element: 'text' },
+      { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--button-${v}-text-font-size`, element: 'text' },
+      { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--button-${v}-text-font-weight`, element: 'text' },
+      { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--button-${v}-text-line-height`, element: 'text' },
+    ];
+  }
+
+  // State panels carry only what changes between states: the three color slots.
+  function variantStateTokens(v: Variant, s: StateName): Token[] {
+    const colorVar = s === 'default' ? `--button-${v}-text` : `--button-${v}-${s}-text`;
+    return [
+      { label: 'surface color', groupKey: 'surface', variable: `${statePrefix(v, s)}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `${statePrefix(v, s)}-border` },
+      { label: 'text color', groupKey: 'text', variable: colorVar },
+    ];
+  }
+
+  // Outline is the only variant that paints a surface tint on :active; the rest
+  // express press feedback through transform/shadow only. Expose just the one
+  // tunable property here rather than adding an active state to every variant.
+  const outlineActiveTokens: Token[] = [
+    { label: 'surface color', groupKey: 'surface', variable: '--button-outline-active-surface' },
+  ];
+
+  function variantStates(v: Variant): Record<string, Token[]> {
+    const out: Record<string, Token[]> = {};
+    out.base = variantBaseTokens(v);
+    out.default = variantStateTokens(v, 'default');
+    out.hover = variantStateTokens(v, 'hover');
+    if (v === 'outline') out.active = outlineActiveTokens;
+    out.disabled = variantStateTokens(v, 'disabled');
+    return out;
+  }
+
+  // Small-size schema. One shared spec across all variants (matches the runtime
+  // `.small` rule, which is variant-agnostic). Per-side padding rows are hidden
+  // and surface only when the editor splits the padding control.
+  // Same frame/text element split as the default-size base for visual parity.
+  const smallStates: Record<string, Token[]> = {
+    small: [
+      { label: 'padding', groupKey: 'small-padding', variable: '--button-small-padding', element: 'frame' },
+      { label: 'padding-top', groupKey: 'small-padding-top', variable: '--button-small-padding-top', hidden: true, element: 'frame' },
+      { label: 'padding-right', groupKey: 'small-padding-right', variable: '--button-small-padding-right', hidden: true, element: 'frame' },
+      { label: 'padding-bottom', groupKey: 'small-padding-bottom', variable: '--button-small-padding-bottom', hidden: true, element: 'frame' },
+      { label: 'padding-left', groupKey: 'small-padding-left', variable: '--button-small-padding-left', hidden: true, element: 'frame' },
+      { label: 'icon size', groupKey: 'small-icon-size', variable: '--button-small-icon-size', element: 'frame' },
+      { label: 'font size', groupKey: 'small-font-size', variable: '--button-small-text-font-size', element: 'text' },
+      { label: 'font weight', groupKey: 'small-font-weight', variable: '--button-small-text-font-weight', element: 'text' },
+      { label: 'line height', groupKey: 'small-line-height', variable: '--button-small-text-line-height', element: 'text' },
+    ],
+  };
+  const smallTokensFlat: Token[] = Object.values(smallStates).flat();
+
+  export const allTokens: Token[] = [
+    ...variants.flatMap((v) => Object.values(variantStates(v)).flat()),
+    ...smallTokensFlat,
+  ];
+
+  // All shape + type props live under each variant's "base" part; they link
+  // across variants from there. Small tokens stay in their own namespace —
+  // no cross-size linking.
+  const linkableContexts = new Map<string, string>(
+    variants.flatMap((v) => [
+      [`--button-${v}-padding`, `${v} base`] as const,
+      [`--button-${v}-radius`, `${v} base`] as const,
+      [`--button-${v}-border-width`, `${v} base`] as const,
+      [`--button-${v}-text-font-family`, `${v} base`] as const,
+      [`--button-${v}-text-font-size`, `${v} base`] as const,
+      [`--button-${v}-text-font-weight`, `${v} base`] as const,
+      [`--button-${v}-text-line-height`, `${v} base`] as const,
+      [`--button-${v}-icon-size`, `${v} base`] as const,
+    ]),
+  );
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Button from '../../system/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 '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  let shimmerRef = $derived($editorState.components.button?.aliases['--button-shimmer']);
+  let shimmerEnabled = $derived(!(shimmerRef?.kind === 'token' && shimmerRef.name === '--shimmer-off'));
+
+  function handleShimmerChange(checked: boolean) {
+    setComponentAlias('button', '--button-shimmer', { kind: 'token', name: checked ? '--shimmer-on' : '--shimmer-off' });
+  }
+
+  let previewSize = $state<'default' | 'small'>('default');
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+
+  let visibleSmallStates = $derived(Object.fromEntries(
+    Object.entries(smallStates).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+
+  // At small size, no variant strip — the small spec is shared across all
+  // variants, so the strip would have nothing to navigate between.
+  let baseVariantOptions = $derived(previewSize === 'small' ? [] : variantOptions);
+</script>
+
+{#snippet sizeAction()}
+  <label>
+    <span>Size</span>
+    <select bind:value={previewSize}>
+      <option value="default">Default</option>
+      <option value="small">Small</option>
+    </select>
+  </label>
+{/snippet}
+
+<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes." tokens={allTokens} {linked} variants={baseVariantOptions}>
+  {#if previewSize === 'default'}
+    {#each variants as v}
+      <VariantGroup
+        name={v}
+        title={v.charAt(0).toUpperCase() + v.slice(1)}
+        states={visibleVariantStates(v)}
+        {component}
+        siblings={buildSiblings(variants, v, variantStates)}
+        previewActions={sizeAction}
+      >
+        {#snippet extraPropertyRows(stateName)}
+          {#if stateName === 'hover'}
+            <div class="property-row">
+              <span class="property-label">hover shimmer</span>
+              <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
+            </div>
+          {/if}
+        {/snippet}
+        {#snippet children({ activeState })}
+          {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+          {@const isDisabled = activeState === 'disabled'}
+          <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>
+        {/snippet}
+      </VariantGroup>
+    {/each}
+  {:else}
+    <VariantGroup
+      name="small"
+      title="Small"
+      states={visibleSmallStates}
+      {component}
+      previewActions={sizeAction}
+    >
+      {#snippet children()}
+        <div class="small-preview">
+          {#each variants as v}
+            <Button variant={v} size="small">{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+          {/each}
+          {#each variants as v}
+            <Button variant={v} size="small" icon="fas fa-star" iconPosition="left">{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+          {/each}
+        </div>
+      {/snippet}
+    </VariantGroup>
+  {/if}
+</ComponentEditorBase>
+
+<style>
+  .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;
+  }
+
+  .small-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-12);
+    align-items: center;
+  }
+</style>

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

@@ -6,15 +6,11 @@
 
   const VARIANTS = ['chromeless', 'divider', 'container'] as const;
   type Variant = typeof VARIANTS[number];
-  // CSS-layer state names (used in the var names) vs UI-layer labels (shown in
-  // the editor). The CSS keeps the historical `active` slug for compatibility;
-  // the UI surfaces it as "Current" because users read `:active` as click-press.
-  const HEADER_STATES = ['default', 'hover', 'active'] as const;
+  const HEADER_STATES = ['default', 'hover'] as const;
   type HeaderState = typeof HEADER_STATES[number];
   const HEADER_STATE_LABELS: Record<HeaderState, string> = {
     default: 'Default',
     hover: 'Hover',
-    active: 'Current',
   };
 
   const VARIANT_LABELS: Record<Variant, string> = {
@@ -154,12 +150,10 @@
         {@const isContainerPart = activeState === 'Container'}
         {@const isBody = activeState === 'Body'}
         {@const forceClass = activeState === 'Header / Hover' ? 'force-hover' : ''}
-        {@const forceActive = activeState === 'Header / Current'}
         <CollapsibleSection
           variant={v}
           label="Click to expand"
           expanded={isBody}
-          active={forceActive}
           class={forceClass}
         >
           <p style="margin: 0; color: var(--text-secondary);">

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

@@ -3,37 +3,45 @@
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'cornerbadge';
+  type Variant = typeof badgeVariants[number];
 
-  // One state per variant; role-specific groupKeys link the same role across variants while keeping roles independent within a variant.
-  function variantTokens(v: typeof badgeVariants[number]): Token[] {
+  // Shape, spacing, type — uniform across variants, one flat token set.
+  // Authored from any variant's panel; edits write the same flat keys.
+  const baseTokens: Token[] = [
+    { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: '--corner-badge-margin', element: 'frame' },
+    { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: '--corner-badge-padding', element: 'frame' },
+    { label: 'padding-top', canBeLinked: true, groupKey: 'padding-top', variable: '--corner-badge-padding-top', hidden: true, element: 'frame' },
+    { label: 'padding-right', canBeLinked: true, groupKey: 'padding-right', variable: '--corner-badge-padding-right', hidden: true, element: 'frame' },
+    { label: 'padding-bottom', canBeLinked: true, groupKey: 'padding-bottom', variable: '--corner-badge-padding-bottom', hidden: true, element: 'frame' },
+    { label: 'padding-left', canBeLinked: true, groupKey: 'padding-left', variable: '--corner-badge-padding-left', hidden: true, element: 'frame' },
+    { label: 'outer corner radius', canBeLinked: true, groupKey: 'outer-radius', variable: '--corner-badge-outer-radius', element: 'frame' },
+    { label: 'inner corner radius', canBeLinked: true, groupKey: 'inner-radius', variable: '--corner-badge-inner-radius', element: 'frame' },
+    { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: '--corner-badge-h-axis-radius', element: 'frame' },
+    { label: 'vertical-axis radius', canBeLinked: true, groupKey: 'v-axis-radius', variable: '--corner-badge-v-axis-radius', element: 'frame' },
+    { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: '--corner-badge-text-font-family', element: 'text' },
+    { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: '--corner-badge-text-font-size', element: 'text' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: '--corner-badge-text-font-weight', element: 'text' },
+    { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: '--corner-badge-text-line-height', element: 'text' },
+  ];
+
+  // Per-variant color slots — surface, border, text — rebind the inner Badge's
+  // colors inside .corner-badge-{v} scope.
+  function variantColorTokens(v: Variant): 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` },
-      // Hidden per-side overrides for UIPaddingSelector split mode; declared so siblings link across variants.
-      { 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` },
+      { label: 'surface color', groupKey: 'surface', variable: `--corner-badge-${v}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--corner-badge-${v}-border` },
+      { label: 'text color', groupKey: 'text', variable: `--corner-badge-${v}-text` },
     ];
   }
-  export const allTokens: Token[] = badgeVariants.flatMap((v) => variantTokens(v));
 
-  // Linkable vars across variants; variant name as context label so chart rows mirror the 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]),
-    ),
-  );
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return { base: baseTokens, colors: variantColorTokens(v) };
+  }
+
+  export const allTokens: Token[] = [
+    ...baseTokens,
+    ...badgeVariants.flatMap((v) => variantColorTokens(v)),
+  ];
 
   const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 </script>
@@ -42,15 +50,11 @@
   import CornerBadge, { type CornerAnchor } from '../../system/components/CornerBadge.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';
   import { buildSiblings } from './scaffolding/siblings';
   import demoImageUrl from '../../system/assets/newspaper.webp';
 
-  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleVariantTokens = $derived((v: typeof badgeVariants[number]) => withLinkedDisabled(variantTokens(v), linked.varSet));
-
   let anchor: CornerAnchor = $state('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' },
@@ -59,14 +63,20 @@
   ];
 </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." tokens={allTokens} {linked} variants={variantOptions}>
+<ComponentEditorBase
+  {component}
+  title="Corner Badge"
+  description="Badge pinned flush to a corner of a positioned ancestor. Composes <code>Badge</code>; carries its own per-variant color tokens that override the inner Badge inside the corner scope."
+  tokens={allTokens}
+  variants={variantOptions}
+>
   {#each badgeVariants as v}
     <VariantGroup
       name={v}
       title={v.charAt(0).toUpperCase() + v.slice(1)}
-      states={{ [v]: visibleVariantTokens(v) }}
+      states={variantStates(v)}
       {component}
-      siblings={buildSiblings(badgeVariants, v, (sv) => ({ [sv]: variantTokens(sv) }))}
+      siblings={buildSiblings(badgeVariants, v, variantStates)}
     >
       {#snippet canvasToolbarExtras()}
         <span class="canvas-toolbar-eyebrow">Anchor</span>

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

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'imagelightbox';
+
+  // Three parts: tile (closed inline + animated modal surface), overlay (scrim),
+  // chrome (shared toolbar + close-button look). Chrome carries a hover state
+  // for the interactive controls. No second variant.
+  const states: Record<string, Token[]> = {
+    tile: [
+      { label: 'corner radius', groupKey: 'radius', variable: '--imagelightbox-tile-radius' },
+      { label: 'border color',  groupKey: 'border', variable: '--imagelightbox-tile-border' },
+      { label: 'border width',  groupKey: 'width',  variable: '--imagelightbox-tile-border-width' },
+      { label: 'tile shadow',                       variable: '--imagelightbox-tile-shadow' },
+    ],
+    overlay: [
+      { label: 'backdrop color', groupKey: 'surface', variable: '--imagelightbox-overlay-surface' },
+    ],
+    chrome: [
+      { label: 'surface color',       groupKey: 'surface', variable: '--imagelightbox-chrome-surface' },
+      { label: 'border color',        groupKey: 'border',  variable: '--imagelightbox-chrome-border' },
+      { label: 'border width',        groupKey: 'width',   variable: '--imagelightbox-chrome-border-width' },
+      { label: 'corner radius',       groupKey: 'radius',  variable: '--imagelightbox-chrome-radius' },
+      { label: 'icon color',          groupKey: 'icon',    variable: '--imagelightbox-chrome-icon' },
+      { label: 'hover surface color', groupKey: 'surface', variable: '--imagelightbox-chrome-hover-surface' },
+    ],
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import ImageLightbox from '../../system/components/ImageLightbox.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import demoImageUrl from '../../system/assets/offering.webp';
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Image Lightbox"
+  description="Click an inline image to expand it into a centered modal with a backdrop. Extended mode adds zoom controls and drag panning."
+  tokens={allTokens}
+>
+  <VariantGroup name="imagelightbox" title="Image Lightbox" {states} {component}>
+    <div class="preview-frame">
+      <ImageLightbox src={demoImageUrl} alt="Demo image" width={1024} height={640} extended />
+    </div>
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .preview-frame {
+    width: 100%;
+    max-width: 28rem;
+    margin: 0 auto;
+  }
+</style>