@motion-proto/live-tokens 0.3.9 → 0.6.0

package/src/ui/palette/ScaleCurveEditor.svelte

@@ -2,7 +2,10 @@
   import BezierCurveEditor from '../BezierCurveEditor.svelte';
   import type { CurveAnchor, CurveConfig } from '../curveEngine';
 
-  /**
+  
+
+  interface Props {
+    /**
    * Single-channel curve editor — one Bezier curve for one channel
    * (lightness or saturation) of one scale (palette / gray-palette /
    * Surfaces / Borders / Text). Instantiated 6+ times across PaletteEditor:
@@ -14,16 +17,28 @@
    * parent only needs to know how to wire `(key, value)` once (via a
    * closure passed in).
    */
+    curveKey: string;
+    anchors: CurveAnchor[];
+    cfg: CurveConfig;
+    stepCount: number;
+    defaults: CurveAnchor[];
+    offset?: number;
+    lockedAnchorIndex?: number | null;
+    onAnchorsChange: (anchors: CurveAnchor[]) => void;
+    onOffsetChange: (key: string, value: number) => void;
+  }
 
-  export let curveKey: string;
-  export let anchors: CurveAnchor[];
-  export let cfg: CurveConfig;
-  export let stepCount: number;
-  export let defaults: CurveAnchor[];
-  export let offset: number = 0;
-  export let lockedAnchorIndex: number | null = null;
-  export let onAnchorsChange: (anchors: CurveAnchor[]) => void;
-  export let onOffsetChange: (key: string, value: number) => void;
+  let {
+    curveKey,
+    anchors,
+    cfg,
+    stepCount,
+    defaults,
+    offset = 0,
+    lockedAnchorIndex = null,
+    onAnchorsChange,
+    onOffsetChange
+  }: Props = $props();
 </script>
 
 <BezierCurveEditor

package/src/ui/sections/ColumnsSection.svelte

@@ -44,46 +44,46 @@
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Number of columns">Cols</span>
       <input type="range" min="1" max="24" value={$editorState.columns.count}
-        on:pointerdown={() => beginSliderGesture('drag columns count')}
-        on:input={(e) => setColumnsCount(+e.currentTarget.value)} />
+        onpointerdown={() => beginSliderGesture('drag columns count')}
+        oninput={(e) => setColumnsCount(+e.currentTarget.value)} />
       <input class="shadow-slider-input" type="number" min="1" max="24"
         value={$editorState.columns.count}
-        on:change={(e) => setColumnsCount(+e.currentTarget.value)} />
+        onchange={(e) => setColumnsCount(+e.currentTarget.value)} />
       <span class="shadow-slider-unit"></span>
     </div>
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Maximum content width">Max-Width</span>
       <input type="range" min="480" max="2560" step="10" value={$editorState.columns.maxWidth}
