@motion-proto/live-tokens 0.3.7 → 0.5.0

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} />