@motion-proto/live-tokens 0.6.2 → 0.7.1

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

@@ -20,7 +20,10 @@
    *  per-state token grid. */
   function frameTokens(v: Variant): Token[] {
     return [
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--sectiondivider-${v}-padding` },
+      // Padding is routed through an internal `--_divider-padding` aggregator
+      // per variant — split mode would require per-side forwarding in every
+      // variant rule. Until that lands, present single-value only.
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--sectiondivider-${v}-padding`, splittable: false },
       { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--sectiondivider-${v}-radius` },
       { label: 'border color', canBeLinked: true, groupKey: 'border', variable: `--sectiondivider-${v}-border` },
       { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--sectiondivider-${v}-border-width` },
@@ -50,6 +53,20 @@
     return [...frameTokens(v), ...titleOutlineTokens(v), ...gradientTokens(v)];
   }
 
+  /** Token list passed to VariantGroup.states + sibling builder so Copy-from
+   *  iterates ALL tokens (frame + outline + gradient), not just the visible
+   *  frame. Outline + gradient are flagged `hidden` so the property grid still
+   *  shows only frame tokens — outline renders inside the title TypeEditor,
+   *  gradient renders in GradientCard. Mismatch between this list and the
+   *  sibling list would mis-align positional copy. */
+  function stateTokens(v: Variant): Token[] {
+    return [
+      ...frameTokens(v),
+      ...titleOutlineTokens(v).map((t) => ({ ...t, hidden: true })),
+      ...gradientTokens(v).map((t) => ({ ...t, hidden: true })),
+    ];
+  }
+
   /** Two type groups per variant: title and description. The TypeEditor
    *  fieldset visually groups each color with its font-shape props. The
    *  title fieldset also nests the SVG-text outline width + color so those
@@ -122,59 +139,25 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import SectionDivider from '../components/SectionDivider.svelte';
+  import SectionDivider from '../../system/components/SectionDivider.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import GradientCard from './scaffolding/GradientCard.svelte';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { editorState } from '../lib/editorStore';
-  import { setCssVar } from '../lib/cssVarSync';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let testTitle = $state('Section Title');
   let showDescription = $state(true);
   let descriptionText = $state('This text is meant to provide additional context or meaning.');
 
-  const bgVar = '--backdrop-sectiondivider-surface';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
-
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  // The gradient tokens are owned by GradientCard, so the property grid only
-  // shows the frame tokens (padding/radius/outline). Gradient tokens still
-  // live in `allTokens` so they participate in reset and the registry.
-  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(frameTokens(v), linked.varSet));
+  // Pass the full stateTokens list (with outline/gradient hidden) so positional
+  // Copy-from covers every variable. TokenLayout filters hidden tokens from the
+  // grid render path, so the user still sees only frame tokens.
+  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(stateTokens(v), linked.varSet));
 </script>
 
-<ComponentEditorBase {component} title="Section Divider" description="Full-width section banner with display font and palette variants. Import from <code>components/SectionDivider.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <label class="text-field">
-        <span>Test title</span>
-        <input type="text" bind:value={testTitle} placeholder="Section Title" />
-      </label>
-      <label class="checkbox-field">
-        <input type="checkbox" bind:checked={showDescription} />
-        <span>Show description</span>
-      </label>
-      <label class="text-field text-field-wide">
-        <span>Description text</span>
-        <input type="text" bind:value={descriptionText} placeholder="Description text" />
-      </label>
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Section Divider" description="Full-width section banner with display font and palette variants." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v.key}
@@ -185,17 +168,33 @@
       siblings={buildSiblings(
         variants.map((x) => x.key),
         v.key,
-        (sv) => ({ [sv]: variantTokens(sv) }),
+        (sv) => ({ [sv]: stateTokens(sv) }),
         (sv) => ({ [sv]: variantTypeGroups(sv) }),
       )}
+      backdropPadding="32px"
     >
-      <ShadowBackdrop mode="color" colorVariable={bgVar} padding="32px">
+      {#snippet canvasToolbarExtras()}
+        <hr class="canvas-toolbar-divider" />
+        <label class="toolbar-field">
+          <span>Test title</span>
+          <input type="text" class="canvas-toolbar-input" bind:value={testTitle} placeholder="Section Title" />
+        </label>
+        <label class="toolbar-check">
+          <input type="checkbox" bind:checked={showDescription} />
+          <span>Show description</span>
+        </label>
+        <label class="toolbar-field">
+          <span>Description text</span>
+          <input type="text" class="canvas-toolbar-input" bind:value={descriptionText} placeholder="Description text" />
+        </label>
+      {/snippet}
+      <div class="section-divider-stage">
         <SectionDivider
           title={testTitle || v.title}
           variant={v.key}
           description={showDescription ? descriptionText : undefined}
         />
-      </ShadowBackdrop>
+      </div>
       {#snippet compositeControls(_stateName)}
         <span class="gradient-section-label">Gradient</span>
         <GradientCard {component} prefix={`--sectiondivider-${v.key}`} />
@@ -205,54 +204,28 @@
 </ComponentEditorBase>
 
 <style>
-  .text-field,
-  .checkbox-field {
+  .toolbar-check {
     display: inline-flex;
     align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .checkbox-field {
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: rgba(255, 255, 255, 0.78);
     cursor: pointer;
-    user-select: none;
   }
 
-  .checkbox-field input {
-    margin: 0;
-    cursor: pointer;
-  }
-
-  .text-field input {
-    padding: var(--ui-space-4) var(--ui-space-8);
-    background: var(--ui-surface-input);
-    color: var(--ui-text-primary);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--ui-radius-sm);
-    font-family: var(--ui-font-mono);
+  .toolbar-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
     font-size: var(--ui-font-size-xs);
-    min-width: 16rem;
-  }
-
-  .text-field-wide input {
-    min-width: 28rem;
-  }
-
-  .backdrop-config {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .picker-slot {
-    min-width: 8rem;
+    color: rgba(255, 255, 255, 0.6);
   }
 
-  .picker-slot :global(.ui-token-selector) {
+  /* Floor the preview width so the divider always reads as a banner, even
+     when the canvas gets cramped (e.g. on narrower editor viewports). */
+  .section-divider-stage {
     width: 100%;
+    min-width: 32rem;
   }
 
   .gradient-section-label {

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

@@ -101,10 +101,10 @@
 </script>
 
 <script lang="ts">
-  import SegmentedControl from '../components/SegmentedControl.svelte';
+  import SegmentedControl from '../../system/components/SegmentedControl.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';
 
   type Segment = { value: string; label: string; icon?: string; disabled?: boolean };

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

@@ -11,10 +11,8 @@
   function statePrefix(v: Variant, s: StateName): string {
     return s === 'default' ? `--button-${v}` : `--button-${v}-${s}`;
   }
-  /** Buttons have a single text slot, so its typography props live as peer
-   *  rows in the unified token grid (no TypeEditor fieldset). Default state
-   *  carries the full font shape (family/weight/size/line-height); hover and
-   *  disabled only override text color, so they keep just the color row. */
+  // Single text slot: typography props are peer rows, not a TypeEditor fieldset.
+  // Default carries the full font shape; hover/disabled only override text color.
   function variantStateTokens(v: Variant, s: StateName): Token[] {
     const p = statePrefix(v, s);
     const tokens: Token[] = [
@@ -46,9 +44,8 @@
     Object.values(variantStates(v)).flat(),
   );
 
-  // Linked block:
-  //   - shape props (border-width, radius, padding) link across every variant × state — buttons share one geometry.
-  //   - typography props link across all six variants.
+  // Shape props link across every variant × state (buttons share one geometry).
+  // Typography props link across all variants.
   const linkableContexts = new Map<string, string>([
     ...variants.flatMap((v) => stateNames.flatMap((s) => [
       [`${statePrefix(v, s)}-border-width`, `${v} ${s}`] as const,
@@ -68,11 +65,11 @@
 </script>
 
 <script lang="ts">
-  import Button from '../components/Button.svelte';
+  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 '../lib/editorStore';
+  import { editorState, setComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let shimmerRef = $derived($editorState.components.button?.aliases['--button-shimmer']);
@@ -89,15 +86,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes. Import from <code>components/Button.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <label>
-        <span>Hover shimmer</span>
-        <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -106,8 +95,15 @@
       {component}
       columns={2}
       siblings={buildSiblings(variants, v, variantStates)}
-      
     >
+      {#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'}
@@ -150,7 +146,7 @@
 
   .size-divider {
     width: 1px;
-    background: var(--ui-border-faint);
+    background: var(--ui-border-low);
     align-self: stretch;
   }
 

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

@@ -37,7 +37,10 @@
       { label: 'divider thickness', groupKey: 'bar-divider-thickness', variable: '--tabbar-bar-divider-thickness' },
       { label: 'indicator thickness', groupKey: 'bar-indicator-thickness', variable: '--tabbar-bar-indicator-thickness' },
       { label: 'space above', groupKey: 'bar-top-margin', variable: '--tabbar-bar-top-margin' },
-      { label: 'space below tabs', groupKey: 'bar-bottom-padding', variable: '--tabbar-bar-bottom-padding' },
+      // Consumed via `padding-bottom: var(--tabbar-bar-bottom-padding)` — a
+      // one-axis read. Splitting would produce top/left/right values that have
+      // nowhere to render.
+      { label: 'space below tabs', groupKey: 'bar-bottom-padding', variable: '--tabbar-bar-bottom-padding', splittable: false },
       { label: 'space under divider', groupKey: 'bar-bottom-margin', variable: '--tabbar-bar-bottom-margin' },
       { label: 'tab gap', groupKey: 'tab-gap', variable: '--tabbar-tab-gap' },
     ],
@@ -81,10 +84,10 @@
 </script>
 
 <script lang="ts">
-  import TabBar from '../components/TabBar.svelte';
+  import TabBar from '../../system/components/TabBar.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';
 
   let selectedDemoTab = $state('overview');
@@ -102,7 +105,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Tab Bar" description="Tab navigation with icon support and disabled state. Import from <code>components/TabBar.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Tab Bar" description="Tab navigation with icon support and disabled state." tokens={allTokens} {linked}>
   <VariantGroup
     name="tabbar"
     title="Tab Bar"
@@ -115,13 +118,7 @@
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} selectedTab={selectedDemoTab} class={forceClass} on:tabChange={(e) => (selectedDemoTab = e.detail)} />
       <div class="tab-content-demo">
-        {#if selectedDemoTab === 'overview'}
-          <p style="margin: 0;">Overview tab content</p>
-        {:else if selectedDemoTab === 'details'}
-          <p style="margin: 0;">Details tab content</p>
-        {:else if selectedDemoTab === 'settings'}
-          <p style="margin: 0;">Settings tab content</p>
-        {/if}
+        <p style="margin: 0;">placeholder tab content</p>
       </div>
           {/snippet}
     </VariantGroup>
@@ -129,11 +126,9 @@
 
 <style>
   .tab-content-demo {
+    width: 100%;
     padding: var(--space-16);
     color: var(--ui-text-secondary);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-top: none;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
   }
 </style>

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

@@ -3,15 +3,10 @@
 
   export const component = 'table';
 
-  // Border colors and widths are linkable across wrapper/header/row/column so
-  // a user can lock "all lines on the table" to the same swatch + weight with
-  // one move, then break out individual surfaces when needed. Every other
-  // groupKey is slot-unique so header/cell/stripe stay independent — header bg
-  // vs zebra stripe, header pad vs cell pad, header text vs cell text all
-  // serve different visual roles. (Sharing a groupKey would silently declare
-  // them as siblings without surfacing the link in the LinkedBlock.)
+  // Shared border/width groupKeys link all table lines; other groupKeys are slot-unique to keep surfaces independent.
   const states: Record<string, Token[]> = {
     wrapper: [
+      { label: 'surface color', groupKey: 'wrapper-surface', variable: '--table-default-surface' },
       { label: 'border color', canBeLinked: true, groupKey: 'border', variable: '--table-default-border' },
       { label: 'border width', canBeLinked: true, groupKey: 'width', variable: '--table-default-border-width' },
       { label: 'corner radius', groupKey: 'radius', variable: '--table-default-radius' },
@@ -27,9 +22,10 @@
       { label: 'padding', groupKey: 'cell-padding', variable: '--table-default-cell-padding' },
     ],
     row: [
+      { label: 'surface color', groupKey: 'row-surface', variable: '--table-default-row-surface' },
+      { label: 'stripe surface', groupKey: 'row-stripe-surface', variable: '--table-default-row-stripe-surface' },
       { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-row-divider' },
       { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-row-divider-width' },
-      { label: 'stripe surface', groupKey: 'row-stripe-surface', variable: '--table-default-row-stripe-surface' },
     ],
     column: [
       { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-column-divider' },
@@ -37,8 +33,7 @@
     ],
   };
 
-  // State name is the context label so the LinkageChart rows read as
-  // wrapper/header/row/column for each shared groupKey.
+  // State name as context label so LinkageChart rows read wrapper/header/row/column.
   const linkableContexts = new Map<string, string>(
     Object.entries(states).flatMap(([state, tokens]) =>
       tokens
@@ -65,11 +60,7 @@
       lineHeightVariable: '--table-default-cell-line-height',
     }],
   };
-  // Slot-unique groupKeys keep header text and cell text independent. The
-  // generic `buildTypeGroupColorTokens` helper isn't used here because it
-  // derives groupKey from the variable's last-dash suffix, which collapses
-  // both `--table-...-header-text` and `--table-...-cell-text` onto a shared
-  // `text` groupKey — phantom-linking the two slots.
+  // Hand-rolled (not buildTypeGroupColorTokens) because its suffix-derived groupKey would phantom-link header-text and cell-text.
   const typeGroupColorTokens: Token[] = [
     { label: 'color', groupKey: 'header-text', variable: '--table-default-header-text' },
     { label: 'color', groupKey: 'cell-text', variable: '--table-default-cell-text' },
@@ -93,10 +84,10 @@
 </script>
 
 <script lang="ts">
-  import Table from '../components/Table.svelte';
+  import Table from '../../system/components/Table.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';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
@@ -105,7 +96,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Table" description="Styled wrapper around <code>&lt;table&gt;</code> with horizontal scroll on narrow viewports. Import from <code>components/Table.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Table" description="Styled wrapper around <code>&lt;table&gt;</code> with horizontal scroll on narrow viewports." tokens={allTokens} {linked}>
   <VariantGroup name="table" title="Table" states={visibleStates} {typeGroups} {component}>
     <Table>
       <table>

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

@@ -40,35 +40,14 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import Tooltip from '../components/Tooltip.svelte';
+  import Tooltip from '../../system/components/Tooltip.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../lib/cssVarSync';
 
-  const bgVar = '--backdrop-tooltip-surface';
   const hintText = 'Helpful Hint';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
 </script>
 
-<ComponentEditorBase {component} title="Tooltip" description="Hover tooltip with configurable position. Import from <code>components/Tooltip.svelte</code>" tokens={allTokens}>
-  {#snippet config()}
-  
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Tooltip" description="Hover tooltip with configurable position." tokens={allTokens}>
   <VariantGroup
     name="tooltip"
     title="Tooltip"
@@ -76,16 +55,14 @@
     {typeGroups}
     {component}
   >
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
-      <div class="tooltip-demo-row">
-        <Tooltip text={hintText} open>
-          <span class="tooltip-demo-target">Helpful Hint</span>
-        </Tooltip>
-        <Tooltip text={hintText} position="bottom">
-          <span class="tooltip-demo-target">Hover me</span>
-        </Tooltip>
-      </div>
-    </ShadowBackdrop>
+    <div class="tooltip-demo-row">
+      <Tooltip text={hintText} open>
+        <span class="tooltip-demo-target">Helpful Hint</span>
+      </Tooltip>
+      <Tooltip text={hintText} position="bottom">
+        <span class="tooltip-demo-target">Hover me</span>
+      </Tooltip>
+    </div>
   </VariantGroup>
 </ComponentEditorBase>
 
@@ -103,22 +80,9 @@
     padding: var(--space-8) var(--space-16);
     color: var(--ui-text-secondary);
     font-size: var(--font-size-sm);
-    border: 1px dashed var(--ui-border-subtle);
+    border: 1px dashed var(--ui-border-low);
     border-radius: var(--radius-sm);
     background: transparent;
   }
 
-  .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>