@motion-proto/live-tokens 0.3.9 → 0.5.0

package/src/ui/UIOptionList.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-  /** When set, the list becomes a CSS grid using these columns; rows are
+  
+  interface Props {
+    /** When set, the list becomes a CSS grid using these columns; rows are
    *  expected to use `display: grid; grid-template-columns: subgrid` so cells
    *  align across rows. */
-  export let gridColumns: string = '';
+    gridColumns?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { gridColumns = '', children }: Props = $props();
 </script>
 
 <div
@@ -10,7 +16,7 @@
   class:grid={!!gridColumns}
   style:grid-template-columns={gridColumns || null}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>

package/src/ui/UIPaddingSelector.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { run } from 'svelte/legacy';
+
+  import { onMount, onDestroy } from 'svelte';
   import { fade, fly, slide } from 'svelte/transition';
   import { cubicOut, cubicIn, cubicInOut } from 'svelte/easing';
   import UITokenSelector from './UITokenSelector.svelte';
@@ -19,19 +21,31 @@
   import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
   import UILinkToggle from './UILinkToggle.svelte';
 
-  const dispatch = createEventDispatcher();
-
-  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;
-  /** When 'sides', renders the per-side rows alongside the link/merge header.
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    /** When 'sides', renders the per-side rows alongside the link/merge header.
       The header occupies cols 2-3 of the parent token-row (sharing row 1 with
       TokenLayout's .token-label) and the side rows fill cols 1-3 of row 2. */
-  export let mode: 'single' | 'sides' = 'single';
-  /** When false, hide the split-to-sides affordance (e.g. for non-box spacing like gap). */
-  export let splittable: boolean = true;
+    mode?: 'single' | 'sides';
+    /** When false, hide the split-to-sides affordance (e.g. for non-box spacing like gap). */
+    splittable?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    mode = 'single',
+    splittable = true,
+    onchange,
+  }: Props = $props();
 
   type Side = 'top' | 'right' | 'bottom' | 'left';
   const SIDES: readonly Side[] = ['top', 'right', 'bottom', 'left'];
@@ -131,10 +145,10 @@
     }
   }
 
