@motion-proto/live-tokens 0.3.9 → 0.5.0

package/src/ui/UIRelinkConfirmPopover.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+
+  const bubble = createBubbler();
+  import { onMount, onDestroy } from 'svelte';
   import UIRadio from './UIRadio.svelte';
   import { keepInViewport } from './keepInViewport';
 
   type Candidate = { variable: string; alias: string };
 
-  export let candidates: Candidate[];
-  /** Variable whose lock was clicked — its alias is the default selection. */
-  export let initialVariable: string;
-  /** Component prefix to strip when rendering source labels. */
-  export let prefixToStrip: string = '';
+  interface Props {
+    candidates: Candidate[];
+    /** Variable whose lock was clicked — its alias is the default selection. */
+    initialVariable: string;
+    /** Component prefix to strip when rendering source labels. */
+    prefixToStrip?: string;
+    onconfirm?: (payload: { alias: string }) => void;
+    oncancel?: () => void;
+  }
 
-  const dispatch = createEventDispatcher<{ confirm: { alias: string }; cancel: void }>();
+  let { candidates, initialVariable, prefixToStrip = '', onconfirm, oncancel }: Props = $props();
 
   type Option = { alias: string; sources: string[] };
 
@@ -31,17 +38,19 @@
     return [...seen.values()];
   }
 
-  $: options = distinctOptions(candidates, initialVariable);
-  let selected = '';
-  $: if (selected === '' && options.length > 0) selected = options[0].alias;
+  let options = $derived(distinctOptions(candidates, initialVariable));
+  let selected = $state('');
+  run(() => {
+    if (selected === '' && options.length > 0) selected = options[0].alias;
+  });
 
   function handleConfirm() {
     if (!selected) return;
-    dispatch('confirm', { alias: selected });
+    onconfirm?.({ alias: selected });
   }
 
   function handleCancel() {
-    dispatch('cancel');
+    oncancel?.();
   }
 
   function handleKeydown(e: KeyboardEvent) {
@@ -55,7 +64,7 @@
     }
   }
 
