@motion-proto/live-tokens 0.3.9 → 0.5.0

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

@@ -1,17 +1,26 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
   type Source = { name: string; label: string; states: string[] };
 
-  export let toState: string;
-  export let variantName: string;
-  export let copySources: Source[] = [];
-  export let placement: 'start' | 'end' = 'start';
+  interface Props {
+    toState: string;
+    variantName: string;
+    copySources?: Source[];
+    placement?: 'start' | 'end';
+    onselect?: (payload: { fromVariant: string; fromState: string }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ select: { fromVariant: string; fromState: string } }>();
+  let {
+    toState,
+    variantName,
+    copySources = [],
+    placement = 'start',
+    onselect
+  }: Props = $props();
 
-  let open = false;
-  let root: HTMLElement;
+  let open = $state(false);
+  let root: HTMLElement | undefined = $state();
 
   function toggle() {
     open = !open;
@@ -19,7 +28,7 @@
 
   function pick(fromVariant: string, fromState: string) {
     open = false;
-    dispatch('select', { fromVariant, fromState });
+    onselect?.({ fromVariant, fromState });
   }
 
   function handleDocClick(e: MouseEvent) {
@@ -47,7 +56,7 @@
     type="button"
     class="copy-from-btn"
     class:active={open}
-    on:click={toggle}
+    onclick={toggle}
     title="Copy values from another variant/state"
   >
     <i class="fas fa-clone"></i>
@@ -63,7 +72,7 @@
             type="button"
             class="copy-menu-item"
             disabled={isSelf}
-            on:click={() => pick(src.name, onlyState)}
+            onclick={() => pick(src.name, onlyState)}
             role="menuitem"
           >
             <span>{src.label}</span>
@@ -87,7 +96,7 @@
                   type="button"
                   class="copy-menu-item"
                   disabled={isSelf}
-                  on:click={() => pick(src.name, fromState)}
+                  onclick={() => pick(src.name, fromState)}
                   role="menuitem"
                 >
                   <span>{fromState}</span>

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

@@ -1,10 +1,19 @@
 <script lang="ts">
   import ComponentFileManager from './ComponentFileManager.svelte';
 
-  export let component: string;
-  export let title: string;
-  export let description: string = '';
-  export let resetVariables: string[] | null = null;
+  interface Props {
+    component: string;
+    title: string;
+    description?: string;
+    resetVariables?: string[] | null;
+  }
+
+  let {
+    component,
+    title,
+    description = '',
+    resetVariables = null
+  }: Props = $props();
 </script>
 
 <ComponentFileManager {component} {title} {resetVariables} />

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

@@ -6,16 +6,29 @@
   import { BORDER_WIDTH, DIVIDER_HEIGHT } from '../../ui/variantScales';
   import FieldsetWrapper from './FieldsetWrapper.svelte';
 
-  export let colorVariable: string | undefined = undefined;
-  export let colorLabel: string | undefined = undefined;
-  export let widthVariable: string | undefined = undefined;
-  export let widthLabel: string | undefined = undefined;
-  export let heightVariable: string | undefined = undefined;
-  export let heightLabel: string | undefined = undefined;
-  /** When set, writes persist through the editor store under this component. */
-  export let component: string | undefined = undefined;
+  
+  interface Props {
+    colorVariable?: string | undefined;
+    colorLabel?: string | undefined;
+    widthVariable?: string | undefined;
+    widthLabel?: string | undefined;
+    heightVariable?: string | undefined;
+    heightLabel?: string | undefined;
+    /** When set, writes persist through the editor store under this component. */
+    component?: string | undefined;
+  }
+
+  let {
+    colorVariable = undefined,
+    colorLabel = undefined,
+    widthVariable = undefined,
+    widthLabel = undefined,
+    heightVariable = undefined,
+    heightLabel = undefined,
+    component = undefined
+  }: Props = $props();
 
-  let heightResolved = '';
+  let heightResolved = $state('');
 
   function readHeight() {
     if (!heightVariable) {
@@ -41,26 +54,26 @@
     document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
   });
 
-  $: heightIsZero = /^0+(?:\.0+)?(px|rem|em|%)?$/.test(heightResolved);
-  $: siblingDisabled = heightIsZero;
+  let heightIsZero = $derived(/^0+(?:\.0+)?(px|rem|em|%)?$/.test(heightResolved));
+  let siblingDisabled = $derived(heightIsZero);
 </script>
 
 <FieldsetWrapper legend="divider">
   {#if colorVariable}
     <div class="entry">
-      <UIPaletteSelector variable={colorVariable} {component} disabled={siblingDisabled} on:change={readHeight} />
+      <UIPaletteSelector variable={colorVariable} {component} disabled={siblingDisabled} onchange={readHeight} />
       <span class="label">{colorLabel ?? ''}</span>
     </div>
   {/if}
   {#if widthVariable}
     <div class="entry">
-      <UIVariantSelector variable={widthVariable} {component} disabled={siblingDisabled} {...BORDER_WIDTH} on:change={readHeight} />
+      <UIVariantSelector variable={widthVariable} {component} disabled={siblingDisabled} {...BORDER_WIDTH} onchange={readHeight} />
       <span class="label">{widthLabel ?? ''}</span>
     </div>
   {/if}
   {#if heightVariable}
     <div class="entry">
-      <UIVariantSelector variable={heightVariable} {component} {...DIVIDER_HEIGHT} on:change={readHeight} />
+      <UIVariantSelector variable={heightVariable} {component} {...DIVIDER_HEIGHT} onchange={readHeight} />
       <span class="label">{heightLabel ?? ''}</span>
     </div>
   {/if}

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

@@ -1,7 +1,13 @@
 <script lang="ts">
-  export let legend: string = '';
-  /** When true, the fieldset is rendered with a strong outline to mark it as the one currently driving the rendered preview. */
-  export let active: boolean = false;
+  
+  interface Props {
+    legend?: string;
+    /** When true, the fieldset is rendered with a strong outline to mark it as the one currently driving the rendered preview. */
+    active?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let { legend = '', active = false, children }: Props = $props();
 </script>
 
 <fieldset class="fieldset-wrapper" class:active>
@@ -9,7 +15,7 @@
     <legend class="fieldset-legend">{legend}</legend>
   {/if}
   <div class="fieldset-controls">
-    <slot />
+    {@render children?.()}
   </div>
 </fieldset>
 

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

@@ -16,14 +16,19 @@
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
   import AngleDial from './AngleDial.svelte';
 
-  export let component: string;
-  /** Prefix shared by all 7 token names — e.g. `--sectiondivider-canvas`. */
-  export let prefix: string;
+  
+  interface Props {
+    component: string;
+    /** Prefix shared by all 7 token names — e.g. `--sectiondivider-canvas`. */
+    prefix: string;
+  }
+
+  let { component, prefix }: Props = $props();
 
   type StopIndex = 1 | 2 | 3;
   const STOPS: readonly StopIndex[] = [1, 2, 3] as const;
 
-  $: angleVar = `${prefix}-gradient-angle`;
+  let angleVar = $derived(`${prefix}-gradient-angle`);
   function stopColorVar(i: StopIndex): string {
     return `${prefix}-gradient-stop-${i}-color`;
   }
@@ -52,27 +57,27 @@
     return m ? parseFloat(m[1]) : null;
   }
 
-  $: angleDeg = parseNumberFromCss(resolveLiteralWith($tokenRegistry$, angleVar), 'deg') ?? 135;
-  $: positions = [
+  let angleDeg = $derived(parseNumberFromCss(resolveLiteralWith($tokenRegistry$, angleVar), 'deg') ?? 135);
+  let positions = $derived([
     parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(1)), '%') ?? 0,
     parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(2)), '%') ?? 50,
     parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(3)), '%') ?? 100,
-  ] as [number, number, number];
+  ] as [number, number, number]);
 
   // Reference the per-stop CSS var directly so the cascade fills in the
   // component's CSS defaults when the user hasn't overridden a stop. Reading
   // `aliases[...]` alone would miss defaults (no override → `#888`) even
   // though the component is rendering the color via its own `:root` block.
