@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/component-editor/scaffolding/StateBlock.svelte

@@ -8,6 +8,7 @@
    * tab strip). This component owns the duplicated inner block so a per-state
    * control change happens in exactly one place.
    */
+  import type { Snippet } from 'svelte';
   import TokenLayout from './TokenLayout.svelte';
   import TypeEditor from './TypeEditor.svelte';
   import type { Token, TypeGroupConfig } from './types';
@@ -17,6 +18,12 @@
   
   
   
+  interface ElementToggle {
+    checked: boolean;
+    label?: string;
+    onchange: (checked: boolean) => void;
+  }
+
   interface Props {
     /** Tokens for this state, fed to `<TokenLayout>`. */
     tokens: Token[];
@@ -31,6 +38,21 @@
       (the two-col flex layout already partitions screen real estate when
       typeGroups are present). */
     columns?: number;
+    /** Per-element Show toggle. When provided for an element in element-grouped
+        mode, renders a checkbox next to that section's heading. The token rows
+        below stay visible regardless — the toggle drives preview visibility,
+        not editor visibility. */
+    elementToggles?: Record<string, ElementToggle>;
+    /** Explicit element ordering. Defaults to first-encounter across tokens
+        then typeGroups, which works when structural elements (frame, container)
+        come before named typography elements. Pass an explicit order when the
+        natural first-encounter wouldn't produce the right reading order. */
+    elementOrder?: string[];
+    /** Element-keyed snippet rendered between the section heading and the
+        section's typography/tokens. Lets callers inject per-element controls
+        (e.g. a hairline position dropdown that conceptually belongs in the
+        hairline section but isn't a CSS token). */
+    elementExtras?: Snippet<[string]>;
     onchange?: () => void;
   }
 
@@ -40,6 +62,9 @@
     component = undefined,
     linkedOrder = undefined,
     columns = 1,
+    elementToggles = {},
+    elementOrder,
+    elementExtras,
     onchange,
   }: Props = $props();
 