-  let popoverEl: HTMLDivElement;
+  let popoverEl: HTMLDivElement | undefined = $state();
 
   onMount(() => {
     popoverEl?.focus();
@@ -67,6 +76,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="ui-relink-popover"
   role="dialog"
@@ -74,7 +84,7 @@
   tabindex="-1"
   bind:this={popoverEl}
   use:keepInViewport
-  on:click|stopPropagation
+  onclick={stopPropagation(bubble('click'))}
 >
   <div class="ui-relink-header">
     {#if options.length > 1}
@@ -99,8 +109,8 @@
   </div>
 
   <div class="ui-relink-footer">
-    <button type="button" class="ui-relink-btn ui-relink-btn-cancel" on:click={handleCancel}>Cancel</button>
-    <button type="button" class="ui-relink-btn ui-relink-btn-confirm" on:click={handleConfirm}>Link</button>
+    <button type="button" class="ui-relink-btn ui-relink-btn-cancel" onclick={handleCancel}>Cancel</button>
+    <button type="button" class="ui-relink-btn ui-relink-btn-confirm" onclick={handleConfirm}>Link</button>
   </div>
 </div>
 

package/src/ui/UITokenSelector.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
   import type { CssVarRef } from '../lib/editorTypes';
   import {
@@ -17,47 +18,85 @@
   import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
   import { keepInViewport } from './keepInViewport';
 
-  const dispatch = createEventDispatcher<{
-    change: void;
-    reset: void;
-    open: void;
-    close: void;
-    'var-change': void;
-  }>();
-
-  export let variable: string;
-  /** When set, writes persist through the editor store under this component. */
-  export let component: string | undefined = undefined;
-  /** When true, render a link toggle that lets the user share this value across all sibling variants. */
-  export let canBeLinked: boolean = false;
-  /** Minimum width of the dropdown panel. */
-  export let dropdownMinWidth: string = '14rem';
-  /** Max width of the dropdown panel (useful for grids). */
-  export let dropdownMaxWidth: string = '';
-  /** When true, the default dropdown header (variable name + reset) is omitted. */
-  export let hideDefaultHeader: boolean = false;
-  /** When true, the trigger becomes non-interactive and visually dimmed. */
-  export let disabled: boolean = false;
-  /** When true, the trigger opens normally but the dropdown's selection area is
-   *  dimmed and non-interactive. The lock toggle in the header stays active so
-   *  the user can re-engage editing by re-linking. Used by the linked block to
-   *  make the row openable even when currently unshared. */
-  export let selectionsLocked: boolean = false;
-
-  let open = false;
+  type DropdownContext = { close: () => void; handleReset: () => void };
+
+  interface Props {
+    variable: string;
+    /** When set, writes persist through the editor store under this component. */
+    component?: string | undefined;
+    /** When true, render a link toggle that lets the user share this value across all sibling variants. */
+    canBeLinked?: boolean;
+    /** Minimum width of the dropdown panel. */
+    dropdownMinWidth?: string;
+    /** Max width of the dropdown panel (useful for grids). */
+    dropdownMaxWidth?: string;
+    /** When true, the default dropdown header (variable name + reset) is omitted. */
+    hideDefaultHeader?: boolean;
+    /** When true, the trigger becomes non-interactive and visually dimmed. */
+    disabled?: boolean;
+    /** When true, the trigger opens normally but the dropdown's selection area is
+     *  dimmed and non-interactive. The lock toggle in the header stays active so
+     *  the user can re-engage editing by re-linking. Used by the linked block to
+     *  make the row openable even when currently unshared. */
+    selectionsLocked?: boolean;
+    /** Optional preview rendered before the trigger text (e.g. swatch). Renamed from `slot="trigger-preview"` in 0.5.0. */
+    triggerPreview?: Snippet;
+    /** Optional full trigger text replacement. Falls back to `triggerTitle`. Renamed from `slot="trigger-text"` in 0.5.0. */
+    triggerText?: Snippet;
+    /** Optional trigger title text. Renamed from `slot="trigger-title"` in 0.5.0. */
+    triggerTitle?: Snippet;
+    /** Optional meta text rendered after the trigger. Renamed from `slot="trigger-meta"` in 0.5.0. */
+    triggerMeta?: Snippet;
+    /** Optional dropdown header replacement. */
+    header?: Snippet;
+    /** Optional dropdown content above the selections. */
+    subheader?: Snippet;
+    /** Dropdown body content; receives `{ close, handleReset }`. */
+    children?: Snippet<[DropdownContext]>;
+    onchange?: () => void;
+    onreset?: () => void;
+    onopen?: () => void;
+    onclose?: () => void;
+    onvarChange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    dropdownMinWidth = '14rem',
+    dropdownMaxWidth = '',
+    hideDefaultHeader = false,
+    disabled = false,
+    selectionsLocked = false,
+    triggerPreview,
+    triggerText,
+    triggerTitle,
+    triggerMeta,
+    header,
+    subheader,
+    children,
+    onchange,
+    onreset,
+    onopen,
+    onclose,
+    onvarChange,
+  }: Props = $props();
+
+  let open = $state(false);
   let container: HTMLElement;
-  let relinkOpen = false;
-  let relinkCandidates: { variable: string; alias: string }[] = [];
+  let relinkOpen = $state(false);
+  let relinkCandidates: { variable: string; alias: string }[] = $state([]);
 
-  $: isLinkedFromData = canBeLinked && component && $editorState
+  let isLinkedFromData = $derived(canBeLinked && component && $editorState
     ? isComponentPropertyLinked(component, variable)
-    : false;
-  $: isLinkedDisplay = canBeLinked && !!component && isLinkedFromData;
-  $: peerCount = canBeLinked && component && $editorState
+    : false);
+  let isLinkedDisplay = $derived(canBeLinked && !!component && isLinkedFromData);
+  let peerCount = $derived(canBeLinked && component && $editorState
     ? getComponentPropertySiblings(component, variable).length
-    : 0;
-  $: hasSiblings = peerCount >= 2;
-  $: showLinkToggle = canBeLinked && !!component && hasSiblings;
+    : 0);
+  let hasSiblings = $derived(peerCount >= 2);
+  let showLinkToggle = $derived(canBeLinked && !!component && hasSiblings);
 
   /** Persist a semantic CSS-var reference (or clear it when null). */
   export function writeOverride(semanticName: string | null): void {
@@ -90,22 +129,25 @@
   export function close() {
     if (!open) return;
     open = false;
-    dispatch('close');
+    onclose?.();
   }
 
   function toggle() {
     if (disabled) return;
     open = !open;
-    dispatch(open ? 'open' : 'close');
+    if (open) onopen?.();
+    else onclose?.();
   }
 
-  $: if (disabled && open) close();
+  $effect(() => {
+    if (disabled && open) close();
+  });
 
   function toggleLinked() {
     if (!canBeLinked || !component) return;
     if (isLinkedDisplay) {
       unlinkComponentProperty(component, variable);
-      dispatch('change');
+      onchange?.();
       return;
     }
     const slice = $editorState.components[component];
@@ -126,7 +168,7 @@
       const currentValue = slice.aliases[variable];
       if (currentValue) {
         setComponentAliasLinked(component, variable, currentValue);
-        dispatch('change');
+        onchange?.();
       }
       return;
     }
@@ -150,7 +192,7 @@
         : slice.aliases[variable];
       if (adoptRef) setComponentAliasLinked(component, variable, adoptRef);
       else relinkComponentProperty(component, variable);
-      dispatch('change');
+      onchange?.();
       return;
     }
 
@@ -158,10 +200,10 @@
     relinkOpen = true;
   }
 
-  function handleRelinkConfirm(e: CustomEvent<{ alias: string }>) {
+  function handleRelinkConfirm(payload: { alias: string }) {
     if (!component) return;
-    setComponentAliasLinked(component, variable, { kind: 'token', name: e.detail.alias });
-    dispatch('change');
+    setComponentAliasLinked(component, variable, { kind: 'token', name: payload.alias });
+    onchange?.();
     relinkOpen = false;
   }
 
@@ -182,10 +224,10 @@
     // Per-peer resets while preserving the link are impossible by definition
     // (linked = peers share one value); a "reset just this one" intent is
     // really "unlink, then reset," which the user does in two visible steps.
-    dispatch('reset');
+    onreset?.();
     writeOverride(null);
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   function handleClickOutside(e: MouseEvent) {
@@ -197,7 +239,7 @@
 
   function handleVarChange(e: Event) {
     const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name === variable) dispatch('var-change');
+    if (detail?.name === variable) onvarChange?.();
   }
 
   onMount(() => {
@@ -217,21 +259,21 @@
       class="ui-ts-trigger"
       class:linked={isLinkedDisplay}
       class:unlinked={showLinkToggle && !isLinkedDisplay}
-      on:click={toggle}
+      onclick={toggle}
       {disabled}
     >
       <div class="ui-ts-content">
-        {#if $$slots['trigger-preview']}
+        {#if triggerPreview}
           <div class="ui-ts-preview">
-            <slot name="trigger-preview" />
+            {@render triggerPreview()}
           </div>
         {/if}
         <div class="ui-ts-text">
-          <slot name="trigger-text">
-            {#if $$slots['trigger-title']}
-              <span class="ui-ts-category"><slot name="trigger-title" /></span>
-            {/if}
-          </slot>
+          {#if triggerText}
+            {@render triggerText()}
+          {:else if triggerTitle}
+            <span class="ui-ts-category">{@render triggerTitle()}</span>
+          {/if}
         </div>
       </div>
       <i class="fas fa-chevron-down ui-ts-chevron" class:open></i>
@@ -242,8 +284,8 @@
         candidates={relinkCandidates}
         initialVariable={variable}
         prefixToStrip={`--${component}-`}
-        on:confirm={handleRelinkConfirm}
-        on:cancel={handleRelinkCancel}
+        onconfirm={handleRelinkConfirm}
+        oncancel={handleRelinkCancel}
       />
     {/if}
 
@@ -254,15 +296,17 @@
         use:keepInViewport
       >
         {#if !hideDefaultHeader}
-          <slot name="header">
+          {#if header}
+            {@render header()}
+          {:else}
             <div class="ui-ts-header">
               {#if showLinkToggle}
-                <UILinkToggle linked={isLinkedDisplay} on:toggle={toggleLinked} />
+                <UILinkToggle linked={isLinkedDisplay} ontoggle={toggleLinked} />
               {/if}
               <button
                 type="button"
                 class="ui-ts-reset"
-                on:click={handleReset}
+                onclick={handleReset}
                 disabled={selectionsLocked}
                 title={selectionsLocked ? 'Unlock to reset' : 'Reset to default'}
               >
@@ -270,18 +314,18 @@
                 <span>Reset</span>
               </button>
             </div>
-          </slot>
+          {/if}
         {/if}
         <div class="ui-ts-selections" class:locked={selectionsLocked}>
-          <slot name="subheader" />
-          <slot {close} {handleReset} />
+          {@render subheader?.()}
+          {@render children?.({ close, handleReset })}
         </div>
       </div>
     {/if}
   </div>
 
-  {#if $$slots['trigger-meta']}
-    <span class="ui-ts-meta-text"><slot name="trigger-meta" /></span>
+  {#if triggerMeta}
+    <span class="ui-ts-meta-text">{@render triggerMeta()}</span>
   {/if}
 </div>
 

package/src/ui/UIVariantSelector.svelte

@@ -1,37 +1,62 @@
 <script lang="ts" generics="T extends { key: string; label?: string; value?: string }">
-  import { createEventDispatcher } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { resolveAliasChain } from '../lib/tokenRegistry';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
-  const dispatch = createEventDispatcher<{
-    change: void;
-  }>();
+  interface Props<O extends { key: string; label?: string; value?: string }> {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    dropdownMinWidth?: string;
+    dropdownMaxWidth?: string;
+    /** Forwarded to UIOptionList — when set, options render in a linked-column grid. */
+    dropdownGridColumns?: string;
+    /** CSS var prefix that, joined with an option `key`, forms the target var (e.g. `--font-weight-`). */
+    varPrefix: string;
+    /** Selectable options. Each must have a unique `key`. */
+    options: ReadonlyArray<O>;
+    /** Trigger title slot. Renamed from `slot="trigger-title"` in 0.5.0. */
+    triggerTitle?: Snippet<[{ activeOption: O | null }]>;
+    /** Trigger meta slot. Renamed from `slot="trigger-meta"` in 0.5.0. */
+    triggerMeta?: Snippet<[{ currentValue: string; activeOption: O | null }]>;
+    /** Per-option custom render. */
+    option?: Snippet<[{ opt: O; active: boolean; select: () => void }]>;
+    /** Trailing dropdown content (e.g. action buttons). */
+    extras?: Snippet<[{ close: () => void }]>;
+    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;
-  export let dropdownMinWidth: string = '12rem';
-  export let dropdownMaxWidth: string = '';
-  /** Forwarded to UIOptionList — when set, options render in a linked-column grid. */
-  export let dropdownGridColumns: string = '';
-  /** CSS var prefix that, joined with an option `key`, forms the target var (e.g. `--font-weight-`). */
-  export let varPrefix: string;
-  /** Selectable options. Each must have a unique `key`. */
-  export let options: ReadonlyArray<T>;
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    dropdownMinWidth = '12rem',
+    dropdownMaxWidth = '',
+    dropdownGridColumns = '',
+    varPrefix,
+    options,
+    triggerTitle: callerTriggerTitle,
+    triggerMeta: callerTriggerMeta,
+    option: callerOption,
+    extras: callerExtras,
+    onchange,
+  }: Props<T> = $props();
 
   let selector: UITokenSelector;
-  let chosenKey: string | null = null;
-  let currentValue: string = '';
+  let chosenKey: string | null = $state(null);
+  let currentValue: string = $state('');
 
-  $: validKeys = new Set(options.map((o) => o.key));
-  $: refMatcher = (() => {
+  let validKeys = $derived(new Set(options.map((o) => o.key)));
+  let refMatcher = $derived.by(() => {
     const escaped = varPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     return new RegExp(`var\\((${escaped}[^)\\s]+)\\)`);
-  })();
+  });
 
   function parseRef(value: string): string | null {
     const m = value.match(refMatcher);
@@ -70,7 +95,7 @@
   function handleReset() {
     chosenKey = null;
     readResolved();
-    dispatch('change');
+    onchange?.();
   }
 
   function selectKey(key: string, close: () => void) {
@@ -84,19 +109,21 @@
     }
     readResolved();
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   // Re-derive `chosenKey` when the bound `variable` changes (e.g. when a
   // VariantGroup tabs view reuses the same selector across states). Without
   // this, prop swaps leave the trigger label stale.
   let lastSeenVariable: string | null = null;
-  $: if (variable !== lastSeenVariable) {
-    lastSeenVariable = variable;
-    initFromCurrent();
-  }
+  $effect(() => {
+    if (variable !== lastSeenVariable) {
+      lastSeenVariable = variable;
+      initFromCurrent();
+    }
+  });
 
-  $: activeOption = (options.find((o) => o.key === chosenKey) ?? null) as T | null;
+  let activeOption = $derived((options.find((o) => o.key === chosenKey) ?? null) as T | null);
 </script>
 
 <UITokenSelector
@@ -108,38 +135,33 @@
   {selectionsLocked}
   {dropdownMinWidth}
   {dropdownMaxWidth}
-  on:reset={handleReset}
-  on:var-change={initFromCurrent}
+  onreset={handleReset}
+  onvarChange={initFromCurrent}
 >
-  <svelte:fragment slot="trigger-title">
-    <slot name="trigger-title" {activeOption}>{activeOption?.label ?? ''}</slot>
-  </svelte:fragment>
-  <svelte:fragment slot="trigger-meta">
-    <slot name="trigger-meta" {currentValue} {activeOption}>{currentValue || '—'}</slot>
-  </svelte:fragment>
+  {#snippet triggerTitle()}
+    {#if callerTriggerTitle}{@render callerTriggerTitle({ activeOption })}{:else}{activeOption?.label ?? ''}{/if}
+  {/snippet}
+  {#snippet triggerMeta()}
+    {#if callerTriggerMeta}{@render callerTriggerMeta({ currentValue, activeOption })}{:else}{currentValue || '—'}{/if}
+  {/snippet}
 
-  <svelte:fragment let:close>
+  {#snippet children({ close })}
     <UIOptionList gridColumns={dropdownGridColumns}>
       {#each options as opt (opt.key)}
-        <slot
-          name="option"
-          {opt}
-          active={chosenKey === opt.key}
-          select={() => selectKey(opt.key, close)}
-        >
-          {#if opt.value !== undefined}
-            <UIOptionItem active={chosenKey === opt.key} on:click={() => selectKey(opt.key, close)}>
-              <svelte:fragment slot="label">{opt.label ?? ''}</svelte:fragment>
-              <svelte:fragment slot="meta">{opt.value}</svelte:fragment>
-            </UIOptionItem>
-          {:else}
-            <UIOptionItem active={chosenKey === opt.key} on:click={() => selectKey(opt.key, close)}>
-              <svelte:fragment slot="label">{opt.label ?? ''}</svelte:fragment>
-            </UIOptionItem>
-          {/if}
-        </slot>
+        {#if callerOption}
+          {@render callerOption({ opt, active: chosenKey === opt.key, select: () => selectKey(opt.key, close) })}
+        {:else if opt.value !== undefined}
+          <UIOptionItem active={chosenKey === opt.key} onclick={() => selectKey(opt.key, close)}>
+            {#snippet label()}{opt.label ?? ''}{/snippet}
+            {#snippet meta()}{opt.value}{/snippet}
+          </UIOptionItem>
+        {:else}
+          <UIOptionItem active={chosenKey === opt.key} onclick={() => selectKey(opt.key, close)}>
+            {#snippet label()}{opt.label ?? ''}{/snippet}
+          </UIOptionItem>
+        {/if}
       {/each}
-      <slot name="extras" {close} />
+      {@render callerExtras?.({ close })}
     </UIOptionList>
-  </svelte:fragment>
+  {/snippet}
 </UITokenSelector>