@motion-proto/live-tokens 0.3.9 → 0.5.0

package/src/ui/UIPaletteSelector.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { run } from 'svelte/legacy';
+
   import { slide } from 'svelte/transition';
   import { cubicOut, cubicIn } from 'svelte/easing';
   import { resolveAliasChain } from '../lib/tokenRegistry';
@@ -29,13 +30,23 @@
     return name.endsWith('-surface') || name.endsWith('-fill');
   }
 
-  const dispatch = createEventDispatcher();
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
 
-  export let variable: string;
-  export let component: string | undefined = undefined;
-  export let canBeLinked: boolean = false;
-  export let disabled: boolean = false;
-  export let selectionsLocked: boolean = false;
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
 
   type Category = 'palette' | 'surface' | 'border' | 'text';
 
@@ -95,9 +106,9 @@
     { id: 'text', label: 'Text' },
   ];
 
-  let selector: UITokenSelector;
-  let selectedFamily: string | null = null;
-  let selectedTab: Category = 'palette';
+  let selector: UITokenSelector | undefined = $state();
+  let selectedFamily: string | null = $state(null);
+  let selectedTab: Category = $state('palette');
 
   /** Compass-rose layout for the orientation grid. Angles follow the CSS
    *  linear-gradient convention (0° points up, 90° points right). */
@@ -114,24 +125,24 @@
 
   /** Numeric input value. Kept in sync with chosenAngle/token-default by the
    *  reactive block below; user edits flow back through `applyOrientation`. */
-  let angleInput: number = 0;
+  let angleInput: number = $state(0);
 
-  let chosenCategory: Category | null = null;
-  let chosenFamily: string | null = null;
-  let chosenStep: string | null = null;
-  let chosenNone: boolean = false;
-  let chosenGradient: string | null = null;
+  let chosenCategory = $state<Category | null>(null);
+  let chosenFamily = $state<string | null>(null);
+  let chosenStep = $state<string | null>(null);
+  let chosenNone = $state(false);
+  let chosenGradient = $state<string | null>(null);
   /** Per-slot angle override on the chosen linear gradient. Null means
    *  "no override" — the slot writes `var(--gradient-N)` and inherits the
    *  token's natural angle. Non-null means the slot writes a materialized
    *  `linear-gradient(<angle>, <token's stops>)` so the angle is locally
    *  pinned while stop colors keep flowing from the token's `var()` refs. */
-  let chosenAngle: number | null = null;
-  let opacity: number = 100;
+  let chosenAngle = $state<number | null>(null);
+  let opacity: number = $state(100);
   let selfDefaultHex: string = '';
 