-  let chosenKey: string | null = null;
-  let resolvedSize = '';
-  let sideKeys: Record<Side, string | null> = { top: null, right: null, bottom: null, left: null };
-  let sideResolved: Record<Side, string> = { top: '', right: '', bottom: '', left: '' };
+  let chosenKey: string | null = $state(null);
+  let resolvedSize = $state('');
+  let sideKeys: Record<Side, string | null> = $state({ top: null, right: null, bottom: null, left: null });
+  let sideResolved: Record<Side, string> = $state({ top: '', right: '', bottom: '', left: '' });
 
   function refreshFromState() {
     chosenKey = parseKey(readAlias(variable));
@@ -152,31 +166,31 @@
   function selectSingle(key: string, close: () => void) {
     writeAliasLinked(variable, tokenForKey(key));
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   function selectSide(s: Side, key: string, close: () => void) {
     writeAliasLinked(sideVar(s), tokenForKey(key));
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   function handleResetAll() {
     for (const s of SIDES) writeAliasLinked(sideVar(s), null);
     writeAliasLinked(variable, null);
-    dispatch('change');
+    onchange?.();
   }
 
   function handleResetSide(s: Side) {
     writeAliasLinked(sideVar(s), null);
-    dispatch('change');
+    onchange?.();
   }
 
   function splitToSides() {
     if (disabled) return;
     const seed = readAlias(variable) || tokenForKey('4');
     for (const s of SIDES) writeAliasLinked(sideVar(s), seed);
-    dispatch('change');
+    onchange?.();
   }
 
   function mergeToSingle() {
@@ -184,7 +198,7 @@
     const seed = readAlias(sideVar('top')) || readAlias(variable);
     if (seed && !readAlias(variable)) writeAliasLinked(variable, seed);
     for (const s of SIDES) writeAliasLinked(sideVar(s), null);
-    dispatch('change');
+    onchange?.();
   }
 
   function handleVarChange() {
@@ -202,32 +216,32 @@
 
   // Track `variable` alongside `$editorState` so a VariantGroup tabs view that
   // reuses this selector across states refreshes when the bound prop swaps.
-  $: { variable; if ($editorState) refreshFromState(); }
+  run(() => { variable; if ($editorState) refreshFromState(); });
 
-  $: activeKey = chosenKey ?? (options.find((o) => o.size === resolvedSize)?.key ?? null);
-  $: activeLabel = options.find((o) => o.key === activeKey)?.label ?? '';
-  $: sideActiveKey = {
+  let activeKey = $derived(chosenKey ?? (options.find((o) => o.size === resolvedSize)?.key ?? null));
+  let activeLabel = $derived(options.find((o) => o.key === activeKey)?.label ?? '');
+  let sideActiveKey = $derived({
     top: sideKeys.top ?? (options.find((o) => o.size === sideResolved.top)?.key ?? null),
     right: sideKeys.right ?? (options.find((o) => o.size === sideResolved.right)?.key ?? null),
     bottom: sideKeys.bottom ?? (options.find((o) => o.size === sideResolved.bottom)?.key ?? null),
     left: sideKeys.left ?? (options.find((o) => o.size === sideResolved.left)?.key ?? null),
-  } as Record<Side, string | null>;
-  $: sideLabels = {
+  } as Record<Side, string | null>);
+  let sideLabels = $derived({
     top: options.find((o) => o.key === sideActiveKey.top)?.label ?? '',
     right: options.find((o) => o.key === sideActiveKey.right)?.label ?? '',
     bottom: options.find((o) => o.key === sideActiveKey.bottom)?.label ?? '',
     left: options.find((o) => o.key === sideActiveKey.left)?.label ?? '',
-  } as Record<Side, string>;
+  } as Record<Side, string>);
 
   // Linkage state for the parent token. The split fieldset is a single
   // linkage unit — peers either share the parent (and their per-side state
   // mirrors via `writeAliasLinked`) or one peer has detached. Mirrors the
   // pop-bar/lock-toggle vocabulary used by `UITokenSelector` so the visual
   // and interaction language is the same at both scales.
-  $: hasParentSiblings = canBeLinked && component && $editorState
+  let hasParentSiblings = $derived(canBeLinked && component && $editorState
     ? getComponentPropertySiblings(component, variable).length >= 2
-    : false;
-  $: showLinkUI = canBeLinked && !!component && hasParentSiblings;
+    : false);
+  let showLinkUI = $derived(canBeLinked && !!component && hasParentSiblings);
   /** $editorState is referenced directly so this re-evaluates on every store
    *  update. isComponentPropertyLinked reads `get(store)` internally — Svelte
    *  can't see that as a dependency. Without the explicit reference, an
@@ -235,13 +249,13 @@
    *  would not re-run this expression: Svelte's $$invalidate skips marking
    *  a boolean dirty when the new value equals the old, so the dirty bit
    *  never propagates to isLinkedParent. */
-  $: isLinkedParent = !!$editorState
+  let isLinkedParent = $derived(!!$editorState
     && showLinkUI
     && !!component
-    && isComponentPropertyLinked(component, variable);
+    && isComponentPropertyLinked(component, variable));
 
-  let relinkOpen = false;
-  let relinkCandidates: { variable: string; alias: string }[] = [];
+  let relinkOpen = $state(false);
+  let relinkCandidates: { variable: string; alias: string }[] = $state([]);
 
   /** Adopt one peer's entire padding block (parent + four sides) onto every
    *  currently-linked peer. Padding is treated as a single shared unit — when
@@ -293,7 +307,7 @@
     if (!showLinkUI || !component) return;
     if (isLinkedParent) {
       unlinkComponentProperty(component, variable);
-      dispatch('change');
+      onchange?.();
       return;
     }
     const slice = $editorState.components[component];
@@ -307,7 +321,7 @@
       const currentValue = slice.aliases[variable];
       if (currentValue) {
         adoptBlockFromPeer(variable);
-        dispatch('change');
+        onchange?.();
       }
       return;
     }
@@ -323,20 +337,20 @@
         ? definedCandidates[0].variable
         : variable;
       adoptBlockFromPeer(sourcePeer);
-      dispatch('change');
+      onchange?.();
       return;
     }
     relinkCandidates = candidates;
     relinkOpen = true;
   }
 
-  function handleRelinkConfirm(e: CustomEvent<{ alias: string }>) {
+  function handleRelinkConfirm(payload: { alias: string }) {
     if (!component) return;
     // Find the peer whose parent alias matches the chosen one — its full
     // block (split state + side values) becomes canonical.
-    const sourcePeer = relinkCandidates.find((c) => c.alias === e.detail.alias)?.variable ?? variable;
+    const sourcePeer = relinkCandidates.find((c) => c.alias === payload.alias)?.variable ?? variable;
     adoptBlockFromPeer(sourcePeer);
-    dispatch('change');
+    onchange?.();
     relinkOpen = false;
   }
 
@@ -367,14 +381,14 @@
   >
     {#if showLinkUI}
       <div class="link-toggle-wrap">
-        <UILinkToggle linked={isLinkedParent} on:toggle={toggleLinkPaddingGroup} />
+        <UILinkToggle linked={isLinkedParent} ontoggle={toggleLinkPaddingGroup} />
         {#if relinkOpen && component}
           <UIRelinkConfirmPopover
             candidates={relinkCandidates}
             initialVariable={variable}
             prefixToStrip={`--${component}-`}
-            on:confirm={handleRelinkConfirm}
-            on:cancel={handleRelinkCancel}
+            onconfirm={handleRelinkConfirm}
+            oncancel={handleRelinkCancel}
           />
         {/if}
       </div>
@@ -382,7 +396,7 @@
     <button
       type="button"
       class="merge-btn"
-      on:click={mergeToSingle}
+      onclick={mergeToSingle}
       title="Use the same value for all sides"
       disabled={disabled || selectionsLocked}
     >
@@ -405,25 +419,31 @@
         canBeLinked={false}
         {disabled}
         {selectionsLocked}
-        on:reset={() => handleResetSide(s)}
-        on:var-change={handleVarChange}
+        onreset={() => handleResetSide(s)}
+        onvarChange={handleVarChange}
       >
-        <svelte:fragment slot="trigger-title">{sideLabels[s] || '—'}</svelte:fragment>
-        <svelte:fragment slot="trigger-meta">{sideResolved[s] || '—'}</svelte:fragment>
-
-        <svelte:fragment let:close>
-          <UIOptionList>
-            {#each options as opt}
-              <UIOptionItem
-                active={sideActiveKey[s] === opt.key}
-                on:click={() => selectSide(s, opt.key, close)}
-              >
-                <svelte:fragment slot="label">{opt.label}</svelte:fragment>
-                <svelte:fragment slot="meta">{opt.size}</svelte:fragment>
-              </UIOptionItem>
-            {/each}
-          </UIOptionList>
-        </svelte:fragment>
+        {#snippet triggerTitle()}{sideLabels[s] || '—'}{/snippet}
+        {#snippet triggerMeta()}{sideResolved[s] || '—'}{/snippet}
+
+        {#snippet children({ close })}
+              
+            <UIOptionList>
+              {#each options as opt}
+                <UIOptionItem
+                  active={sideActiveKey[s] === opt.key}
+                  onclick={() => selectSide(s, opt.key, close)}
+                >
+                  {#snippet label()}
+                                {opt.label}
+                              {/snippet}
+                  {#snippet meta()}
+                                {opt.size}
+                              {/snippet}
+                </UIOptionItem>
+              {/each}
+            </UIOptionList>
+          
+              {/snippet}
       </UITokenSelector>
     {/each}
   </div>
@@ -450,30 +470,36 @@
       {canBeLinked}
       {disabled}
       {selectionsLocked}
-      on:reset={handleResetAll}
-      on:var-change={handleVarChange}
+      onreset={handleResetAll}
+      onvarChange={handleVarChange}
     >
-      <svelte:fragment slot="trigger-title">{activeLabel || '—'}</svelte:fragment>
-
-      <svelte:fragment let:close>
-        <UIOptionList>
-          {#each options as opt}
-            <UIOptionItem
-              active={activeKey === opt.key}
-              on:click={() => selectSingle(opt.key, close)}
-            >
-              <svelte:fragment slot="label">{opt.label}</svelte:fragment>
-              <svelte:fragment slot="meta">{opt.size}</svelte:fragment>
-            </UIOptionItem>
-          {/each}
-        </UIOptionList>
-      </svelte:fragment>
+      {#snippet triggerTitle()}{activeLabel || '—'}{/snippet}
+
+      {#snippet children({ close })}
+          
+          <UIOptionList>
+            {#each options as opt}
+              <UIOptionItem
+                active={activeKey === opt.key}
+                onclick={() => selectSingle(opt.key, close)}
+              >
+                {#snippet label()}
+                            {opt.label}
+                          {/snippet}
+                {#snippet meta()}
+                            {opt.size}
+                          {/snippet}
+              </UIOptionItem>
+            {/each}
+          </UIOptionList>
+        
+          {/snippet}
     </UITokenSelector>
     {#if splittable}
       <button
         type="button"
         class="split-btn"
-        on:click={splitToSides}
+        onclick={splitToSides}
         title="Set each side independently"
         disabled={disabled || selectionsLocked}
         in:fly|local={{ x: 24, opacity: 1, duration: t(220), delay: t(320), easing: cubicOut }}