-        on:pointerdown={() => beginSliderGesture('drag columns max-width')}
-        on:input={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
+        onpointerdown={() => beginSliderGesture('drag columns max-width')}
+        oninput={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
       <input class="shadow-slider-input columns-input-wide" type="number" min="320" max="2560"
         value={$editorState.columns.maxWidth}
-        on:change={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
+        onchange={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Space between columns">Gutter</span>
       <input type="range" min="0" max="80" value={$editorState.columns.gutter}
-        on:pointerdown={() => beginSliderGesture('drag columns gutter')}
-        on:input={(e) => setColumnsGutter(+e.currentTarget.value)} />
+        onpointerdown={() => beginSliderGesture('drag columns gutter')}
+        oninput={(e) => setColumnsGutter(+e.currentTarget.value)} />
       <input class="shadow-slider-input" type="number" min="0" max="200"
         value={$editorState.columns.gutter}
-        on:change={(e) => setColumnsGutter(+e.currentTarget.value)} />
+        onchange={(e) => setColumnsGutter(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Outer page margin (side gutters)">Margin</span>
       <input type="range" min="0" max="200" value={$editorState.columns.margin}
-        on:pointerdown={() => beginSliderGesture('drag columns margin')}
-        on:input={(e) => setColumnsMargin(+e.currentTarget.value)} />
+        onpointerdown={() => beginSliderGesture('drag columns margin')}
+        oninput={(e) => setColumnsMargin(+e.currentTarget.value)} />
       <input class="shadow-slider-input columns-input-wide" type="number" min="0" max="400"
         value={$editorState.columns.margin}
-        on:change={(e) => setColumnsMargin(+e.currentTarget.value)} />
+        onchange={(e) => setColumnsMargin(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
 
     <div class="columns-controls-footer">
-      <button class="columns-reset" on:click={resetColumns} title="Restore values from when this editor session opened">
+      <button class="columns-reset" onclick={resetColumns} title="Restore values from when this editor session opened">
         <i class="fas fa-rotate-left"></i>
         Reset to initial
       </button>

package/src/ui/sections/GradientsSection.svelte

@@ -7,16 +7,19 @@
    * direction, kind switch) lives in <GradientEditor>; this section is a
    * thin grid that toggles which gradient is being edited.
    */
-  import { createEventDispatcher } from 'svelte';
   import { editorState } from '../../lib/editorStore';
   import GradientEditor from '../GradientEditor.svelte';
 
-  export let copiedVar: string | null = null;
+  interface Props {
+    copiedVar?: string | null;
+    oncopy?: (variable: string) => void;
+  }
+
+  let { copiedVar = null, oncopy }: Props = $props();
 
-  const dispatch = createEventDispatcher<{ copy: string }>();
-  function copy(v: string) { dispatch('copy', v); }
+  function copy(v: string) { oncopy?.(v); }
 
-  let editingGradient: string | null = null;
+  let editingGradient: string | null = $state(null);
 </script>
 
 <section class="section" id="gradients">
@@ -30,17 +33,17 @@
           <div class="gradient-box" style="background: var({token.variable});"></div>
         {/if}
         <div class="token-info">
-          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           {#if !isEditing}
-            <button class="gradient-edit-btn" on:click={() => editingGradient = token.variable}>Edit</button>
+            <button class="gradient-edit-btn" onclick={() => editingGradient = token.variable}>Edit</button>
           {/if}
         </div>
         {#if isEditing}
           <div class="gradient-editor-host">
             <GradientEditor
               variable={token.variable}
-              on:save={() => editingGradient = null}
-              on:cancel={() => editingGradient = null}
+              onsave={() => editingGradient = null}
+              oncancel={() => editingGradient = null}
             />
           </div>
         {/if}

package/src/ui/sections/OverlaysSection.svelte

@@ -6,16 +6,19 @@
    * rgba values out to :root, so this component only orchestrates mutations
    * and reads derived display state.
    */
-  import { createEventDispatcher } from 'svelte';
   import { editorState, mutate, beginSliderGesture } from '../../lib/editorStore';
   import type { OverlayToken, OverlayChannelGlobals, EditorState } from '../../lib/editorTypes';
 
-  export let copiedVar: string | null = null;
+  interface Props {
+    copiedVar?: string | null;
+    oncopy?: (variable: string) => void;
+  }
+
+  let { copiedVar = null, oncopy }: Props = $props();
 
-  const dispatch = createEventDispatcher<{ copy: string }>();
-  function copy(v: string) { dispatch('copy', v); }
+  function copy(v: string) { oncopy?.(v); }
 
-  let editingOverlay: string | null = null;
+  let editingOverlay: string | null = $state(null);
 
   function clampNum(v: number, lo: number, hi: number): number {
     return Math.max(lo, Math.min(hi, Math.round(v)));
@@ -117,10 +120,10 @@
           <div class="overlay-swatch" style="background: {getOverlayCss(token)};"></div>
         </div>
         <div class="token-info">
-          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <button class="shadow-edit-btn" on:click={() => editingOverlay = editingOverlay === token.variable ? null : token.variable}>
+        <button class="shadow-edit-btn" onclick={() => editingOverlay = editingOverlay === token.variable ? null : token.variable}>
           {editingOverlay === token.variable ? 'Close' : 'Edit'}
         </button>
         {#if editingOverlay === token.variable}
@@ -128,16 +131,16 @@
             <div class="shadow-slider-row">
               <span class="shadow-slider-label">Opacity</span>
               <input type="range" min="0" max="100" value={Math.round(token.opacity * 100)}
-                on:pointerdown={() => beginSliderGesture(`edit ${token.variable} opacity`)}
-                on:input={(e) => setOverlayTokenOpacity('overlay', i, +e.currentTarget.value / 100)} />
+                onpointerdown={() => beginSliderGesture(`edit ${token.variable} opacity`)}
+                oninput={(e) => setOverlayTokenOpacity('overlay', i, +e.currentTarget.value / 100)} />
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={Math.round(token.opacity * 100)}
-                on:change={(e) => setOverlayTokenOpacity('overlay', i, Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+                onchange={(e) => setOverlayTokenOpacity('overlay', i, Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
               <span class="shadow-slider-unit">%</span>
             </div>
             <div class="shadow-css-output">
               <code>{getOverlayCss(token)}</code>
-              <button class="shadow-copy-btn" on:click={() => copy(getOverlayCss(token))}>
+              <button class="shadow-copy-btn" onclick={() => copy(getOverlayCss(token))}>
                 {copiedVar === getOverlayCss(token) ? 'Copied!' : 'Copy CSS'}
               </button>
             </div>
@@ -159,36 +162,36 @@
               <span class="shadow-slider-label">H</span>
               <div class="slider-track" style="background: {overlayHueGrad($editorState.overlays.globals.overlay)}">
                 <input type="range" min="0" max="360" value={$editorState.overlays.globals.overlay.hue}
-                  on:pointerdown={() => beginSliderGesture('overlay hue')}
-                  on:input={(e) => setOverlayColor('overlay', 'hue', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('overlay hue')}
+                  oninput={(e) => setOverlayColor('overlay', 'hue', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="360"
                 value={$editorState.overlays.globals.overlay.hue}
-                on:change={(e) => setOverlayColor('overlay', 'hue', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('overlay', 'hue', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">&deg;</span>
             </div>
             <div class="global-shadow-row">
               <span class="shadow-slider-label">S</span>
               <div class="slider-track" style="background: {overlaySatGrad($editorState.overlays.globals.overlay)}">
                 <input type="range" min="0" max="100" value={$editorState.overlays.globals.overlay.saturation}
-                  on:pointerdown={() => beginSliderGesture('overlay saturation')}
-                  on:input={(e) => setOverlayColor('overlay', 'saturation', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('overlay saturation')}
+                  oninput={(e) => setOverlayColor('overlay', 'saturation', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={$editorState.overlays.globals.overlay.saturation}
-                on:change={(e) => setOverlayColor('overlay', 'saturation', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('overlay', 'saturation', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">%</span>
             </div>
             <div class="global-shadow-row">
               <span class="shadow-slider-label">L</span>
               <div class="slider-track" style="background: {overlayLightGrad($editorState.overlays.globals.overlay)}">
                 <input type="range" min="0" max="100" value={$editorState.overlays.globals.overlay.lightness}
-                  on:pointerdown={() => beginSliderGesture('overlay lightness')}
-                  on:input={(e) => setOverlayColor('overlay', 'lightness', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('overlay lightness')}
+                  oninput={(e) => setOverlayColor('overlay', 'lightness', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={$editorState.overlays.globals.overlay.lightness}
-                on:change={(e) => setOverlayColor('overlay', 'lightness', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('overlay', 'lightness', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">%</span>
             </div>
           </div>
@@ -198,21 +201,21 @@
         <div class="global-shadow-row">
           <span class="shadow-slider-label">Op. Min</span>
           <input type="range" min="0" max="100" value={Math.round($editorState.overlays.globals.overlay.opacityMin * 100)}
-            on:pointerdown={() => beginSliderGesture('overlay opacity min')}
-            on:input={(e) => setOverlayOpacity('overlay', 'opacityMin', +e.currentTarget.value / 100)} />
+            onpointerdown={() => beginSliderGesture('overlay opacity min')}
+            oninput={(e) => setOverlayOpacity('overlay', 'opacityMin', +e.currentTarget.value / 100)} />
           <input class="shadow-slider-input" type="number" min="0" max="100"
             value={Math.round($editorState.overlays.globals.overlay.opacityMin * 100)}
-            on:change={(e) => setOverlayOpacity('overlay', 'opacityMin', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+            onchange={(e) => setOverlayOpacity('overlay', 'opacityMin', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
           <span class="shadow-slider-unit">%</span>
         </div>
         <div class="global-shadow-row">
           <span class="shadow-slider-label">Op. Max</span>
           <input type="range" min="0" max="100" value={Math.round($editorState.overlays.globals.overlay.opacityMax * 100)}
-            on:pointerdown={() => beginSliderGesture('overlay opacity max')}
-            on:input={(e) => setOverlayOpacity('overlay', 'opacityMax', +e.currentTarget.value / 100)} />
+            onpointerdown={() => beginSliderGesture('overlay opacity max')}
+            oninput={(e) => setOverlayOpacity('overlay', 'opacityMax', +e.currentTarget.value / 100)} />
           <input class="shadow-slider-input" type="number" min="0" max="100"
             value={Math.round($editorState.overlays.globals.overlay.opacityMax * 100)}
-            on:change={(e) => setOverlayOpacity('overlay', 'opacityMax', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+            onchange={(e) => setOverlayOpacity('overlay', 'opacityMax', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
           <span class="shadow-slider-unit">%</span>
         </div>
       </div>
@@ -227,10 +230,10 @@
           <div class="overlay-swatch" style="background: {getOverlayCss(token)};"></div>
         </div>
         <div class="token-info">
-          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <button class="shadow-edit-btn" on:click={() => editingOverlay = editingOverlay === token.variable ? null : token.variable}>
+        <button class="shadow-edit-btn" onclick={() => editingOverlay = editingOverlay === token.variable ? null : token.variable}>
           {editingOverlay === token.variable ? 'Close' : 'Edit'}
         </button>
         {#if editingOverlay === token.variable}
@@ -238,16 +241,16 @@
             <div class="shadow-slider-row">
               <span class="shadow-slider-label">Opacity</span>
               <input type="range" min="0" max="100" value={Math.round(token.opacity * 100)}
-                on:pointerdown={() => beginSliderGesture(`edit ${token.variable} opacity`)}
-                on:input={(e) => setOverlayTokenOpacity('hover', i, +e.currentTarget.value / 100)} />
+                onpointerdown={() => beginSliderGesture(`edit ${token.variable} opacity`)}
+                oninput={(e) => setOverlayTokenOpacity('hover', i, +e.currentTarget.value / 100)} />
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={Math.round(token.opacity * 100)}
-                on:change={(e) => setOverlayTokenOpacity('hover', i, Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+                onchange={(e) => setOverlayTokenOpacity('hover', i, Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
               <span class="shadow-slider-unit">%</span>
             </div>
             <div class="shadow-css-output">
               <code>{getOverlayCss(token)}</code>
-              <button class="shadow-copy-btn" on:click={() => copy(getOverlayCss(token))}>
+              <button class="shadow-copy-btn" onclick={() => copy(getOverlayCss(token))}>
                 {copiedVar === getOverlayCss(token) ? 'Copied!' : 'Copy CSS'}
               </button>
             </div>
@@ -269,36 +272,36 @@
               <span class="shadow-slider-label">H</span>
               <div class="slider-track" style="background: {overlayHueGrad($editorState.overlays.globals.hover)}">
                 <input type="range" min="0" max="360" value={$editorState.overlays.globals.hover.hue}
-                  on:pointerdown={() => beginSliderGesture('hover hue')}
-                  on:input={(e) => setOverlayColor('hover', 'hue', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('hover hue')}
+                  oninput={(e) => setOverlayColor('hover', 'hue', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="360"
                 value={$editorState.overlays.globals.hover.hue}
-                on:change={(e) => setOverlayColor('hover', 'hue', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('hover', 'hue', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">&deg;</span>
             </div>
             <div class="global-shadow-row">
               <span class="shadow-slider-label">S</span>
               <div class="slider-track" style="background: {overlaySatGrad($editorState.overlays.globals.hover)}">
                 <input type="range" min="0" max="100" value={$editorState.overlays.globals.hover.saturation}
-                  on:pointerdown={() => beginSliderGesture('hover saturation')}
-                  on:input={(e) => setOverlayColor('hover', 'saturation', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('hover saturation')}
+                  oninput={(e) => setOverlayColor('hover', 'saturation', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={$editorState.overlays.globals.hover.saturation}
-                on:change={(e) => setOverlayColor('hover', 'saturation', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('hover', 'saturation', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">%</span>
             </div>
             <div class="global-shadow-row">
               <span class="shadow-slider-label">L</span>
               <div class="slider-track" style="background: {overlayLightGrad($editorState.overlays.globals.hover)}">
                 <input type="range" min="0" max="100" value={$editorState.overlays.globals.hover.lightness}
-                  on:pointerdown={() => beginSliderGesture('hover lightness')}
-                  on:input={(e) => setOverlayColor('hover', 'lightness', +e.currentTarget.value)} />
+                  onpointerdown={() => beginSliderGesture('hover lightness')}
+                  oninput={(e) => setOverlayColor('hover', 'lightness', +e.currentTarget.value)} />
               </div>
               <input class="shadow-slider-input" type="number" min="0" max="100"
                 value={$editorState.overlays.globals.hover.lightness}
-                on:change={(e) => setOverlayColor('hover', 'lightness', +e.currentTarget.value)} />
+                onchange={(e) => setOverlayColor('hover', 'lightness', +e.currentTarget.value)} />
               <span class="shadow-slider-unit">%</span>
             </div>
           </div>
@@ -308,21 +311,21 @@
         <div class="global-shadow-row">
           <span class="shadow-slider-label">Op. Min</span>
           <input type="range" min="0" max="100" value={Math.round($editorState.overlays.globals.hover.opacityMin * 100)}
-            on:pointerdown={() => beginSliderGesture('hover opacity min')}
-            on:input={(e) => setOverlayOpacity('hover', 'opacityMin', +e.currentTarget.value / 100)} />
+            onpointerdown={() => beginSliderGesture('hover opacity min')}
+            oninput={(e) => setOverlayOpacity('hover', 'opacityMin', +e.currentTarget.value / 100)} />
           <input class="shadow-slider-input" type="number" min="0" max="100"
             value={Math.round($editorState.overlays.globals.hover.opacityMin * 100)}
-            on:change={(e) => setOverlayOpacity('hover', 'opacityMin', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+            onchange={(e) => setOverlayOpacity('hover', 'opacityMin', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
           <span class="shadow-slider-unit">%</span>
         </div>
         <div class="global-shadow-row">
           <span class="shadow-slider-label">Op. Max</span>
           <input type="range" min="0" max="100" value={Math.round($editorState.overlays.globals.hover.opacityMax * 100)}
-            on:pointerdown={() => beginSliderGesture('hover opacity max')}
-            on:input={(e) => setOverlayOpacity('hover', 'opacityMax', +e.currentTarget.value / 100)} />
+            onpointerdown={() => beginSliderGesture('hover opacity max')}
+            oninput={(e) => setOverlayOpacity('hover', 'opacityMax', +e.currentTarget.value / 100)} />
           <input class="shadow-slider-input" type="number" min="0" max="100"
             value={Math.round($editorState.overlays.globals.hover.opacityMax * 100)}
-            on:change={(e) => setOverlayOpacity('hover', 'opacityMax', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
+            onchange={(e) => setOverlayOpacity('hover', 'opacityMax', Math.min(100, Math.max(0, +e.currentTarget.value)) / 100)} />
           <span class="shadow-slider-unit">%</span>
         </div>
       </div>