@motion-proto/live-tokens 0.3.7 → 0.5.0

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

@@ -1,27 +1,39 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { stopPropagation } from 'svelte/legacy';
+
+  import { onMount, onDestroy } from 'svelte';
   import type { ComponentConfigMeta } from '../../lib/themeTypes';
   import UIDialog from '../../ui/UIDialog.svelte';
 
-  /** Component slug used in the load-dialog title (e.g. "button"). */
-  export let component: string;
-  /** Files shown in the load dialog. */
-  export let files: ComponentConfigMeta[] = [];
-  /** Currently active file — highlighted in the load list. */
-  export let activeFileName: string = 'default';
-
-  const dispatch = createEventDispatcher<{
-    save: void;
-    saveAs: void;
+  interface Props {
+    /** Component slug used in the load-dialog title (e.g. "button"). */
+    component: string;
+    /** Files shown in the load dialog. */
+    files?: ComponentConfigMeta[];
+    /** Currently active file — highlighted in the load list. */
+    activeFileName?: string;
+    onsave?: () => void;
+    onsaveAs?: () => void;
     /** Fired when the user clicks "Load…" in the menu — parent should refresh `files`. */
-    openLoad: void;
-    load: ComponentConfigMeta;
-    delete: ComponentConfigMeta;
-  }>();
+    onopenLoad?: () => void;
+    onload?: (file: ComponentConfigMeta) => void;
+    ondelete?: (file: ComponentConfigMeta) => void;
+  }
 
-  let fileMenuOpen = false;
-  let fileMenuRoot: HTMLElement;
-  let showFileList = false;
+  let {
+    component,
+    files = [],
+    activeFileName = 'default',
+    onsave,
+    onsaveAs,
+    onopenLoad,
+    onload,
+    ondelete,
+  }: Props = $props();
+
+  let fileMenuOpen = $state(false);
+  let fileMenuRoot: HTMLElement | undefined = $state();
+  let showFileList = $state(false);
 
   onMount(() => {
     document.addEventListener('click', handleDocClick, true);
@@ -40,28 +52,28 @@
 
   function handleSave() {
     fileMenuOpen = false;
-    dispatch('save');
+    onsave?.();
   }
 
   function handleSaveAs() {
     fileMenuOpen = false;
-    dispatch('saveAs');
+    onsaveAs?.();
   }
 
   function handleOpenLoad() {
     fileMenuOpen = false;
     showFileList = true;
-    dispatch('openLoad');
+    onopenLoad?.();
   }
 
   function handleLoad(file: ComponentConfigMeta) {
     showFileList = false;
-    dispatch('load', file);
+    onload?.(file);
   }
 
   function handleDelete(file: ComponentConfigMeta) {
     if (file.fileName === 'default') return;
-    dispatch('delete', file);
+    ondelete?.(file);
   }
 </script>
 
@@ -69,7 +81,7 @@
   <button
     class="cfm-btn"
     class:active={fileMenuOpen}
-    on:click={() => (fileMenuOpen = !fileMenuOpen)}
+    onclick={() => (fileMenuOpen = !fileMenuOpen)}
     title="File menu"
   >
     <i class="fas fa-file"></i>
@@ -78,15 +90,15 @@
   </button>
   {#if fileMenuOpen}
     <div class="file-menu-dropdown" role="menu">
-      <button class="file-menu-item" on:click={handleSave} role="menuitem">
+      <button class="file-menu-item" onclick={handleSave} role="menuitem">
         <i class="fas fa-save"></i>
         <span>Save</span>
       </button>
-      <button class="file-menu-item" on:click={handleSaveAs} role="menuitem">
+      <button class="file-menu-item" onclick={handleSaveAs} role="menuitem">
         <i class="fas fa-copy"></i>
         <span>Save As…</span>
       </button>
-      <button class="file-menu-item" on:click={handleOpenLoad} role="menuitem">
+      <button class="file-menu-item" onclick={handleOpenLoad} role="menuitem">
         <i class="fas fa-folder-open"></i>
         <span>Load…</span>
       </button>
@@ -103,7 +115,7 @@
   <div class="load-list">
     {#each files as file}
       <div class="load-item" class:active={file.fileName === activeFileName}>
-        <button class="load-name-btn" on:click={() => handleLoad(file)}>
+        <button class="load-name-btn" onclick={() => handleLoad(file)}>
           {file.name}
         </button>
         {#if file.fileName === activeFileName}
@@ -112,7 +124,7 @@
         {#if file.fileName !== 'default'}
           <button
             class="file-delete-btn"
-            on:click|stopPropagation={() => handleDelete(file)}
+            onclick={stopPropagation(() => handleDelete(file))}
             title="Delete {file.name}"
           >
             <i class="fas fa-trash-alt"></i>

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

@@ -2,14 +2,18 @@
   import type { ComponentSection } from './componentSectionType';
   import { defaultSections } from './defaultSections';
 
-  export let sections: ComponentSection[] = defaultSections;
-  export let selectedComponent: string = sections[0]?.id ?? '';
+  interface Props {
+    sections?: ComponentSection[];
+    selectedComponent?: string;
+  }
+
+  let { sections = defaultSections, selectedComponent = sections[0]?.id ?? '' }: Props = $props();
 </script>
 
 <div class="components-container">
   {#each sections as section (section.id)}
     {#if selectedComponent === section.id}
-      <svelte:component this={section.component} {...(section.props ?? {})} />
+      <section.component {...(section.props ?? {})} />
     {/if}
   {/each}
 </div>

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>