-  $: gradientsAllowed = acceptsGradient(variable);
-  $: gradientTokens = $editorState.gradients.tokens;
+  let gradientsAllowed = $derived(acceptsGradient(variable));
+  let gradientTokens = $derived($editorState.gradients.tokens);
 
   function captureSelfDefault() {
     const root = document.documentElement;
@@ -236,8 +247,8 @@
     opacity = Math.max(0, Math.min(100, Math.round(opacity)));
     if (chosenCategory === null || chosenFamily === null || chosenStep === null) return;
     const varName = getVarName(chosenCategory, chosenFamily, chosenStep);
-    selector.writeOverride(buildValue(varName));
-    dispatch('change');
+    selector?.writeOverride(buildValue(varName));
+    onchange?.();
   }
 
   /** Apply (or clear) a per-slot angle override on the chosen linear gradient.
@@ -251,18 +262,18 @@
     const normalized = ((Math.round(nextAngle) % 360) + 360) % 360;
     chosenAngle = normalized;
     if (normalized === token.angle) {
-      selector.writeOverride(chosenGradient);
+      selector?.writeOverride(chosenGradient);
     } else {
-      selector.writeOverride(materializeGradient(token, normalized));
+      selector?.writeOverride(materializeGradient(token, normalized));
     }
-    dispatch('change');
+    onchange?.();
   }
 
   function resetOrientation() {
     if (chosenGradient === null) return;
     chosenAngle = null;
-    selector.writeOverride(chosenGradient);
-    dispatch('change');
+    selector?.writeOverride(chosenGradient);
+    onchange?.();
   }
 
   function isGradientToken(name: string): boolean {
@@ -386,7 +397,7 @@
     chosenNone = false;
     initFromCurrent();
     selectedFamily = null;
-    dispatch('change');
+    onchange?.();
   }
 
   function handleClose() {
@@ -412,10 +423,10 @@
     chosenGradient = null;
     chosenAngle = null;
     opacity = 100;
-    selector.writeOverride('transparent');
+    selector?.writeOverride('transparent');
     selectedFamily = null;
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   function selectSwatch(category: Category, step: string, close: () => void) {
@@ -426,10 +437,10 @@
     chosenCategory = category;
     chosenFamily = selectedFamily;
     chosenStep = step;
-    selector.writeOverride(buildValue(varName));
+    selector?.writeOverride(buildValue(varName));
     selectedFamily = null;
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   // Picking any gradient is a fresh start: any prior angle override is
@@ -444,10 +455,10 @@
     chosenGradient = gradientVar;
     chosenAngle = null;
     opacity = 100;
-    selector.writeOverride(gradientVar);
+    selector?.writeOverride(gradientVar);
     selectedFamily = null;
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   // Re-derive trigger state when the bound `variable` changes (e.g. when a
@@ -455,35 +466,41 @@
   // The wrapper UITokenSelector forwards `var-change` only for the currently
   // bound variable, so prop swaps wouldn't otherwise refresh `chosenCategory`
   // / `chosenFamily` / `chosenStep` and the meta label drifts from the swatch.
-  let lastSeenVariable: string | null = null;
-  $: if (variable !== lastSeenVariable) {
-    lastSeenVariable = variable;
-    initFromCurrent();
-    captureSelfDefault();
-  }
+  let lastSeenVariable: string | null = $state(null);
+  run(() => {
+    if (variable !== lastSeenVariable) {
+      lastSeenVariable = variable;
+      initFromCurrent();
+      captureSelfDefault();
+    }
+  });
 
-  $: chosenGradientToken = chosenGradient ? getGradientToken(chosenGradient) : undefined;
-  $: isLinearGradientChosen = !!chosenGradientToken && chosenGradientToken.type === 'linear';
-  $: effectiveAngle = chosenGradientToken
+  let chosenGradientToken = $derived(chosenGradient ? getGradientToken(chosenGradient) : undefined);
+  let isLinearGradientChosen = $derived(!!chosenGradientToken && chosenGradientToken.type === 'linear');
+  let effectiveAngle = $derived(chosenGradientToken
     ? (chosenAngle ?? chosenGradientToken.angle)
-    : 0;
-  $: angleInput = effectiveAngle;
+    : 0);
+  run(() => {
+    angleInput = effectiveAngle;
+  });
 
-  $: triggerMeta = chosenNone
+  let metaLabel = $derived(chosenNone
     ? 'none'
     : chosenGradient
       ? chosenGradient.replace(/^--/, '') + (chosenAngle !== null ? ` (${effectiveAngle}°)` : '')
       : (chosenCategory && chosenFamily && chosenStep !== null
         ? getVarName(chosenCategory, chosenFamily, chosenStep).replace(/^--/, '') + (opacity < 100 ? ` (${opacity}%)` : '')
-        : '');
+        : ''));
 
-  $: availableTabs = selectedFamily
+  let availableTabs = $derived(selectedFamily
     ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
-    : allCategories;
+    : allCategories);
 
-  $: if (selectedFamily && !availableTabs.find(t => t.id === selectedTab)) {
-    selectedTab = 'palette';
-  }
+  run(() => {
+    if (selectedFamily && !availableTabs.find(t => t.id === selectedTab)) {
+      selectedTab = 'palette';
+    }
+  });
 </script>
 
 <UITokenSelector
@@ -496,125 +513,131 @@
   dropdownMinWidth="14rem"
   dropdownMaxWidth="calc(100vw - 2rem)"
   hideDefaultHeader={!!selectedFamily}
-  on:reset={handleReset}
-  on:close={handleClose}
-  on:var-change={initFromCurrent}
+  onreset={handleReset}
+  onclose={handleClose}
+  onvarChange={initFromCurrent}
 >
-  <div slot="trigger-preview" class="swatch-wrap">
-    <div class="swatch" style="background: var({variable});"></div>
-  </div>
-  <div slot="subheader" class="opacity-control" class:hidden={chosenGradient !== null}>
-    <span class="opacity-label">opacity</span>
-    <input type="range" min="0" max="100" bind:value={opacity} class="opacity-slider" on:input={applyOpacity} />
-    <input type="number" min="0" max="100" bind:value={opacity} class="opacity-input" on:change={applyOpacity} />
-    <span class="opacity-unit">%</span>
-  </div>
-  <svelte:fragment slot="trigger-meta">{triggerMeta}</svelte:fragment>
-
-  <svelte:fragment let:close>
-    {#if selectedFamily === null}
-      <div class="family-list">
-        <button class="family-item" class:active={chosenNone} on:click={() => selectNone(close)}>
-          <div class="family-swatches">
-            <div class="none-swatch"></div>
-          </div>
-          <span class="family-label">None</span>
-        </button>
-        {#each families as fam}
-          <button class="family-item" class:active={!chosenNone && chosenFamily === fam.name} on:click={() => selectFamily(fam.name)}>
+  {#snippet triggerPreview()}
+    <div class="swatch-wrap">
+      <div class="swatch" style="background: var({variable});"></div>
+    </div>
+  {/snippet}
+  {#snippet subheader()}
+    <div  class="opacity-control" class:hidden={chosenGradient !== null}>
+      <span class="opacity-label">opacity</span>
+      <input type="range" min="0" max="100" bind:value={opacity} class="opacity-slider" oninput={applyOpacity} />
+      <input type="number" min="0" max="100" bind:value={opacity} class="opacity-input" onchange={applyOpacity} />
+      <span class="opacity-unit">%</span>
+    </div>
+  {/snippet}
+  {#snippet triggerMeta()}{metaLabel}{/snippet}
+
+  {#snippet children({ close })}
+  
+      {#if selectedFamily === null}
+        <div class="family-list">
+          <button class="family-item" class:active={chosenNone} onclick={() => selectNone(close)}>
             <div class="family-swatches">
-              <div class="mini-swatch" style="background: var(--color-{fam.name}-300);"></div>
-              <div class="mini-swatch" style="background: var(--color-{fam.name}-500);"></div>
-              <div class="mini-swatch" style="background: var(--color-{fam.name}-700);"></div>
+              <div class="none-swatch"></div>
             </div>
-            <span class="family-label">{fam.label}</span>
-            <i class="fas fa-chevron-right family-arrow"></i>
+            <span class="family-label">None</span>
           </button>
-        {/each}
-        {#if gradientsAllowed && gradientTokens.length > 0}
-          <div class="family-divider">Gradients</div>
-          {#each gradientTokens as g}
-            <button class="family-item" class:active={chosenGradient === g.variable} on:click={() => selectGradient(g.variable, close)}>
+          {#each families as fam}
+            <button class="family-item" class:active={!chosenNone && chosenFamily === fam.name} onclick={() => selectFamily(fam.name)}>
               <div class="family-swatches">
-                <div class="gradient-swatch" style="background: var({g.variable});"></div>
+                <div class="mini-swatch" style="background: var(--color-{fam.name}-300);"></div>
+                <div class="mini-swatch" style="background: var(--color-{fam.name}-500);"></div>
+                <div class="mini-swatch" style="background: var(--color-{fam.name}-700);"></div>
               </div>
-              <span class="family-label">Gradient {g.variable.replace(/^--gradient-/, '')}</span>
-            </button>
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <button class="dropdown-back" on:click={backToFamilies}>
-        <i class="fas fa-chevron-left"></i>
-        <span>{families.find(f => f.name === selectedFamily)?.label}</span>
-      </button>
-
-      <div class="tab-bar">
-        {#each availableTabs as tab}
-          <button
-            class="tab-btn"
-            class:selected={selectedTab === tab.id}
-            class:assigned={chosenCategory === tab.id && chosenFamily === selectedFamily}
-            on:click={() => selectedTab = tab.id}
-          >{tab.label}</button>
-        {/each}
-      </div>
-
-      {#if selectedTab === 'palette'}
-        <div class="step-grid">
-          {#each paletteSteps as step}
-            <button
-              class="step-item"
-              class:active={chosenCategory === 'palette' && chosenFamily === selectedFamily && chosenStep === step}
-              on:click={() => selectSwatch('palette', step, close)}
-            >
-              <div class="step-swatch" style="background: var(--color-{selectedFamily}-{step});"></div>
-              <span class="step-label">{step}</span>
+              <span class="family-label">{fam.label}</span>
+              <i class="fas fa-chevron-right family-arrow"></i>
             </button>
           {/each}
+          {#if gradientsAllowed && gradientTokens.length > 0}
+            <div class="family-divider">Gradients</div>
+            {#each gradientTokens as g}
+              <button class="family-item" class:active={chosenGradient === g.variable} onclick={() => selectGradient(g.variable, close)}>
+                <div class="family-swatches">
+                  <div class="gradient-swatch" style="background: var({g.variable});"></div>
+                </div>
+                <span class="family-label">Gradient {g.variable.replace(/^--gradient-/, '')}</span>
+              </button>
+            {/each}
+          {/if}
         </div>
-      {:else if selectedTab === 'surface'}
-        <div class="step-grid">
-          {#each surfaceSteps as step}
-            <button
-              class="step-item"
-              class:active={chosenCategory === 'surface' && chosenFamily === selectedFamily && chosenStep === step.key}
-              on:click={() => selectSwatch('surface', step.key, close)}
-            >
-              <div class="step-swatch" style="background: {previewBg('surface', selectedFamily, step.key)};"></div>
-              <span class="step-label">{step.label}</span>
-            </button>
-          {/each}
-        </div>
-      {:else if selectedTab === 'border'}
-        <div class="step-grid">
-          {#each borderSteps as step}
-            <button
-              class="step-item"
-              class:active={chosenCategory === 'border' && chosenFamily === selectedFamily && chosenStep === step.key}
-              on:click={() => selectSwatch('border', step.key, close)}
-            >
-              <div class="step-swatch" style="background: {previewBg('border', selectedFamily, step.key)};"></div>
-              <span class="step-label">{step.label}</span>
-            </button>
-          {/each}
-        </div>
-      {:else if selectedTab === 'text'}
-        <div class="step-grid">
-          {#each textSteps as step}
+      {:else}
+        <button class="dropdown-back" onclick={backToFamilies}>
+          <i class="fas fa-chevron-left"></i>
+          <span>{families.find(f => f.name === selectedFamily)?.label}</span>
+        </button>
+
+        <div class="tab-bar">
+          {#each availableTabs as tab}
             <button
-              class="step-item"
-              class:active={chosenCategory === 'text' && chosenFamily === selectedFamily && chosenStep === step.key}
-              on:click={() => selectSwatch('text', step.key, close)}
-            >
-              <div class="step-swatch" style="background: {previewBg('text', selectedFamily, step.key)};"></div>
-              <span class="step-label">{step.label}</span>
-            </button>
+              class="tab-btn"
+              class:selected={selectedTab === tab.id}
+              class:assigned={chosenCategory === tab.id && chosenFamily === selectedFamily}
+              onclick={() => selectedTab = tab.id}
+            >{tab.label}</button>
           {/each}
         </div>
+
+        {#if selectedTab === 'palette'}
+          <div class="step-grid">
+            {#each paletteSteps as step}
+              <button
+                class="step-item"
+                class:active={chosenCategory === 'palette' && chosenFamily === selectedFamily && chosenStep === step}
+                onclick={() => selectSwatch('palette', step, close)}
+              >
+                <div class="step-swatch" style="background: var(--color-{selectedFamily}-{step});"></div>
+                <span class="step-label">{step}</span>
+              </button>
+            {/each}
+          </div>
+        {:else if selectedTab === 'surface'}
+          <div class="step-grid">
+            {#each surfaceSteps as step}
+              <button
+                class="step-item"
+                class:active={chosenCategory === 'surface' && chosenFamily === selectedFamily && chosenStep === step.key}
+                onclick={() => selectSwatch('surface', step.key, close)}
+              >
+                <div class="step-swatch" style="background: {previewBg('surface', selectedFamily, step.key)};"></div>
+                <span class="step-label">{step.label}</span>
+              </button>
+            {/each}
+          </div>
+        {:else if selectedTab === 'border'}
+          <div class="step-grid">
+            {#each borderSteps as step}
+              <button
+                class="step-item"
+                class:active={chosenCategory === 'border' && chosenFamily === selectedFamily && chosenStep === step.key}
+                onclick={() => selectSwatch('border', step.key, close)}
+              >
+                <div class="step-swatch" style="background: {previewBg('border', selectedFamily, step.key)};"></div>
+                <span class="step-label">{step.label}</span>
+              </button>
+            {/each}
+          </div>
+        {:else if selectedTab === 'text'}
+          <div class="step-grid">
+            {#each textSteps as step}
+              <button
+                class="step-item"
+                class:active={chosenCategory === 'text' && chosenFamily === selectedFamily && chosenStep === step.key}
+                onclick={() => selectSwatch('text', step.key, close)}
+              >
+                <div class="step-swatch" style="background: {previewBg('text', selectedFamily, step.key)};"></div>
+                <span class="step-label">{step.label}</span>
+              </button>
+            {/each}
+          </div>
+        {/if}
       {/if}
-    {/if}
-  </svelte:fragment>
+    
+  {/snippet}
 </UITokenSelector>
 
 <!--
@@ -640,7 +663,7 @@
             class="dir-btn"
             class:active={d.angle === ((effectiveAngle % 360) + 360) % 360}
             style="grid-column: {d.col}; grid-row: {d.row};"
-            on:click={() => applyOrientation(d.angle)}
+            onclick={() => applyOrientation(d.angle)}
             title="{d.label} ({d.angle}°)"
           >{d.glyph}</button>
         {/each}
@@ -652,7 +675,7 @@
           max="359"
           class="angle-input"
           bind:value={angleInput}
-          on:change={() => applyOrientation(angleInput)}
+          onchange={() => applyOrientation(angleInput)}
         />
         <span class="angle-unit">°</span>
       </div>
@@ -660,7 +683,7 @@
         type="button"
         class="orientation-reset"
         class:active={chosenAngle !== null}
-        on:click={resetOrientation}
+        onclick={resetOrientation}
         disabled={chosenAngle === null}
         title="Reset to gradient default"
       >
@@ -739,6 +762,7 @@
     font-family: var(--ui-font-mono);
     text-align: right;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   .opacity-input::-webkit-inner-spin-button,
@@ -1069,6 +1093,7 @@
     font-family: var(--ui-font-mono);
     text-align: right;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   .angle-input::-webkit-inner-spin-button,

package/src/ui/UIRadio.svelte

@@ -8,13 +8,28 @@
     <UIRadio bind:group={selected} value="beta" disabled />
 -->
 <script lang="ts">
-  /** Value this radio represents within its group. */
-  export let value: string;
-  /** Two-way bound group selection. The radio is checked when `group === value`. */
-  export let group: string;
-  /** Optional native name; omit to let Svelte's `bind:group` wire it automatically. */
-  export let name: string = '';
-  export let disabled: boolean = false;
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
+  
+  
+  
+  interface Props {
+    /** Value this radio represents within its group. */
+    value: string;
+    /** Two-way bound group selection. The radio is checked when `group === value`. */
+    group: string;
+    /** Optional native name; omit to let Svelte's `bind:group` wire it automatically. */
+    name?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    value,
+    group = $bindable(),
+    name = '',
+    disabled = false
+  }: Props = $props();
 </script>
 
 <input
@@ -24,7 +39,7 @@
   {name}
   {disabled}
   bind:group
-  on:change
+  onchange={bubble('change')}
 />
 
 <style>

package/src/ui/UIRadioGroup.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let value: string;
-  export let options: ReadonlyArray<{ value: string; label: string }>;
-  export let name: string;
+  interface Props {
+    value: string;
+    options: ReadonlyArray<{ value: string; label: string }>;
+    name: string;
+    onchange?: (value: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let { value = $bindable(), options, name, onchange }: Props = $props();
 
   function select(v: string) {
     if (v === value) return;
     value = v;
-    dispatch('change', v);
+    onchange?.(v);
   }
 </script>
 
@@ -22,7 +23,7 @@
         {name}
         value={opt.value}
         checked={value === opt.value}
-        on:change={() => select(opt.value)}
+        onchange={() => select(opt.value)}
       />
       <span>{opt.label}</span>
     </label>