-  $: stopColors = ([1, 2, 3] as StopIndex[]).map((i) => `var(${stopColorVar(i)})`) as [string, string, string];
+  let stopColors = $derived(([1, 2, 3] as StopIndex[]).map((i) => `var(${stopColorVar(i)})`) as [string, string, string]);
 
   // Build the live gradient string from current positions + colors so the
   // ribbon reflects edits even mid-drag (before the component re-renders via
   // its own CSS var consumption).
-  $: ribbonBg = `linear-gradient(90deg, ${stopColors
+  let ribbonBg = $derived(`linear-gradient(90deg, ${stopColors
     .map((c, i) => `${c} ${positions[i]}%`)
-    .join(', ')})`;
+    .join(', ')})`);
 
-  let selected: StopIndex = 1;
+  let selected: StopIndex = $state(1);
 
   function setAngle(deg: number) {
     setComponentAlias(component, angleVar, { kind: 'literal', value: `${Math.round(deg)}deg` });
@@ -84,11 +89,11 @@
   }
 
   // ── Position handle drag ────────────────────────────────────────────────
-  let barEl: HTMLDivElement;
-  let dragIndex: StopIndex | null = null;
+  let barEl: HTMLDivElement | undefined = $state();
+  let dragIndex: StopIndex | null = $state(null);
 
   function pctFromEvent(e: PointerEvent): number {
-    const rect = barEl.getBoundingClientRect();
+    const rect = barEl!.getBoundingClientRect();
     const x = e.clientX - rect.left;
     return (x / rect.width) * 100;
   }
