@motion-proto/live-tokens 0.3.9 → 0.6.0

package/src/ui/EditorViewSwitcher.svelte

@@ -2,13 +2,17 @@
   import { editorView } from '../lib/editorViewStore';
   import { parentRoute } from '../lib/parentRouteStore';
 
-  export let condensed = false;
+  interface Props {
+    condensed?: boolean;
+  }
+
+  let { condensed = false }: Props = $props();
 
   // On /components the host page is already the components editor — the
   // overlay's components view would just stack on top of it, so disable the
   // switch. The switcher renders inside the editor iframe, so we read the
   // *parent* route, not this iframe's own route.
-  $: componentsDisabled = $parentRoute === '/components';
+  let componentsDisabled = $derived($parentRoute === '/components');
 
   function set(v: 'tokens' | 'components') {
     editorView.set(v);
@@ -26,7 +30,7 @@
     class="compact"
     aria-label={$editorView === 'tokens' ? 'Switch to components' : 'Switch to tokens'}
     title={$editorView === 'tokens' ? 'Tokens (click for components)' : 'Components (click for tokens)'}
-    on:click={toggle}
+    onclick={toggle}
   >
     <i class="fas {$editorView === 'tokens' ? 'fa-palette' : 'fa-cubes'}"></i>
   </button>
@@ -40,7 +44,7 @@
         class="seg-btn"
         class:active={$editorView === 'tokens'}
         aria-selected={$editorView === 'tokens'}
-        on:click={() => set('tokens')}
+        onclick={() => set('tokens')}
       >
         <span class="radio" aria-hidden="true"></span>
         <span>Tokens</span>
@@ -53,7 +57,7 @@
         aria-selected={$editorView === 'components'}
         disabled={componentsDisabled}
         title={componentsDisabled ? 'Already viewing the Components page' : undefined}
-        on:click={() => set('components')}
+        onclick={() => set('components')}
       >
         <span class="radio" aria-hidden="true"></span>
         <span>Components</span>

package/src/ui/FontStackEditor.svelte

@@ -21,17 +21,17 @@
     '--font-mono',
   ];
 
-  $: fontSourcesList = $editorState.fonts.sources;
-  $: fontStacksList = $editorState.fonts.stacks;
-  $: allFamilies = (fontSourcesList as FontSource[]).flatMap((s) => s.families.map((f) => ({ ...f, sourceLabel: s.label ?? s.kind })));
-  $: familyById = new Map<string, FontFamily>(allFamilies.map((f) => [f.id, f]));
+  let fontSourcesList = $derived($editorState.fonts.sources);
+  let fontStacksList = $derived($editorState.fonts.stacks);
+  let allFamilies = $derived((fontSourcesList as FontSource[]).flatMap((s) => s.families.map((f) => ({ ...f, sourceLabel: s.label ?? s.kind }))));
+  let familyById = $derived(new Map<string, FontFamily>(allFamilies.map((f) => [f.id, f])));
 
   function ensureAllStacksPresent(current: FontStack[]): FontStack[] {
     const byVar = new Map(current.map((s) => [s.variable, s]));
     return STACK_VARIABLES.map((v) => byVar.get(v) ?? { variable: v, slots: [{ kind: 'generic', value: 'sans-serif' } as FontStackSlot] });
   }
 
-  $: stacks = ensureAllStacksPresent(fontStacksList);
+  let stacks = $derived(ensureAllStacksPresent(fontStacksList));
 
   function slotKey(slot: FontStackSlot): string {
     if (slot.kind === 'project') return `project:${slot.familyId}`;
@@ -108,8 +108,8 @@
     });
   }
 