@@ -50,8 +75,13 @@
       "Frame", "Header", "Body"). Element order = first-encounter across the
       combined tokens + type-groups list. */
   let elementSections = $derived.by(() => {
-    const order: string[] = [];
     const seen = new Set<string>();
+    const order: string[] = [];
+    if (elementOrder) {
+      for (const el of elementOrder) {
+        if (!seen.has(el)) { seen.add(el); order.push(el); }
+      }
+    }
     for (const t of tokens) {
       if (t.element && !seen.has(t.element)) {
         seen.add(t.element);
@@ -76,13 +106,27 @@
 {#if elementSections}
   <div class="state-controls element-grouped">
     {#each elementSections as section}
+      {@const toggle = elementToggles[section.element]}
       <section class="element-section">
-        <h4 class="element-heading">{section.element}</h4>
+        <div class="element-heading-row">
+          <h4 class="element-heading">{section.element}</h4>
+          {#if toggle}
+            <label class="element-show-toggle">
+              <input
+                type="checkbox"
+                checked={toggle.checked}
+                onchange={(e) => toggle.onchange((e.currentTarget as HTMLInputElement).checked)}
+              />
+              <span>{toggle.label ?? `Show ${section.element}`}</span>
+            </label>
+          {/if}
+        </div>
+        {@render elementExtras?.(section.element)}
         {#if section.typeGroups.length > 0}
           <div class="state-type-groups">
             {#each section.typeGroups as tg}
               <TypeEditor
-                legend={tg.legend ?? 'type'}
+                legend={tg.legend ?? ''}
                 colorVariable={tg.colorVariable}
                 colorLabel={tg.colorLabel ?? 'text color'}
                 familyVariable={tg.familyVariable}
@@ -93,6 +137,8 @@
                 weightLabel={tg.weightLabel ?? 'font weight'}
                 lineHeightVariable={tg.lineHeightVariable}
                 lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+                letterSpacingVariable={tg.letterSpacingVariable}
+                letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
                 outlineWidthVariable={tg.outlineWidthVariable}
                 outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
                 outlineColorVariable={tg.outlineColorVariable}
@@ -133,6 +179,8 @@
           weightLabel={tg.weightLabel ?? 'font weight'}
           lineHeightVariable={tg.lineHeightVariable}
           lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+          letterSpacingVariable={tg.letterSpacingVariable}
+          letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
           outlineWidthVariable={tg.outlineWidthVariable}
           outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
           outlineColorVariable={tg.outlineColorVariable}
@@ -202,14 +250,19 @@
     padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
   }
 
-  /* Element-grouped mode: vertical stack of subsections, each labeled by the
-     element it targets (e.g. Frame / Header / Body). Within a section the
-     two-col split (typography fieldsets + property grid) still applies when
-     the section has both. */
+  /* Element-grouped mode: subsections fan out across available width, each
+     labeled by the element it targets (e.g. Frame / Header / Body). Three
+     columns at typical editor widths, dropping to two then one as the panel
+     narrows — the auto-fit + minmax does the responsive work without media
+     queries. `align-items: start` keeps columns of different heights aligned
+     to their top edge instead of stretching the shorter ones.
+     Within a section the two-col split (typography fieldsets + property grid)
+     still applies when the section has both. */
   .state-controls.element-grouped {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-16);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    gap: var(--ui-space-20) var(--ui-space-32);
+    align-items: start;
   }
 
   /* Each element section stacks typography fieldset(s) above the property
@@ -244,14 +297,49 @@
     padding: 0 var(--ui-space-4) var(--ui-space-4);
   }
 
+  /* TypeEditor's `.type-grid` and TokenLayout's `.token-grid` are independent
+     grids stacked inside the same element-section. Each sizes its label
+     column from its own `max-content`, so when one grid has long labels
+     ("letter spacing") and the other has short ones ("padding") their
+     dropdowns land at different x positions. Both grids honour
+     `--editor-label-col` for their first column track; setting it here pins
+     the label column to a shared minimum so short labels pad out and the
+     dropdowns line up across the section. The `max-content` upper bound
+     still lets exceptionally long labels grow.
+     Cascades into the inner grids; @container narrow-width overrides in
+     TokenLayout (which redefine `grid-template-columns` wholesale) still
+     win when the panel is too tight to honour the wider track. */
+  .element-section {
+    --editor-label-col: minmax(7.5rem, max-content);
+  }
+
+  .element-heading-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-12);
+    padding-bottom: var(--ui-space-4);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
   .element-heading {
     margin: 0;
     font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-semibold);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    font-weight: var(--ui-font-weight-medium);
     color: var(--ui-text-tertiary);
-    padding-bottom: var(--ui-space-4);
-    border-bottom: 1px solid var(--ui-border-low);
   }
+
+  /* Show toggle next to the section heading — drives preview visibility for
+     the element. Property rows below stay visible so users can still tune the
+     hidden element's tokens. */
+  .element-show-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+  .element-show-toggle:hover { color: var(--ui-text-primary); }
+  .element-show-toggle input { margin: 0; cursor: pointer; }
 </style>

package/src/editor/component-editor/scaffolding/TokenLayout.svelte

@@ -92,7 +92,7 @@
     { kind: 'shadow', matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
     { kind: 'padding', matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
     { kind: 'gap', matches: (v) => v.endsWith('-gap') },
-    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.startsWith('--border-width-') },
+    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
     { kind: 'border', matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
     { kind: 'surface', matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
   ];
@@ -387,7 +387,10 @@
     --token-selector-w: 8rem;
     --columns: 1;
     display: grid;
-    grid-template-columns: repeat(var(--columns), max-content var(--token-selector-w) 1fr);
+    /* Label column tracks `--editor-label-col` when an ancestor sets one
+       (e.g. StateBlock's `.element-section`), so this grid lines up with a
+       sibling `.type-grid` whose `max-content` would otherwise differ. */
+    grid-template-columns: repeat(var(--columns), var(--editor-label-col, max-content) var(--token-selector-w) 1fr);
     column-gap: var(--ui-space-10);
     row-gap: var(--ui-space-6);
     align-items: center;
@@ -414,13 +417,13 @@
     padding-left: var(--ui-space-20);
   }
 
-  @container (max-width: 480px) {
+  @container variant-group (max-width: 480px) {
     .token-grid { --token-selector-w: 6rem; }
   }
 
   /* Narrow multi-col: shrink selector + inter-set gap further before giving
      up the second column. Targets the overlay's typical docked width range. */
-  @container (max-width: 640px) {
+  @container variant-group (max-width: 640px) {
     .token-grid.multi-col {
       --token-selector-w: 6rem;
       column-gap: var(--ui-space-6);
@@ -436,7 +439,7 @@
      `1fr` so the lone column fills the panel like single-col mode, and the
      inter-set padding is suppressed so wrapped "set 2" rows don't sit
      indented. */
-  @container (max-width: 520px) {
+  @container variant-group (max-width: 520px) {
     .token-grid.multi-col {
       --columns: 1;
       grid-template-columns: max-content var(--token-selector-w) 1fr;
@@ -449,7 +452,7 @@
     }
   }
 
-  @container (max-width: 380px) {
+  @container variant-group (max-width: 380px) {
     .token-grid {
       grid-template-columns: max-content 1fr;
       column-gap: var(--ui-space-6);

package/src/editor/component-editor/scaffolding/TypeEditor.svelte

@@ -5,6 +5,7 @@
   import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
   import UIFontWeightSelector from '../../ui/UIFontWeightSelector.svelte';
   import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
+  import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import FieldsetWrapper from './FieldsetWrapper.svelte';
   import { BORDER_WIDTH } from '../../ui/variantScales';
 
@@ -22,6 +23,8 @@
     weightLabel?: string;
     lineHeightVariable?: string | undefined;
     lineHeightLabel?: string;
+    letterSpacingVariable?: string | undefined;
+    letterSpacingLabel?: string;
     /** Optional outline rows rendered under the typography rows so a text-with-
       stroke group keeps stroke controls visually nested with the type they
       drive (e.g. SectionDivider title outline). */
@@ -47,6 +50,8 @@
     weightLabel = 'weight',
     lineHeightVariable = undefined,
     lineHeightLabel = 'line-h',
+    letterSpacingVariable = undefined,
+    letterSpacingLabel = 'letter-sp',
     outlineWidthVariable = undefined,
     outlineWidthLabel = 'outline thickness',
     outlineColorVariable = undefined,
@@ -78,6 +83,10 @@
       <span class="row-label">{lineHeightLabel}</span>
       <UILineHeightSelector variable={lineHeightVariable} {component} canBeLinked {onchange} />
     {/if}
+    {#if letterSpacingVariable}
+      <span class="row-label">{letterSpacingLabel}</span>
+      <UILetterSpacingSelector variable={letterSpacingVariable} {component} canBeLinked {onchange} />
+    {/if}
     {#if outlineWidthVariable}
       <span class="row-label">{outlineWidthLabel}</span>
       <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} {onchange} />
@@ -92,7 +101,10 @@
 <style>
   .type-grid {
     display: grid;
-    grid-template-columns: max-content 8rem 1fr;
+    /* Label column tracks the editor-wide `--editor-label-col` when an
+       ancestor (e.g. StateBlock's `.element-section`) sets one, so this
+       grid lines up with sibling `.token-grid`s in the same section. */
+    grid-template-columns: var(--editor-label-col, max-content) 8rem 1fr;
     column-gap: var(--ui-space-10);
     row-gap: var(--ui-space-6);
     align-items: center;