@@ -126,10 +131,10 @@
           class:selected={selected === i}
           class:dragging={dragIndex === i}
           style="left: {positions[i - 1]}%; --stop-color: {stopColors[i - 1]};"
-          on:pointerdown={(e) => onHandleDown(e, i)}
-          on:pointermove={onHandleMove}
-          on:pointerup={onHandleUp}
-          on:pointercancel={onHandleUp}
+          onpointerdown={(e) => onHandleDown(e, i)}
+          onpointermove={onHandleMove}
+          onpointerup={onHandleUp}
+          onpointercancel={onHandleUp}
           title="Stop {i} ({positions[i - 1]}%)"
           aria-label="Gradient stop {i}"
         >
@@ -148,7 +153,7 @@
         max="100"
         step="0.1"
         value={positions[selected - 1]}
-        on:change={(e) => onPositionInput(selected, e)}
+        onchange={(e) => onPositionInput(selected, e)}
       />
       <span class="suffix">%</span>
     </label>
@@ -156,7 +161,7 @@
       <UIPaletteSelector variable={stopColorVar(selected)} {component} />
     </div>
     <div class="angle-slot">
-      <AngleDial value={angleDeg} on:change={(e) => setAngle(e.detail.value)} />
+      <AngleDial value={angleDeg} onchange={(d) => setAngle(d.value)} />
     </div>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   type CellStatus = 'linked' | 'broken' | 'absent';
   type RowEntry = { label: string; key: string };
   type Axes =
@@ -34,37 +34,46 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let contexts: string[] = [];
-  export let broken: string[] = [];
-  export let singleAxisLabel: string = '';
-  /** Caption rendered above the grid. Use to describe the linkage scope
+  interface Props {
+    contexts?: string[];
+    broken?: string[];
+    singleAxisLabel?: string;
+    /** Caption rendered above the grid. Use to describe the linkage scope
       (e.g. "Links across variants and states"). Defaults to the legacy
       "Linked Properties" label so consumers that don't pass a caption
       keep their existing rendering. */
-  export let caption: string = 'Linked Properties';
-  /** Currently focused variant (matches a row in 2d / a row label in 1d). When set,
+    caption?: string;
+    /** Currently focused variant (matches a row in 2d / a row label in 1d). When set,
       the matching row is highlighted with the same active style as the variant tab strip. */
-  export let selectedRow: string | null = null;
-  /** Currently focused state (matches a column in 2d). The cell at (selectedRow, selectedCol)
+    selectedRow?: string | null;
+    /** Currently focused state (matches a column in 2d). The cell at (selectedRow, selectedCol)
       gets an additional accent. Ignored in 1d charts. */
-  export let selectedCol: string | null = null;
+    selectedCol?: string | null;
+    onselect?: (label: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ select: string }>();
+  let {
+    contexts = [],
+    broken = [],
+    singleAxisLabel = '',
+    caption = 'Linked Properties',
+    selectedRow = null,
+    selectedCol = null,
+    onselect
+  }: Props = $props();
 
-  $: axes = deriveAxes(contexts);
-  $: status = (() => {
+  let axes = $derived(deriveAxes(contexts));
+  let status = $derived((() => {
     const brokenSet = new Set(broken);
     const m = new Map<string, CellStatus>();
     for (const c of contexts) m.set(c, brokenSet.has(c) ? 'broken' : 'linked');
     return m;
-  })();
+  })());
 
-  let hoveredRow: number = -1;
+  let hoveredRow: number = $state(-1);
 
   function key2d(r: string, c: string): string { return `${r} ${c}`; }