-  let dragSource: { variable: FontStackVariable; index: number } | null = null;
-  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'on' | 'after' } | null = null;
+  let dragSource: { variable: FontStackVariable; index: number } | null = $state(null);
+  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'on' | 'after' } | null = $state(null);
 
   function onDragStart(e: DragEvent, variable: FontStackVariable, index: number) {
     if (!e.dataTransfer) return;
@@ -167,6 +167,7 @@
       </div>
       <div class="font-stack-list">
         {#each stack.slots as slot, i (i + ':' + slotKey(slot))}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
             class="slot-row"
             class:drop-on={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'on'}
@@ -174,11 +175,11 @@
             class:drop-after={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'after'}
             class:dragging={dragSource?.variable === stack.variable && dragSource?.index === i}
             draggable="true"
-            on:dragstart={(e) => onDragStart(e, stack.variable, i)}
-            on:dragover={(e) => onDragOver(e, stack.variable, i)}
-            on:dragleave={onDragLeave}
-            on:drop={(e) => onDrop(e, stack.variable, i)}
-            on:dragend={onDragEnd}
+            ondragstart={(e) => onDragStart(e, stack.variable, i)}
+            ondragover={(e) => onDragOver(e, stack.variable, i)}
+            ondragleave={onDragLeave}
+            ondrop={(e) => onDrop(e, stack.variable, i)}
+            ondragend={onDragEnd}
           >
             <span class="drag-handle" aria-hidden="true">⋮⋮</span>
             <span class="slot-position">{i + 1}.</span>
@@ -188,9 +189,9 @@
                 style="font-family: {slotCssValue(slot)};{stack.variable === '--font-display' ? ' font-size: var(--ui-font-size-2xl);' : ''}"
               >The quick brown fox jumps over the lazy dog</span>
               <select
-                class="form-select slot-select"
+                class="ui-form-select slot-select"
                 value={slotKey(slot)}
-                on:change={(e) => onSelectChange(e, stack.variable, i)}
+                onchange={(e) => onSelectChange(e, stack.variable, i)}
               >
                 {#if allFamilies.length > 0}
                   <optgroup label="Project fonts">
@@ -216,13 +217,13 @@
               class="slot-remove"
               aria-label="Remove slot"
               title="Remove"
-              on:click={() => removeSlot(stack.variable, i)}
+              onclick={() => removeSlot(stack.variable, i)}
               disabled={stack.slots.length <= 1}
             >×</button>
           </div>
         {/each}
       </div>
-      <button type="button" class="add-fallback" on:click={() => addSlot(stack.variable)}>
+      <button type="button" class="add-fallback" onclick={() => addSlot(stack.variable)}>
         + add fallback
       </button>
     </div>

package/src/ui/GradientEditor.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   /**
    * Visual gradient editor. Stops are draggable diamond handles below a live
    * ribbon; only the selected stop exposes its position + color controls (the
    * old list of every stop is replaced by this single-row pattern, mirroring
    * GradientCard.svelte). Stops can be added/removed with a minimum of two.
    */
-  import { tick, onMount, createEventDispatcher } from 'svelte';
+  import { tick, onMount } from 'svelte';
   import {
     editorState,
     setGradient,
@@ -19,9 +21,13 @@
   import GradientStopPicker from './GradientStopPicker.svelte';
   import AngleDial from '../component-editor/scaffolding/AngleDial.svelte';
 
-  export let variable: string;
+  interface Props {
+    variable: string;
+    onsave?: () => void;
+    oncancel?: () => void;
+  }
 
-  const dispatch = createEventDispatcher<{ save: void; cancel: void }>();
+  let { variable, onsave, oncancel }: Props = $props();
 
   /** Deep snapshot of the gradient at editor open, used to restore on Cancel. */
   let snapshot: { type: GradientType; angle: number; stops: GradientTokenStop[] } | null = null;
@@ -32,25 +38,27 @@
     }
   });
 
-  function save() { dispatch('save'); }
+  function save() { onsave?.(); }
   function cancel() {
     if (snapshot) setGradient(variable, snapshot);
-    dispatch('cancel');
+    oncancel?.();
   }
 
-  $: gradient = $editorState.gradients.tokens.find((t) => t.variable === variable);
-  $: stopCount = gradient?.stops.length ?? 0;
+  let gradient = $derived($editorState.gradients.tokens.find((t) => t.variable === variable));
+  let stopCount = $derived(gradient?.stops.length ?? 0);
 
-  let selected = 0;
+  let selected = $state(0);
   // Keep `selected` in range as stops are added/removed.
-  $: if (selected >= stopCount) selected = Math.max(0, stopCount - 1);
+  run(() => {
+    if (selected >= stopCount) selected = Math.max(0, stopCount - 1);
+  });
 
   function setType(type: GradientType) {
     setGradientType(variable, type);
   }
 
-  function onAngleChange(e: CustomEvent<{ value: number }>) {
-    setGradientAngle(variable, e.detail.value);
+  function onAngleChange(detail: { value: number }) {
+    setGradientAngle(variable, detail.value);
   }
 
   function setPosition(i: number, pct: number) {
@@ -63,8 +71,8 @@
     if (Number.isFinite(v)) setPosition(selected, v);
   }
 
-  function handleStopChange(i: number, e: CustomEvent<{ color: string; opacity: number }>) {
-    setGradientStop(variable, i, { color: e.detail.color, opacity: e.detail.opacity });
+  function handleStopChange(i: number, payload: { color: string; opacity: number }) {
+    setGradientStop(variable, i, { color: payload.color, opacity: payload.opacity });
   }
 
   /** Insert a stop at the given percentage, inheriting color/opacity from the
@@ -103,7 +111,7 @@
    *  a sensible color rather than a default. */
   function onRibbonClick(e: MouseEvent) {
     if (!gradient || e.button !== 0) return;
-    const rect = barEl.getBoundingClientRect();
+    const rect = barEl!.getBoundingClientRect();
     const pct = ((e.clientX - rect.left) / rect.width) * 100;
     const nearest = gradient.stops.reduce(
       (best, s) => (Math.abs(s.position - pct) < Math.abs(best.position - pct) ? s : best),
@@ -119,11 +127,11 @@
   }
 
   // ── Ribbon handle drag ─────────────────────────────────────────────────
-  let barEl: HTMLDivElement;
-  let dragIndex: number | null = null;
+  let barEl: HTMLDivElement | undefined = $state();
+  let dragIndex: number | 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;
   }
@@ -145,21 +153,22 @@
   }
 
   // Stop colors rendered into the diamonds: token refs become var(...).
-  $: stopSwatches = (gradient?.stops ?? []).map((s) => {
+  let stopSwatches = $derived((gradient?.stops ?? []).map((s) => {
     const base = s.color.startsWith('--') ? `var(${s.color})` : s.color;
     const op = s.opacity ?? 100;
     return op >= 100 ? base : `color-mix(in srgb, ${base} ${Math.round(op)}%, transparent)`;
-  });
+  }));
 </script>
 
 {#if gradient}
   <div class="gradient-editor">
     <div class="ribbon-wrap">
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
       <div
         class="ribbon"
         bind:this={barEl}
         style="background: var({variable});"
-        on:click={onRibbonClick}
+        onclick={onRibbonClick}
         role="button"
         tabindex="-1"
         aria-label="Click to add a gradient stop"
@@ -172,10 +181,10 @@
             class:selected={selected === i}
             class:dragging={dragIndex === i}
             style="left: {stop.position}%; --stop-color: {stopSwatches[i]};"
-            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 + 1} (${stop.position}%)`}
             aria-label={`Gradient stop ${i + 1}`}
           >
@@ -190,24 +199,24 @@
         <button
           type="button"
           class:active={gradient.type === 'linear'}
-          on:click={() => setType('linear')}
+          onclick={() => setType('linear')}
         >Linear</button>
         <button
           type="button"
           class:active={gradient.type === 'radial'}
-          on:click={() => setType('radial')}
+          onclick={() => setType('radial')}
         >Radial</button>
       </div>
       {#if gradient.type === 'linear'}
         <div class="angle-slot">
-          <AngleDial value={gradient.angle} on:change={onAngleChange} />
+          <AngleDial value={gradient.angle} onchange={onAngleChange} />
         </div>
       {/if}
       <div class="spacer"></div>
       <button
         type="button"
         class="ghost-btn"
-        on:click={addStop}
+        onclick={addStop}
         title="Add stop"
       >
         <i class="fas fa-plus"></i> Add stop
@@ -215,7 +224,7 @@
       <button
         type="button"
         class="ghost-btn"
-        on:click={removeSelected}
+        onclick={removeSelected}
         disabled={gradient.stops.length <= 2}
         title={gradient.stops.length <= 2 ? 'Gradient needs at least two stops' : 'Remove selected stop'}
       >
@@ -233,7 +242,7 @@
             max="100"
             step="0.1"
             value={gradient.stops[selected].position}
-            on:change={onPositionInput}
+            onchange={onPositionInput}
           />
           <span class="suffix">%</span>
         </label>
@@ -242,15 +251,15 @@
             stopId={`${variable}-${selected}`}
             color={gradient.stops[selected].color}
             opacity={gradient.stops[selected].opacity ?? 100}
-            on:change={(e) => handleStopChange(selected, e)}
+            onchange={(payload) => handleStopChange(selected, payload)}
           />
         </div>
       </div>
     {/if}
 
     <div class="footer-row">
-      <button type="button" class="ghost-btn" on:click={cancel}>Cancel</button>
-      <button type="button" class="primary-btn" on:click={save}>Save</button>
+      <button type="button" class="ghost-btn" onclick={cancel}>Cancel</button>
+      <button type="button" class="primary-btn" onclick={save}>Save</button>
     </div>
   </div>
 {/if}

package/src/ui/GradientStopPicker.svelte

@@ -5,18 +5,20 @@
    * to that scratch var get parsed back out and forwarded as a structured update
    * to gradient state, so we don't have to refactor UIPaletteSelector itself.
    */
-  import { onDestroy, createEventDispatcher } from 'svelte';
   import UIPaletteSelector from './UIPaletteSelector.svelte';
   import { setCssVar, removeCssVar } from '../lib/cssVarSync';
 
-  export let stopId: string;        // unique key (e.g. gradient-var + stop index)
-  export let color: string;          // token name like '--color-brand-500'
-  export let opacity: number = 100;  // 0–100
+  interface Props {
+    stopId: string; // unique key (e.g. gradient-var + stop index)
+    color: string; // token name like '--color-brand-500'
+    opacity?: number; // 0–100
+    onchange?: (payload: { color: string; opacity: number }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: { color: string; opacity: number } }>();
+  let { stopId, color, opacity = 100, onchange }: Props = $props();
 
   /** Scratch var the embedded picker reads/writes; isolated per stop. */
-  const scratchVar = `--__grad-stop-${stopId}`;
+  let scratchVar = $derived(`--__grad-stop-${stopId}`);
 
   function buildScratchValue(c: string, o: number): string {
     const base = c.startsWith('--') ? `var(${c})` : c;
@@ -39,36 +41,23 @@
     return null;
   }
 
-  // Seed the scratch var synchronously during script init so UIPaletteSelector
-  // (which mounts before its parent's onMount) reads the current stop value.
-  if (typeof document !== 'undefined') {
+  // Seed (and re-seed on external updates like undo/redo) the scratch var so
+  // UIPaletteSelector reads the current stop value. The effect's cleanup runs
+  // on dependency change AND unmount, so it removes the right key even if
+  // stopId changes mid-life.
+  $effect(() => {
     setCssVar(scratchVar, buildScratchValue(color, opacity));
-  }
+    const key = scratchVar;
+    return () => removeCssVar(key);
+  });
 
   function handleChange() {
     const raw = document.documentElement.style.getPropertyValue(scratchVar);
     const parsed = parseScratch(raw);
     if (!parsed) return;
     if (parsed.color === color && parsed.opacity === opacity) return;
-    dispatch('change', parsed);
-  }
-
-  onDestroy(() => {
-    removeCssVar(scratchVar);
-  });
-
-  // When external state updates the stop (undo/redo, sibling-stop edits),
-  // refresh the scratch so the picker reflects current values.
-  let lastSynced = `${color}|${opacity}`;
-  $: {
-    const sig = `${color}|${opacity}`;
-    if (sig !== lastSynced) {
-      lastSynced = sig;
-      if (typeof document !== 'undefined') {
-        setCssVar(scratchVar, buildScratchValue(color, opacity));
-      }
-    }
+    onchange?.(parsed);
   }
 </script>
 
-<UIPaletteSelector variable={scratchVar} on:change={handleChange} />
+<UIPaletteSelector variable={scratchVar} onchange={handleChange} />