@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/ui/UIDialog.svelte

@@ -1,58 +1,76 @@
 <script lang="ts">
-  import { tick, createEventDispatcher } from 'svelte';
-
-  export let show: boolean = false;
-  export let title: string = '';
-  export let cancelLabel: string = 'Cancel';
-  export let showCancel: boolean = true;
-  export let confirmLabel: string = '';
-  export let confirmDisabled: boolean = false;
-  export let width: string = '500px';
-
-  const dispatch = createEventDispatcher();
-
-  let closeButtonRef: HTMLButtonElement;
-  let cancelButtonRef: HTMLButtonElement;
-  let confirmButtonRef: HTMLButtonElement;
-
-  $: if (show) {
-    tick().then(() => {
-      if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
-      else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
-      else if (closeButtonRef) closeButtonRef.focus();
-    });
-  }
+  import { run, self } from 'svelte/legacy';
+
+  import { tick } from 'svelte';
+
+  interface Props {
+    show?: boolean;
+    title?: string;
+    cancelLabel?: string;
+    showCancel?: boolean;
+    confirmLabel?: string;
+    confirmDisabled?: boolean;
+    width?: string;
+    children?: import('svelte').Snippet;
+    onconfirm?: () => void;
+  }
+
+  let {
+    show = $bindable(false),
+    title = '',
+    cancelLabel = 'Cancel',
+    showCancel = true,
+    confirmLabel = '',
+    confirmDisabled = false,
+    width = '500px',
+    children,
+    onconfirm
+  }: Props = $props();
+
+  let closeButtonRef: HTMLButtonElement | undefined = $state();
+  let cancelButtonRef: HTMLButtonElement | undefined = $state();
+  let confirmButtonRef: HTMLButtonElement | undefined = $state();
+
+  run(() => {
+    if (show) {
+      tick().then(() => {
+        if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
+        else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
+        else if (closeButtonRef) closeButtonRef.focus();
+      });
+    }
+  });
 
   function handleClose() {
     show = false;
   }
 
   function handleConfirm() {
-    dispatch('confirm');
+    onconfirm?.();
   }
 </script>
 
 {#if show}
-  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-  <div class="ui-dialog-backdrop" on:click|self={handleClose}>
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
+  <div class="ui-dialog-backdrop" onclick={self(handleClose)}>
     <div class="ui-dialog" style="width: {width}; max-width: {width};">
       {#if title}
         <div class="ui-dialog-header">
           <h3 class="ui-dialog-title">{title}</h3>
-          <button bind:this={closeButtonRef} class="ui-dialog-close" on:click={handleClose} aria-label="Close">
+          <button bind:this={closeButtonRef} class="ui-dialog-close" onclick={handleClose} aria-label="Close">
             <i class="fas fa-times"></i>
           </button>
         </div>
       {/if}
 
       <div class="ui-dialog-body">
-        <slot />
+        {@render children?.()}
       </div>
 
       {#if showCancel || confirmLabel}
         <div class="ui-dialog-footer">
           {#if showCancel}
-            <button bind:this={cancelButtonRef} class="ui-dialog-btn" on:click={handleClose}>
+            <button bind:this={cancelButtonRef} class="ui-dialog-btn" onclick={handleClose}>
               {cancelLabel}
             </button>
           {/if}
@@ -60,7 +78,7 @@
             <button
               bind:this={confirmButtonRef}
               class="ui-dialog-btn primary"
-              on:click={handleConfirm}
+              onclick={handleConfirm}
               disabled={confirmDisabled}
             >
               {confirmLabel}

package/src/ui/UIFontFamilySelector.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 { resolveAliasChain } from '../lib/tokenRegistry';
   import { editorState } from '../lib/editorStore';
   import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
@@ -8,13 +10,23 @@
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
-  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();
 
   const options = [
     { key: 'display', label: 'Display' },
@@ -23,15 +35,15 @@
     { key: 'mono', label: 'Mono' },
   ];
 
-  let selector: UITokenSelector;
-  let chosenKey: string | null = null;
-  let chosenFamilyId: string | null = null;
-  let currentStack: string = '';
-  let familyNameByKey: Record<string, string> = {};
+  let selector: UITokenSelector | undefined = $state();
+  let chosenKey: string | null = $state(null);
+  let chosenFamilyId: string | null = $state(null);
+  let currentStack: string = $state('');
+  let familyNameByKey: Record<string, string> = $state({});
 
-  $: fontSources = $editorState.fonts.sources;
-  $: allFamilies = (fontSources as FontSource[]).flatMap((s) => s.families);
-  $: hasProjectFonts = allFamilies.length > 0;
+  let fontSources = $derived($editorState.fonts.sources);
+  let allFamilies = $derived((fontSources as FontSource[]).flatMap((s) => s.families));
+  let hasProjectFonts = $derived(allFamilies.length > 0);
 
   function parseRef(value: string): string | null {
     const m = value.match(/var\((--font-[a-z]+)\)/);
@@ -111,41 +123,43 @@
     chosenKey = null;
     chosenFamilyId = null;
     readResolved();
-    dispatch('change');
+    onchange?.();
   }
 
   function selectOption(key: string, close: () => void) {
     const target = `--font-${key}`;
     if (target === variable) {
-      selector.writeOverride(null);
+      selector?.writeOverride(null);
       chosenKey = null;
     } else {
-      selector.writeOverride(target);
+      selector?.writeOverride(target);
       chosenKey = key;
     }
     chosenFamilyId = null;
     readResolved();
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   function selectProjectFamily(family: FontFamily, close: () => void) {
     const stack = `'${family.cssName}', ${genericFor(variable)}`;
-    selector.writeOverride(stack);
+    selector?.writeOverride(stack);
     chosenKey = null;
     chosenFamilyId = family.id;
     readResolved();
     close();
-    dispatch('change');
+    onchange?.();
   }
 
   // Re-derive `chosenKey` / `chosenFamilyId` when `variable` changes (the
   // VariantGroup tabs view reuses the same selector instance across states).
-  let lastSeenVariable: string | null = null;
-  $: if (variable !== lastSeenVariable) {
-    lastSeenVariable = variable;
-    initFromCurrent();
-  }
+  let lastSeenVariable: string | null = $state(null);
+  run(() => {
+    if (variable !== lastSeenVariable) {
+      lastSeenVariable = variable;
+      initFromCurrent();
+    }
+  });
 
   onMount(() => {
     document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
@@ -154,10 +168,10 @@
     document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
   });
 
-  $: activeLabel = chosenFamilyId
+  let activeLabel = $derived(chosenFamilyId
     ? (allFamilies.find((f) => f.id === chosenFamilyId)?.name ?? 'Project font')
-    : (options.find((o) => o.key === chosenKey)?.label ?? '');
-  $: displayFamily = firstFamilyName(currentStack);
+    : (options.find((o) => o.key === chosenKey)?.label ?? ''));
+  let displayFamily = $derived(firstFamilyName(currentStack));
 </script>
 
 <UITokenSelector
@@ -168,57 +182,69 @@
   {disabled}
   {selectionsLocked}
   dropdownMinWidth="14rem"
-  on:reset={handleReset}
-  on:var-change={initFromCurrent}
+  onreset={handleReset}
+  onvarChange={initFromCurrent}
 >
-  <svelte:fragment slot="trigger-title">{activeLabel}</svelte:fragment>
-  <svelte:fragment slot="trigger-meta">{displayFamily || '—'}</svelte:fragment>
-
-  <svelte:fragment let:close>
-    <UIOptionList>
-      {#each options as opt}
-        <UIOptionItem
-          active={chosenKey === opt.key}
-          on:click={() => selectOption(opt.key, close)}
-        >
-          <span slot="preview" class="font-sample" style="font-family: var(--font-{opt.key});">Aa</span>
-          <svelte:fragment slot="label">{opt.label}</svelte:fragment>
-          <svelte:fragment slot="meta">{familyNameByKey[opt.key] ?? ''}</svelte:fragment>
-        </UIOptionItem>
-      {/each}
-
-      {#if hasProjectFonts}
-        <div class="pfs-divider" role="separator"></div>
-        <div class="pfs-section">
-          <div class="pfs-trigger" class:active={chosenFamilyId !== null}>
-            <span class="pfs-label">Project Fonts</span>
-            <span class="pfs-count">{allFamilies.length}</span>
-            <i class="fas fa-chevron-right pfs-chevron" aria-hidden="true"></i>
-          </div>
-          <div class="pfs-submenu">
-            {#each fontSources as source (source.id)}
-              {#if source.families.length > 0}
-                <div class="pfs-source-label">{source.label ?? source.kind}</div>
-                {#each source.families as fam (fam.id)}
-                  <UIOptionItem
-                    active={chosenFamilyId === fam.id}
-                    on:click={() => selectProjectFamily(fam, close)}
-                  >
-                    <span
-                      slot="preview"
-                      class="font-sample"
-                      style="font-family: '{fam.cssName}', {genericFor(variable)};"
-                    >Aa</span>
-                    <svelte:fragment slot="label">{fam.name}</svelte:fragment>
-                  </UIOptionItem>
-                {/each}
-              {/if}
-            {/each}
+  {#snippet triggerTitle()}{activeLabel}{/snippet}
+  {#snippet triggerMeta()}{displayFamily || '—'}{/snippet}
+
+  {#snippet children({ close })}
+  
+      <UIOptionList>
+        {#each options as opt}
+          <UIOptionItem
+            active={chosenKey === opt.key}
+            onclick={() => selectOption(opt.key, close)}
+          >
+            {#snippet preview()}
+                    <span  class="font-sample" style="font-family: var(--font-{opt.key});">Aa</span>
+                  {/snippet}
+            {#snippet label()}
+                    {opt.label}
+                  {/snippet}
+            {#snippet meta()}
+                    {familyNameByKey[opt.key] ?? ''}
+                  {/snippet}
+          </UIOptionItem>
+        {/each}
+
+        {#if hasProjectFonts}
+          <div class="pfs-divider" role="separator"></div>
+          <div class="pfs-section">
+            <div class="pfs-trigger" class:active={chosenFamilyId !== null}>
+              <span class="pfs-label">Project Fonts</span>
+              <span class="pfs-count">{allFamilies.length}</span>
+              <i class="fas fa-chevron-right pfs-chevron" aria-hidden="true"></i>
+            </div>
+            <div class="pfs-submenu">
+              {#each fontSources as source (source.id)}
+                {#if source.families.length > 0}
+                  <div class="pfs-source-label">{source.label ?? source.kind}</div>
+                  {#each source.families as fam (fam.id)}
+                    <UIOptionItem
+                      active={chosenFamilyId === fam.id}
+                      onclick={() => selectProjectFamily(fam, close)}
+                    >
+                      {#snippet preview()}
+                                        <span
+                          
+                          class="font-sample"
+                          style="font-family: '{fam.cssName}', {genericFor(variable)};"
+                        >Aa</span>
+                                      {/snippet}
+                      {#snippet label()}
+                                        {fam.name}
+                                      {/snippet}
+                    </UIOptionItem>
+                  {/each}
+                {/if}
+              {/each}
+            </div>
           </div>
-        </div>
-      {/if}
-    </UIOptionList>
-  </svelte:fragment>
+        {/if}
+      </UIOptionList>
+    
+  {/snippet}
 </UITokenSelector>
 
 <style>

package/src/ui/UIFontSizeSelector.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, onDestroy } from 'svelte';
   import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
   import UIVariantSelector from './UIVariantSelector.svelte';
 
-  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;
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
 
   // Icon-size variables (e.g. --tabbar-default-icon-size) pick from the
   // --icon-size-* scale; everything else from --font-size-*.
-  $: scalePrefix = variable.endsWith('-icon-size') ? '--icon-size-' : '--font-size-';
+  let scalePrefix = $derived(variable.endsWith('-icon-size') ? '--icon-size-' : '--font-size-');
 
   const options = [
     { key: 'xs', label: 'XS' },
@@ -26,8 +40,8 @@
     { key: '6xl', label: '6XL' },
   ] as const;
 
-  let pxByKey: Record<string, string> = {};
-  let remByKey: Record<string, string> = {};
+  let pxByKey: Record<string, string> = $state({});
+  let remByKey: Record<string, string> = $state({});
 
   function formatRem(value: number): string {
     const rounded = Math.round(value * 1000) / 1000;
@@ -66,7 +80,9 @@
 
   // Re-read sizes when the target variable's scale changes
   // (mounting one selector, then opening another whose variable resolves to a different scale).
-  $: if (typeof document !== 'undefined' && scalePrefix) readPxValues();
+  run(() => {
+    if (typeof document !== 'undefined' && scalePrefix) readPxValues();
+  });
 
   onMount(() => {
     readPxValues();
@@ -86,18 +102,20 @@
   varPrefix={scalePrefix}
   {options}
   dropdownGridColumns="auto auto auto auto"
-  on:change
+  {onchange}
 >
-  <svelte:fragment slot="option" let:opt let:active let:select>
-    <button class="font-size-row" class:active on:click={select}>
-      <span class="size-sample-cell">
-        <span class="size-sample" style="font-size: calc(var({scalePrefix}{opt.key}) * 1.5);">A</span>
-      </span>
-      <span class="size-label">{opt.label}</span>
-      <code class="size-measure">{pxByKey[opt.key] ?? ''}</code>
-      <code class="size-measure">{remByKey[opt.key] ?? ''}</code>
-    </button>
-  </svelte:fragment>
+  {#snippet option({ opt, active, select })}
+  
+      <button class="font-size-row" class:active onclick={select}>
+        <span class="size-sample-cell">
+          <span class="size-sample" style="font-size: calc(var({scalePrefix}{opt.key}) * 1.5);">A</span>
+        </span>
+        <span class="size-label">{opt.label}</span>
+        <code class="size-measure">{pxByKey[opt.key] ?? ''}</code>
+        <code class="size-measure">{remByKey[opt.key] ?? ''}</code>
+      </button>
+    
+  {/snippet}
 </UIVariantSelector>
 
 <style>

package/src/ui/UIFontWeightSelector.svelte

@@ -2,11 +2,23 @@
   import UIVariantSelector from './UIVariantSelector.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
-  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;
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
 
   const options = [
     { key: 'thin', label: 'Thin', value: '100' },
@@ -29,15 +41,23 @@
   {selectionsLocked}
   varPrefix="--font-weight-"
   {options}
-  on:change
+  {onchange}
 >
-  <svelte:fragment slot="option" let:opt let:active let:select>
-    <UIOptionItem {active} on:click={select}>
-      <span slot="preview" class="weight-sample" style="font-weight: var(--font-weight-{opt.key});">A</span>
-      <svelte:fragment slot="label">{opt.label}</svelte:fragment>
-      <svelte:fragment slot="meta">{opt.value}</svelte:fragment>
-    </UIOptionItem>
-  </svelte:fragment>
+  {#snippet option({ opt, active, select })}
+  
+      <UIOptionItem {active} onclick={select}>
+        {#snippet preview()}
+            <span  class="weight-sample" style="font-weight: var(--font-weight-{opt.key});">A</span>
+          {/snippet}
+        {#snippet label()}
+            {opt.label}
+          {/snippet}
+        {#snippet meta()}
+            {opt.value}
+          {/snippet}
+      </UIOptionItem>
+    
+  {/snippet}
 </UIVariantSelector>
 
 <style>

package/src/ui/UILineHeightSelector.svelte

@@ -2,11 +2,23 @@
   import UIVariantSelector from './UIVariantSelector.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
-  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;
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
 
   const options = [
     { key: 'tight', label: 'Tight', value: '1' },
@@ -25,15 +37,23 @@
   {selectionsLocked}
   varPrefix="--line-height-"
   {options}
-  on:change
+  {onchange}
 >
-  <svelte:fragment slot="option" let:opt let:active let:select>
-    <UIOptionItem {active} on:click={select}>
-      <span slot="preview" class="lh-sample" style="line-height: var(--line-height-{opt.key});">≡</span>
-      <svelte:fragment slot="label">{opt.label}</svelte:fragment>
-      <svelte:fragment slot="meta">{opt.value}</svelte:fragment>
-    </UIOptionItem>
-  </svelte:fragment>
+  {#snippet option({ opt, active, select })}
+  
+      <UIOptionItem {active} onclick={select}>
+        {#snippet preview()}
+            <span  class="lh-sample" style="line-height: var(--line-height-{opt.key});">≡</span>
+          {/snippet}
+        {#snippet label()}
+            {opt.label}
+          {/snippet}
+        {#snippet meta()}
+            {opt.value}
+          {/snippet}
+      </UIOptionItem>
+    
+  {/snippet}
 </UIVariantSelector>
 
 <style>

package/src/ui/UILinkToggle.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let linked: boolean = false;
+  interface Props {
+    linked?: boolean;
+    ontoggle?: () => void;
+  }
 
-  const dispatch = createEventDispatcher();
+  let { linked = false, ontoggle }: Props = $props();
 
   function handleClick(e: Event) {
     e.stopPropagation();
-    dispatch('toggle');
+    ontoggle?.();
   }
 </script>
 
@@ -16,7 +17,7 @@
   class="ui-link-toggle"
   class:linked
   title={linked ? 'Locked across variants — click to unlink' : 'Click to link across all variants'}
-  on:click={handleClick}
+  onclick={handleClick}
 >
   <i class="fas" class:fa-lock={linked} class:fa-lock-open={!linked} aria-hidden="true"></i>
   <span>{linked ? 'Unlink' : 'Link'}</span>

package/src/ui/UIOptionItem.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
-  export let active: boolean = false;
+  interface Props {
+    active?: boolean;
+    preview?: import('svelte').Snippet;
+    label?: import('svelte').Snippet;
+    meta?: import('svelte').Snippet;
+    onclick?: (event: MouseEvent) => void;
+  }
+
+  let {
+    active = false,
+    preview,
+    label,
+    meta,
+    onclick
+  }: Props = $props();
 </script>
 
-<button class="ui-option-item" class:active on:click>
-  {#if $$slots.preview}
+<button class="ui-option-item" class:active {onclick}>
+  {#if preview}
     <span class="ui-option-preview">
-      <slot name="preview" />
+      {@render preview?.()}
     </span>
   {/if}
   <span class="ui-option-label">
-    <slot name="label" />
+    {@render label?.()}
   </span>
-  {#if $$slots.meta}
+  {#if meta}
     <code class="ui-option-meta">
-      <slot name="meta" />
+      {@render meta?.()}
     </code>
   {/if}
 </button>