@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{component-editor → editor/component-editor}/BadgeEditor.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
-  import { badgeVariants } from '../components/Badge.svelte';
+  import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'badge';
   const variants = badgeVariants;
@@ -59,56 +59,18 @@
 </script>
 
 <script lang="ts">
-  import Badge from '../components/Badge.svelte';
+  import Badge from '../../system/components/Badge.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
-  import UIRadioGroup from '../ui/UIRadioGroup.svelte';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
   let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
-
-  let bgMode: 'image' | 'color' = $state('image');
-  const bgVar = '--backdrop-badge-surface';
-
-  // Preview-only props for Badge's floating/anchor/flush features (not persisted).
-  // For corner-anchored use, prefer the dedicated CornerBadge component; Badge.floating
-  // is the low-level escape hatch for off-corner floating placements.
-  let floating: boolean = $state(false);
-  let flush: boolean = $state(false);
-  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = $state('bottom-right');
-  const anchorOptions = [
-    { value: 'top-left' as const, label: 'TL' },
-    { value: 'top-right' as const, label: 'TR' },
-    { value: 'bottom-left' as const, label: 'BL' },
-    { value: 'bottom-right' as const, label: 'BR' },
-  ];
 </script>
 
-<ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants. Import from <code>components/Badge.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-      <label class="float-toggle">
-        <input type="checkbox" bind:checked={floating} />
-        <span>Floating preview</span>
-      </label>
-      {#if floating}
-        <label class="float-toggle">
-          <input type="checkbox" bind:checked={flush} />
-          <span>Flush corner</span>
-        </label>
-        <div class="anchor-control">
-          <span>Anchor</span>
-          <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
-        </div>
-      {/if}
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -118,18 +80,10 @@
       {component}
       siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
     >
-      <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
-        {#if floating}
-          <div class="floating-stage">
-            <Badge variant={v} {floating} {anchor} {flush}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>
-          </div>
-        {:else}
-          <div class="badge-showcase-grid">
-            <Badge variant={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>
-            <Badge variant={v} icon="fa-solid fa-dice-d20">With Icon</Badge>
-          </div>
-        {/if}
-      </ShadowBackdrop>
+      <div class="badge-showcase-grid">
+        <Badge variant={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</Badge>
+        <Badge variant={v} icon="fa-solid fa-dice-d20">With Icon</Badge>
+      </div>
     </VariantGroup>
   {/each}
 </ComponentEditorBase>
@@ -141,32 +95,4 @@
     gap: var(--space-8);
     align-items: center;
   }
-
-  /* Anchor parent for floating-preview mode — gives the badge a positioned ancestor
-     and a visible surface so blur/offset/flush are observable. */
-  .floating-stage {
-    position: relative;
-    width: 100%;
-    min-height: 160px;
-    border-radius: var(--ui-radius-md);
-    background: rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-  }
-
-  .float-toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-  }
-
-  .anchor-control {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-  }
 </style>

package/src/{component-editor → editor/component-editor}/CalloutEditor.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
-  import { calloutVariants } from '../components/Callout.svelte';
+  import { calloutVariants } from '../../system/components/Callout.svelte';
 
   export const component = 'callout';
   const variants = calloutVariants;
@@ -69,10 +69,10 @@
 </script>
 
 <script lang="ts">
-  import Callout from '../components/Callout.svelte';
+  import Callout from '../../system/components/Callout.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
@@ -87,7 +87,7 @@
   };
 </script>
 
-<ComponentEditorBase {component} title="Callout" description="Bordered callout box with semantic info / success / warning / danger variants, label + message text. Import from <code>components/Callout.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+<ComponentEditorBase {component} title="Callout" description="Bordered callout box with semantic info / success / warning / danger variants, label + message text." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}

package/src/{component-editor → editor/component-editor}/CardEditor.svelte

@@ -4,41 +4,32 @@
 
   export const component = 'card';
 
-  // The card is a single object across two states (default, hover).
-  // Within each state we keep object shape props (surface/border/border-width/radius/padding/shadow) together.
-  // Title and body are nested elements with their own typography.
+  // Hover overrides only border + shadow; rest inherits default. `element` groups tokens by frame/header/body.
   const states: Record<string, Token[]> = {
     default: [
-      { label: 'surface color', groupKey: 'surface', variable: '--card-default-surface' },
-      { label: 'header color', groupKey: 'surface', variable: '--card-default-header-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--card-default-border' },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--card-default-border-width' },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--card-default-radius' },
-      { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-default-header-padding' },
-      { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-default-body-padding' },
-      { label: 'card shadow', canBeLinked: true, groupKey: 'shadow', variable: '--card-default-shadow' },
-      { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-default-blur' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-default-icon-size' },
+      { label: 'surface color', groupKey: 'surface', variable: '--card-default-surface', element: 'frame' },
+      { label: 'border color', groupKey: 'border', variable: '--card-default-border', element: 'frame' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--card-default-border-width', element: 'frame' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--card-default-radius', element: 'frame' },
+      { label: 'card shadow', canBeLinked: true, groupKey: 'shadow', variable: '--card-default-shadow', element: 'frame' },
+      { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-default-blur', element: 'frame' },
+      { label: 'header color', groupKey: 'surface', variable: '--card-default-header-surface', element: 'header' },
+      { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-default-header-padding', element: 'header' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-default-icon-size', element: 'header' },
+      { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-default-body-padding', element: 'body' },
     ],
     hover: [
-      { label: 'surface color', groupKey: 'surface', variable: '--card-hover-surface' },
-      { label: 'header color', groupKey: 'surface', variable: '--card-hover-header-surface' },
       { label: 'border color', groupKey: 'border', variable: '--card-hover-border' },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--card-hover-border-width' },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--card-hover-radius' },
-      { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-hover-header-padding' },
-      { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-hover-body-padding' },
       { label: 'card shadow', canBeLinked: true, groupKey: 'shadow', variable: '--card-hover-shadow' },
-      { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-hover-blur' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-hover-icon-size' },
     ],
   };
 
-  // Two type groups per state: title and body. Linked across states (same nested object).
+  // Typography shared across states (no hover overrides).
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     default: [
       {
-        legend: 'card title',
+        legend: 'title',
+        element: 'header',
         colorVariable: '--card-default-title',
         familyVariable: '--card-default-title-font-family',
         sizeVariable: '--card-default-title-font-size',
@@ -46,7 +37,8 @@
         lineHeightVariable: '--card-default-title-line-height',
       },
       {
-        legend: 'card body',
+        legend: 'body',
+        element: 'body',
         colorVariable: '--card-default-body',
         familyVariable: '--card-default-body-font-family',
         sizeVariable: '--card-default-body-font-size',
@@ -54,46 +46,19 @@
         lineHeightVariable: '--card-default-body-line-height',
       },
     ],
-    hover: [
-      {
-        legend: 'card title',
-        colorVariable: '--card-hover-title',
-        familyVariable: '--card-hover-title-font-family',
-        sizeVariable: '--card-hover-title-font-size',
-        weightVariable: '--card-hover-title-font-weight',
-        lineHeightVariable: '--card-hover-title-line-height',
-      },
-      {
-        legend: 'card body',
-        colorVariable: '--card-hover-body',
-        familyVariable: '--card-hover-body-font-family',
-        sizeVariable: '--card-hover-body-font-size',
-        weightVariable: '--card-hover-body-font-weight',
-        lineHeightVariable: '--card-hover-body-line-height',
-      },
-    ],
   };
 
-  // Title type tokens (linked across states, but title and body are different objects so they don't link to each other).
   const typeGroupTokens: Token[] = [
     { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: '--card-default-title-font-family' },
-    { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: '--card-hover-title-font-family' },
     { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: '--card-default-title-font-size' },
-    { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: '--card-hover-title-font-size' },
     { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: '--card-default-title-font-weight' },
-    { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: '--card-hover-title-font-weight' },
     { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: '--card-default-title-line-height' },
-    { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: '--card-hover-title-line-height' },
     { label: 'font family', canBeLinked: true, groupKey: 'body-font-family', variable: '--card-default-body-font-family' },
-    { label: 'font family', canBeLinked: true, groupKey: 'body-font-family', variable: '--card-hover-body-font-family' },
     { label: 'font size', canBeLinked: true, groupKey: 'body-font-size', variable: '--card-default-body-font-size' },
-    { label: 'font size', canBeLinked: true, groupKey: 'body-font-size', variable: '--card-hover-body-font-size' },
     { label: 'font weight', canBeLinked: true, groupKey: 'body-font-weight', variable: '--card-default-body-font-weight' },
-    { label: 'font weight', canBeLinked: true, groupKey: 'body-font-weight', variable: '--card-hover-body-font-weight' },
     { label: 'line height', canBeLinked: true, groupKey: 'body-line-height', variable: '--card-default-body-line-height' },
-    { label: 'line height', canBeLinked: true, groupKey: 'body-line-height', variable: '--card-hover-body-line-height' },
   ];
-  // Cross-state linked block — present each linkable property from the default state.
+  // Cross-state linked block; linkable props sourced from default state.
   const linkableContexts = new Map<string, string>([
     ['--card-default-border-width', 'card'],
     ['--card-default-radius', 'card'],
@@ -119,14 +84,11 @@
 </script>
 
 <script lang="ts">
-  import Card from '../components/Card.svelte';
+  import Card from '../../system/components/Card.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
-
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleStates = $derived(Object.fromEntries(
@@ -134,23 +96,15 @@
   ) as Record<string, Token[]>);
 
   let hoverEnabled = $state(true);
-  let bgMode: 'image' | 'color' = $state('image');
-  const bgVar = '--backdrop-card-surface';
 </script>
 
-<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>" tokens={allTokens} {linked}>
-  {#snippet config()}
-  
-      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body." tokens={allTokens} {linked}>
   <VariantGroup
     name="card"
     title="Card"
     states={visibleStates}
     {typeGroups}
     {component}
-    
   >
     {#snippet stateActions(stateName)}
       {#if stateName === 'hover'}
@@ -161,16 +115,14 @@
       {/if}
     {/snippet}
     {#snippet children({ activeState })}
-        {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
-      <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
-        <div class="card-demo">
-          <Card title="Card title" class={previewClass}>
-            <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
-          </Card>
-        </div>
-      </ShadowBackdrop>
-          {/snippet}
-    </VariantGroup>
+      {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
+      <div class="card-demo">
+        <Card title="Card title" class={previewClass}>
+          <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
+        </Card>
+      </div>
+    {/snippet}
+  </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/{component-editor → editor/component-editor}/CollapsibleSectionEditor.svelte

@@ -118,11 +118,11 @@
 </script>
 
 <script lang="ts">
-  import CollapsibleSection from '../components/CollapsibleSection.svelte';
+  import CollapsibleSection from '../../system/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 { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
@@ -132,7 +132,7 @@
   ) 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}>
+<ComponentEditorBase {component} title="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, divider, container." tokens={allTokens} {linked} variants={variantOptions}>
   {#each VARIANTS as v}
     <VariantGroup
       name={v}

package/src/{component-editor → editor/component-editor}/CornerBadgeEditor.svelte

@@ -1,14 +1,10 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
-  import { badgeVariants } from '../components/Badge.svelte';
+  import { badgeVariants } from '../../system/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.
+  // 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[] {
     return [
       { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: `--corner-badge-${v}-margin` },
@@ -17,12 +13,7 @@
       { 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).
+      // 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 },
@@ -33,15 +24,9 @@
       { 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();
+  export const allTokens: Token[] = badgeVariants.flatMap((v) => variantTokens(v));
 
-  // 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.
+  // 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)
@@ -49,34 +34,21 @@
         .map((t) => [t.variable, v] as [string, string]),
     ),
   );
+
+  const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import CornerBadge, { type CornerAnchor } from '../components/CornerBadge.svelte';
-  import type { BadgeVariant } from '../components/Badge.svelte';
+  import CornerBadge, { type CornerAnchor } from '../../system/components/CornerBadge.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 { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
-  import demoImageUrl from '../assets/newspaper.webp';
+  import { buildSiblings } from './scaffolding/siblings';
+  import demoImageUrl from '../../system/assets/newspaper.webp';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleStates = $derived(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 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 }> = [
@@ -85,22 +57,19 @@
     { 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 = $state('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}>
-  {#snippet 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>
+<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}>
+  {#each badgeVariants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      {component}
+      siblings={buildSiblings(badgeVariants, v, (sv) => ({ [sv]: variantTokens(sv) }))}
+    >
+      {#snippet canvasToolbarExtras()}
+        <span class="canvas-toolbar-eyebrow">Anchor</span>
         <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
           {#each anchorGrid as opt (opt.value)}
             <button
@@ -117,36 +86,25 @@
             </button>
           {/each}
         </div>
-      </div>
-      <div class="control-row">
-        <span>Variant</span>
-        <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
-      </div>
-    
-  {/snippet}
-  <VariantGroup name="cornerbadge" title="Corner Badge" states={visibleStates} {component}>
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
+      {/snippet}
       <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>
+          <CornerBadge variant={v} {anchor}>{v.charAt(0).toUpperCase() + v.slice(1)}</CornerBadge>
         </div>
       </div>
-    </ShadowBackdrop>
-  </VariantGroup>
+    </VariantGroup>
+  {/each}
 </ComponentEditorBase>
 
 <style>
-  /* Center the stage in the backdrop so the smaller surface doesn't stretch full-width. */
+  /* Center stage so it 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. */
+  /* Positioned ancestor for CornerBadge; no overflow:hidden so badge can extend past edges. */
   .corner-stage {
     position: relative;
     width: 380px;
@@ -159,26 +117,6 @@
     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);
@@ -189,7 +127,7 @@
     display: grid;
     place-items: center;
     padding: 0;
-    border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--ui-border-low, rgba(255, 255, 255, 0.1));
     border-radius: var(--ui-radius-sm);
     background: transparent;
     color: var(--ui-text-tertiary);
@@ -204,6 +142,6 @@
   .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));
+    border-color: var(--ui-border-higher, rgba(255, 255, 255, 0.25));
   }
 </style>