-  function selectRow(label: string) { dispatch('select', label); }
+  function selectRow(label: string) { onselect?.(label); }
   /** True when this 1d row's key matches focus — either as a bare label
       (`"primary"` matches focusedVariant `"primary"`) or as a compound
       `"variant state"` matching the focused pair. */
@@ -92,11 +101,11 @@
           class="row-h row-target"
           class:hovered={hoveredRow === i}
           class:selected={selectedRow === r}
-          on:click={() => selectRow(r)}
-          on:mouseenter={() => (hoveredRow = i)}
-          on:mouseleave={() => (hoveredRow = -1)}
-          on:focus={() => (hoveredRow = i)}
-          on:blur={() => (hoveredRow = -1)}
+          onclick={() => selectRow(r)}
+          onmouseenter={() => (hoveredRow = i)}
+          onmouseleave={() => (hoveredRow = -1)}
+          onfocus={() => (hoveredRow = i)}
+          onblur={() => (hoveredRow = -1)}
         >{r}</button>
         {#each axes.cols as c (c)}
           {@const st = status.get(key2d(r, c)) ?? 'absent'}
@@ -108,9 +117,9 @@
             class:selected={selectedRow === r && selectedCol === c}
             class:in-selected-row={selectedRow === r && selectedCol !== c}
             aria-label="{r} {c}: {st}"
-            on:click={() => selectRow(r)}
-            on:mouseenter={() => (hoveredRow = i)}
-            on:mouseleave={() => (hoveredRow = -1)}
+            onclick={() => selectRow(r)}
+            onmouseenter={() => (hoveredRow = i)}
+            onmouseleave={() => (hoveredRow = -1)}
           >
             {#if st === 'linked'}
               <span class="dot" aria-hidden="true"></span>
@@ -138,11 +147,11 @@
           class="row-h row-target"
           class:hovered={hoveredRow === i}
           class:selected={isSel}
-          on:click={() => selectRow(r.label)}
-          on:mouseenter={() => (hoveredRow = i)}
-          on:mouseleave={() => (hoveredRow = -1)}
-          on:focus={() => (hoveredRow = i)}
-          on:blur={() => (hoveredRow = -1)}
+          onclick={() => selectRow(r.label)}
+          onmouseenter={() => (hoveredRow = i)}
+          onmouseleave={() => (hoveredRow = -1)}
+          onfocus={() => (hoveredRow = i)}
+          onblur={() => (hoveredRow = -1)}
         >{r.label}</button>
         <button
           type="button"
@@ -151,9 +160,9 @@
           class:hovered={hoveredRow === i}
           class:selected={isSel}
           aria-label="{r.label}: {st}"
-          on:click={() => selectRow(r.label)}
-          on:mouseenter={() => (hoveredRow = i)}
-          on:mouseleave={() => (hoveredRow = -1)}
+          onclick={() => selectRow(r.label)}
+          onmouseenter={() => (hoveredRow = i)}
+          onmouseleave={() => (hoveredRow = -1)}
         >
           {#if st === 'linked'}
             <span class="dot" aria-hidden="true"></span>

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

@@ -13,8 +13,12 @@
   const fadeDur = reduceMotion ? 0 : 140;
   const slideDur = reduceMotion ? 0 : 200;
 
-  export let component: string;
-  export let linked: LinkedBlockResult;
+  interface Props {
+    component: string;
+    linked: LinkedBlockResult;
+  }
+
+  let { component, linked }: Props = $props();
 
   const editorCtx = getEditorContext();
   const focusedVariant = editorCtx?.focusedVariant;
@@ -25,9 +29,9 @@
       doesn't know if its rows are variants (top-level tab strip) or states (per-VariantGroup
       state tabs), so we set both stores; each consumer adopts the value only if it names
       one of its own tabs. */
-  function handleChartSelect(e: CustomEvent<string>) {
-    editorCtx?.focusedVariant.set(e.detail);
-    editorCtx?.focusedState.set(e.detail);
+  function handleChartSelect(label: string) {
+    editorCtx?.focusedVariant.set(label);
+    editorCtx?.focusedState.set(label);
   }
 
   /** Pick the sibling that backs the cell the user is currently focused on, so the row
@@ -71,35 +75,35 @@
     return `${brokenContexts.length} unlinked`;
   }
 
-  $: focusedV = (focusedVariant ? $focusedVariant : null) ?? null;
-  $: focusedS = (focusedState ? $focusedState : null) ?? null;
-  $: hoveredVar = (hoveredLinkedVariable ? $hoveredLinkedVariable : null) ?? null;
+  let focusedV = $derived((focusedVariant ? $focusedVariant : null) ?? null);
+  let focusedS = $derived((focusedState ? $focusedState : null) ?? null);
+  let hoveredVar = $derived((hoveredLinkedVariable ? $hoveredLinkedVariable : null) ?? null);
 
   function setHover(variable: string | null) {
     hoveredLinkedVariable?.set(variable);
   }
 
   /** One card per LinkedGroup. Stable order = editor-declared order. */
-  $: cards = linked.groups.map((g) => ({
+  let cards = $derived(linked.groups.map((g) => ({
     contexts: g.contexts,
     brokenContexts: g.brokenContexts,
     row: { ...g.token, variable: pickFocusedVariable(g, focusedV, focusedS) },
     caption: captionFor(g.contexts),
     unlinkedText: formatUnlinked(g.brokenContexts),
     isBroken: g.brokenContexts.length > 0,
-  }));
+  })));
 
   /** Section-level summary: count of properties with any broken peers. The
       header tells the user *whether to look*; the per-card text tells them
       *what's broken*. Two layers, two granularities. */
-  $: brokenPropertyCount = cards.filter((c) => c.isBroken).length;
-  $: hasAnyBroken = brokenPropertyCount > 0;
+  let brokenPropertyCount = $derived(cards.filter((c) => c.isBroken).length);
+  let hasAnyBroken = $derived(brokenPropertyCount > 0);
 
   /** Default closed; the section header's summary count + "in sync / N unlinked"
       text is the at-a-glance signal, so users opt into the matrix only when
       they need it. */
-  let sectionToggleOverride: boolean | null = null;
-  $: sectionExpanded = sectionToggleOverride ?? false;
+  let sectionToggleOverride: boolean | null = $state(null);
+  let sectionExpanded = $derived(sectionToggleOverride ?? false);
   function toggleSection() {
     sectionToggleOverride = !sectionExpanded;
   }
@@ -107,7 +111,7 @@
   /** Per-card chart expand state, keyed by the card's row variable (which is
       stable per LinkedGroup since pickFocusedVariable runs against the same
       group on every render). */
-  let expandedCards: Record<string, boolean> = {};
+  let expandedCards: Record<string, boolean> = $state({});
   function toggleCard(variable: string) {
     expandedCards = { ...expandedCards, [variable]: !expandedCards[variable] };
   }
@@ -120,7 +124,7 @@
       class="section-header"
       class:expanded={sectionExpanded}
       aria-expanded={sectionExpanded}
-      on:click={toggleSection}
+      onclick={toggleSection}
     >
       <i class="fas fa-chevron-right chevron"></i>
       <span class="section-title">Linked properties</span>
@@ -144,8 +148,8 @@
             class="linked-card"
             class:broken={card.isBroken}
             class:hovered={cardHovered}
-            on:mouseenter={() => setHover(card.row.variable)}
-            on:mouseleave={() => setHover(null)}
+            onmouseenter={() => setHover(card.row.variable)}
+            onmouseleave={() => setHover(null)}
           >
             <h4 class="property-name">{card.row.label}</h4>
             <div class="control-row">
@@ -154,7 +158,6 @@
                 {component}
                 linkedOrder={linked.linkedOrder}
                 isLinkedBlock
-                on:change
               />
             </div>
             <button
@@ -162,7 +165,7 @@
               class="drill-down"
               class:expanded={cardExpanded}
               aria-expanded={cardExpanded}
-              on:click={() => toggleCard(card.row.variable)}
+              onclick={() => toggleCard(card.row.variable)}
             >
               <i class="fas fa-chevron-right chevron"></i>
               <span class="drill-label">Links</span>
@@ -181,7 +184,7 @@
                   caption={card.caption}
                   selectedRow={focusedV}
                   selectedCol={focusedS}
-                  on:select={handleChartSelect}
+                  onselect={handleChartSelect}
                 />
               </div>
             {/if}

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

@@ -1,4 +1,9 @@
 <script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
   /** Section that gathers render-time toggles a component accepts as props
       (e.g. dismissible, action buttons, hover shimmer, show icons). */
 </script>
@@ -9,7 +14,7 @@
     <p class="config-description">Component accepts multiple properties that can change its layout. Use these to preview.</p>
   </header>
   <div class="config-controls">
-    <slot />
+    {@render children?.()}
   </div>
 </section>