@motion-proto/live-tokens 0.6.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
@@ -19,24 +19,9 @@
   "homepage": "https://github.com/motionproto/live-tokens",
   "bugs": "https://github.com/motionproto/live-tokens/issues",
   "files": [
-    "src/lib",
-    "src/ui",
-    "src/component-editor",
-    "src/components",
-    "src/pages/Editor.svelte",
-    "src/pages/Editor.svelte.d.ts",
-    "src/pages/EditorShell.svelte",
-    "src/pages/ComponentEditorPage.svelte",
-    "src/pages/ComponentEditorPage.svelte.d.ts",
-    "src/styles/ui-editor.css",
-    "src/styles/ui-form-controls.css",
-    "src/styles/fonts.css",
-    "src/styles/fonts",
-    "src/styles/_padding.scss",
-    "src/styles/tokens.css",
-    "src/styles/site.css",
-    "src/data",
-    "src/assets",
+    "src/editor",
+    "src/system",
+    "src/app/site.css",
     "dist-plugin",
     "!**/*.test.ts",
     "!**/*.spec.ts",
@@ -44,43 +29,44 @@
   ],
   "exports": {
     ".": {
-      "svelte": "./src/lib/index.ts",
-      "types": "./src/lib/index.ts",
-      "default": "./src/lib/index.ts"
+      "svelte": "./src/editor/index.ts",
+      "types": "./src/editor/index.ts",
+      "default": "./src/editor/index.ts"
     },
     "./component-editor": {
-      "svelte": "./src/component-editor/index.ts",
-      "types": "./src/component-editor/index.ts",
-      "default": "./src/component-editor/index.ts"
+      "svelte": "./src/editor/component-editor/index.ts",
+      "types": "./src/editor/component-editor/index.ts",
+      "default": "./src/editor/component-editor/index.ts"
     },
     "./ui": {
-      "svelte": "./src/ui/index.ts",
-      "types": "./src/ui/index.ts",
-      "default": "./src/ui/index.ts"
+      "svelte": "./src/editor/ui/index.ts",
+      "types": "./src/editor/ui/index.ts",
+      "default": "./src/editor/ui/index.ts"
     },
     "./editor": {
-      "types": "./src/pages/Editor.svelte.d.ts",
-      "svelte": "./src/pages/Editor.svelte",
-      "default": "./src/pages/Editor.svelte"
+      "types": "./src/editor/pages/Editor.svelte.d.ts",
+      "svelte": "./src/editor/pages/Editor.svelte",
+      "default": "./src/editor/pages/Editor.svelte"
     },
     "./component-editor-page": {
-      "types": "./src/pages/ComponentEditorPage.svelte.d.ts",
-      "svelte": "./src/pages/ComponentEditorPage.svelte",
-      "default": "./src/pages/ComponentEditorPage.svelte"
+      "types": "./src/editor/pages/ComponentEditorPage.svelte.d.ts",
+      "svelte": "./src/editor/pages/ComponentEditorPage.svelte",
+      "default": "./src/editor/pages/ComponentEditorPage.svelte"
     },
     "./components/*": {
-      "svelte": "./src/components/*",
-      "default": "./src/components/*"
+      "svelte": "./src/system/components/*",
+      "default": "./src/system/components/*"
     },
     "./vite-plugin": {
       "types": "./dist-plugin/index.d.ts",
       "import": "./dist-plugin/index.js",
       "require": "./dist-plugin/index.cjs"
     },
-    "./styles/ui-editor.css": "./src/styles/ui-editor.css",
-    "./starter/tokens.css": "./src/styles/tokens.css",
-    "./starter/site.css": "./src/styles/site.css",
-    "./starter/fonts.css": "./src/styles/fonts.css"
+    "./styles/ui-editor.css": "./src/editor/styles/ui-editor.css",
+    "./app/tokens.css": "./src/system/styles/tokens.css",
+    "./app/tokens.generated.css": "./src/system/styles/tokens.generated.css",
+    "./app/site.css": "./src/app/site.css",
+    "./app/fonts.css": "./src/system/styles/fonts.css"
   },
   "scripts": {
     "dev": "vite",

package/src/{styles → app}/site.css

@@ -24,7 +24,7 @@ h2 {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
-  letter-spacing: 0.01em;
+  letter-spacing: var(--letter-spacing-normal);
   margin: var(--space-32) 0 var(--space-12);
   line-height: var(--line-height-sm);
   overflow-wrap: break-word;

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

@@ -6,12 +6,16 @@
 
   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;
   type HeaderState = typeof HEADER_STATES[number];
-
-  function capitalize(s: string): string {
-    return s.charAt(0).toUpperCase() + s.slice(1);
-  }
+  const HEADER_STATE_LABELS: Record<HeaderState, string> = {
+    default: 'Default',
+    hover: 'Hover',
+    active: 'Current',
+  };
 
   const VARIANT_LABELS: Record<Variant, string> = {
     chromeless: 'Chromeless',
@@ -21,7 +25,7 @@
 
   // 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.
+  // in the Container part so the header strip just owns surface + padding + text.
   function headerStateTokens(v: Variant, s: HeaderState): Token[] {
     const p = `--collapsiblesection-${v}-${s}`;
     const base: Token[] = [
@@ -39,17 +43,17 @@
     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' },
+  // Container part: the always-on outer chrome of the Container variant only.
+  const containerPartTokens: Token[] = [
     { 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[] {
+  // Body: revealed content area. Chromeless/divider only own padding; container
+  // also paints its own surface so the body can read distinct from the header.
+  // (CSS var name keeps the `expanded` slug for backward compatibility.)
+  function bodyTokens(v: Variant): Token[] {
     const p = `--collapsiblesection-${v}-expanded`;
     const tokens: Token[] = [];
     if (v === 'container') tokens.push({ label: 'surface color', groupKey: 'surface', variable: `${p}-surface` });
@@ -57,21 +61,24 @@
     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.
+  // Two-tier "Element / State" key convention. VariantGroup detects the " / "
+  // separator and renders a parts strip on top with a state sub-strip beneath
+  // when the active part has interaction states. Parts:
+  //   - Container: outer chrome (container variant only) — no sub-states
+  //   - Header: the always-visible bar — has Default/Hover/Current states
+  //   - Body: the revealed content panel — no sub-states
   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);
+    if (v === 'container') out['Container'] = containerPartTokens;
+    for (const s of HEADER_STATES) out[`Header / ${HEADER_STATE_LABELS[s]}`] = headerStateTokens(v, s);
+    out['Body'] = bodyTokens(v);
     return out;
   }
 
-  // Label typography only attaches to header states; frame and expanded don't
-  // own text. VariantGroup tolerates a partial map.
+  // Label typography only attaches to header states; Container and Body don't
+  // own text. Keys match the corresponding entries in `variantStates`.
   function variantTypeGroups(v: Variant): Record<string, TypeGroupConfig[]> {
-    return Object.fromEntries(HEADER_STATES.map((s) => [s, [{
+    return Object.fromEntries(HEADER_STATES.map((s) => [`Header / ${HEADER_STATE_LABELS[s]}`, [{
       legend: 'label',
       colorVariable: `--collapsiblesection-${v}-${s}-label`,
       familyVariable: `--collapsiblesection-${v}-${s}-label-font-family`,
@@ -118,11 +125,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 +139,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}
@@ -144,20 +151,20 @@
       
     >
       {#snippet children({ activeState })}
-            {@const isExpanded = activeState === 'expanded'}
-        {@const isFrame = activeState === 'frame'}
-        {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-        {@const forceActive = activeState === 'active'}
+        {@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={isExpanded}
+          expanded={isBody}
           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.
+            {#if isContainerPart}
+              (Container) — outer chrome only; switch to Body to see the content area.
             {:else}
               This content is revealed when the section is expanded. Any content can go here.
             {/if}