@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/components/Tooltip.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
-  export let text: string = '';
-  export let position: 'top' | 'bottom' = 'top';
-  export let open: boolean = false;
+  interface Props {
+    text?: string;
+    position?: 'top' | 'bottom';
+    open?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    text = '',
+    position = 'top',
+    open = false,
+    children
+  }: Props = $props();
 </script>
 
 <div class="tooltip-wrapper" class:open>
-  <slot />
+  {@render children?.()}
   {#if text}
     <div class="tooltip" class:bottom={position === 'bottom'}>
       {text}
@@ -20,7 +30,7 @@
     --tooltip-text-font-family: var(--font-sans);
     --tooltip-text-font-size: var(--font-size-sm);
     --tooltip-text-font-weight: var(--font-weight-normal);
-    --tooltip-text-line-height: var(--line-height-normal);
+    --tooltip-text-line-height: var(--line-height-md);
     --tooltip-border: var(--border-neutral);
     --tooltip-border-width: var(--border-width-0);
     --tooltip-radius: var(--radius-md);

package/src/lib/ColumnsOverlay.svelte

@@ -6,9 +6,9 @@
   const isInIframe = typeof window !== 'undefined' && window.parent !== window;
   const enabled = isDev && !isInIframe;
 
-  let count = 12;
-  let gutter = '';
-  let margin = '';
+  let count = $state(12);
+  let gutter = $state('');
+  let margin = $state('');
 
   function readTokens() {
     const cs = getComputedStyle(document.documentElement);

package/src/lib/LiveEditorOverlay.svelte

@@ -1,14 +1,19 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   // __PROJECT_ROOT__ is injected by the themeFileApi Vite plugin as a `define`.
   // Consumers don't need to configure it themselves. We declare it locally so
   // this component's type-check passes in consumer projects that haven't added
   // the ambient global to their tsconfig.
   declare const __PROJECT_ROOT__: string | undefined;
+  declare const __APP_VERSION__: string | undefined;
   const INJECTED_PROJECT_ROOT: string =
     typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
+  const APP_VERSION: string =
+    typeof __APP_VERSION__ !== 'undefined' ? (__APP_VERSION__ ?? '') : '';
 </script>
 
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, onDestroy } from 'svelte';
   import { fade } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
@@ -20,12 +25,23 @@
   import { postParentRoute } from './parentRouteStore';
   import type { NavLink } from './navLinkTypes';
 
-  export let open: boolean | undefined = undefined;
-  export let editorPath: string = '/editor';
-  export let navLinks: NavLink[] = [];
-  export let pageSources: Record<string, string> = {};
-  export let hidePageSourceOn: string[] = [];
-  export let projectRoot: string = INJECTED_PROJECT_ROOT;
+  interface Props {
+    open?: boolean | undefined;
+    editorPath?: string;
+    navLinks?: NavLink[];
+    pageSources?: Record<string, string>;
+    hidePageSourceOn?: string[];
+    projectRoot?: string;
+  }
+
+  let {
+    open = $bindable(undefined),
+    editorPath = '/editor',
+    navLinks = [],
+    pageSources = {},
+    hidePageSourceOn = [],
+    projectRoot = INJECTED_PROJECT_ROOT
+  }: Props = $props();
 
   // Self-gate: only render in dev, and never inside an iframe (the /editor
   // page embeds this same app in an iframe and would otherwise recursively
@@ -41,25 +57,33 @@
   if (!consumerControlsOpen) {
     open = enabled && quietGet(OPEN_KEY) === '1';
   }
-  $: if (!consumerControlsOpen && typeof window !== 'undefined') {
-    quietSet(OPEN_KEY, open ? '1' : '0');
-  }
-  $: overlayOpen.set(!!open);
+  run(() => {
+    if (!consumerControlsOpen && typeof window !== 'undefined') {
+      quietSet(OPEN_KEY, open ? '1' : '0');
+    }
+  });
+  run(() => {
+    overlayOpen.set(!!open);
+  });
 
   // Hide the overlay entirely when the user is already on the editor route
   // (the editor page has its own chrome).
-  $: onEditorPath = $route === editorPath;
-  $: sourceFile = pageSources[$route];
-  $: showSource = !!sourceFile && !!projectRoot && !hidePageSourceOn.includes($route);
+  let onEditorPath = $derived($route === editorPath);
+  let sourceFile = $derived(pageSources[$route]);
+  let showSource = $derived(!!sourceFile && !!projectRoot && !hidePageSourceOn.includes($route));
 
   // Mount the iframe the first time the editor is shown, then keep it mounted
   // across hide/show cycles so editor state (unsaved slider values, scroll
   // position, expanded sections) survives.
-  let hasBeenOpen: boolean = !!open;
-  $: if (open) hasBeenOpen = true;
+  let hasBeenOpen: boolean = $state(!!open);
+  run(() => {
+    if (open) hasBeenOpen = true;
+  });
 
-  let editorFrame: HTMLIFrameElement | undefined;
-  $: postParentRoute(editorFrame?.contentWindow, $route);
+  let editorFrame: HTMLIFrameElement | undefined = $state();
+  run(() => {
+    postParentRoute(editorFrame?.contentWindow, $route);
+  });
 
   type Mode = 'docked' | 'floating';
 
@@ -106,9 +130,9 @@
   }
 
   const initial = loadState();
-  let mode: Mode = initial.mode;
-  let dockedWidth: number = Math.max(MIN_WIDTH, initial.dockedWidth);
-  let floating = { ...initial.floating };
+  let mode: Mode = $state(initial.mode);
+  let dockedWidth: number = $state(Math.max(MIN_WIDTH, initial.dockedWidth));
+  let floating = $state({ ...initial.floating });
 
   // Approximate natural size of the collapsed pill (Editor title + columns toggle).
   // A few pixels of overshoot is fine — the panel has overflow:hidden.
@@ -122,11 +146,11 @@
 
   // Suppress CSS transitions during gestures and mode swaps so dragging doesn't
   // re-animate every frame, and floating↔docked swaps snap cleanly.
-  let suppressTransition = false;
+  let suppressTransition = $state(false);
 
   // Gesture state — a transparent scrim covers the iframe while any gesture is active
   // so pointer events land on the panel, not on content inside the iframe.
-  let gesturing: 'drag' | 'resize-left' | 'resize-se' | null = null;
+  let gesturing: 'drag' | 'resize-left' | 'resize-se' | null = $state(null);
 
   function startDrag(e: PointerEvent) {
     if (!open || mode !== 'floating') return;
@@ -241,15 +265,15 @@
     window.removeEventListener('lt-overlay-toggle', handleToggleRequest);
   });
 
-  $: panelStyle = !open
+  let panelStyle = $derived(!open
     ? `position: fixed; top: 12px; right: 12px; width: ${COLLAPSED_WIDTH}px; height: ${COLLAPSED_HEIGHT}px;`
     : mode === 'docked'
       ? `position: fixed; top: 0; right: 0; width: ${dockedWidth}px; height: 100vh;`
-      : `position: fixed; top: ${floating.y}px; left: ${floating.x}px; width: ${floating.width}px; height: ${floating.height}px;`;
+      : `position: fixed; top: ${floating.y}px; left: ${floating.x}px; width: ${floating.width}px; height: ${floating.height}px;`);
 </script>
 
 {#if enabled && !onEditorPath}
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="lt-overlay"
   style={panelStyle}
@@ -261,13 +285,13 @@
 >
   <div
     class="header"
-    on:pointerdown={startDrag}
-    on:dblclick={handleHeaderDblClick}
+    onpointerdown={startDrag}
+    ondblclick={handleHeaderDblClick}
     title={open ? 'Double-click to hide' : 'Double-click to show'}
   >
     <button
       class="hdr-btn text title"
-      on:click={toggleOpen}
+      onclick={toggleOpen}
       title={open ? 'Hide Editor' : 'Show Editor'}
     >
       <i class="fas {open ? 'fa-chevron-right' : 'fa-chevron-left'}"></i>
@@ -277,7 +301,7 @@
     <button
       class="hdr-btn icon"
       class:active={$columnsVisible}
-      on:click={toggleColumns}
+      onclick={toggleColumns}
       title="{$columnsVisible ? 'Hide' : 'Show'} columns"
     >
       <i class="fas fa-grip-lines-vertical"></i>
@@ -287,13 +311,17 @@
       <button
         class="hdr-btn icon"
         title={mode === 'docked' ? 'Float' : 'Dock to right'}
-        on:click={toggleMode}
+        onclick={toggleMode}
         transition:fade={BTN_FADE}
       >
         <i class={mode === 'docked' ? 'fas fa-up-right-from-square' : 'fas fa-thumbtack'}></i>
       </button>
     {/if}
 
+    {#if APP_VERSION}
+      <span class="version" title="live-tokens version">v{APP_VERSION}</span>
+    {/if}
+
     {#if open}
       <div class="spacer" transition:fade={BTN_FADE}></div>
     {/if}
@@ -306,7 +334,7 @@
         transition:fade={BTN_FADE}
       >
         <i class="fas fa-code"></i>
-        Show Source
+        Show page source
       </a>
     {/if}
 
@@ -322,7 +350,7 @@
               class:active={$route === link.path}
               aria-selected={$route === link.path}
               disabled={link.disabled}
-              on:click={() => navigate(link.path)}
+              onclick={() => navigate(link.path)}
             >
               {#if link.icon}<i class="fas {link.icon}"></i>{/if}
               <span>{link.label}</span>
@@ -340,7 +368,7 @@
         title="Token editor"
         class="editor-frame"
         bind:this={editorFrame}
-        on:load={() => postParentRoute(editorFrame?.contentWindow, $route)}
+        onload={() => postParentRoute(editorFrame?.contentWindow, $route)}
       ></iframe>
       {#if gesturing}
         <div class="gesture-scrim"></div>
@@ -348,9 +376,9 @@
     </div>
 
     {#if mode === 'docked'}
-      <div class="resize-left" on:pointerdown={startDockedResize}></div>
+      <div class="resize-left" onpointerdown={startDockedResize}></div>
     {:else}
-      <div class="resize-se" on:pointerdown={startFloatingResize}></div>
+      <div class="resize-se" onpointerdown={startFloatingResize}></div>
     {/if}
   {/if}
 </div>
@@ -454,6 +482,15 @@
 
   .spacer { flex: 1; }
 
+  .version {
+    font-size: 10px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.4);
+    letter-spacing: 0.02em;
+    margin-left: 2px;
+    user-select: none;
+  }
+
   .hdr-btn {
     display: inline-flex;
     align-items: center;

package/src/pages/ComponentEditorPage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, onDestroy } from 'svelte';
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
   import PresetFileManager from '../ui/PresetFileManager.svelte';
@@ -7,19 +9,19 @@
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
 
-  let drawerOpen = true;
+  let drawerOpen = $state(true);
 
   // Demo page is statically imported from `./Demo.svelte` in App.svelte; the
   // glob resolves to an empty object if the file has been deleted, in which
   // case we hide the demo option from the page-switcher.
   const demoExists = Object.keys(import.meta.glob('./Demo.svelte')).length > 0;
 
-  let pageMenuOpen = false;
-  let pageMenuRoot: HTMLElement;
+  let pageMenuOpen = $state(false);
+  let pageMenuRoot: HTMLElement | undefined = $state();
 
   const HINT_DELAY_MS = 80;
-  let hintLabel: string | null = null;
-  let hintTop = 0;
+  let hintLabel: string | null = $state(null);
+  let hintTop = $state(0);
   let hintTimer: ReturnType<typeof setTimeout> | null = null;
 
   function showHint(label: string, target: HTMLElement) {
@@ -40,7 +42,9 @@
     hintLabel = null;
   }
 
-  $: if (drawerOpen) hideHint();
+  run(() => {
+    if (drawerOpen) hideHint();
+  });
 
   function selectComponent(id: string) {
     selectedComponent.set(id);
@@ -101,7 +105,7 @@
         class="rail-toggle"
         aria-label={drawerOpen ? 'Collapse components menu' : 'Expand components menu'}
         aria-expanded={drawerOpen}
-        on:click={() => (drawerOpen = !drawerOpen)}
+        onclick={() => (drawerOpen = !drawerOpen)}
       >
         <i class="fas {drawerOpen ? 'fa-arrow-left' : 'fa-arrow-right'}"></i>
       </button>
@@ -112,19 +116,19 @@
         aria-haspopup="menu"
         aria-expanded={pageMenuOpen}
         tabindex={drawerOpen ? 0 : -1}
-        on:click={() => drawerOpen && (pageMenuOpen = !pageMenuOpen)}
+        onclick={() => drawerOpen && (pageMenuOpen = !pageMenuOpen)}
       >
         <span class="rail-label">Components</span>
         <i class="fas fa-chevron-down rail-chevron" class:open={pageMenuOpen}></i>
       </button>
       {#if pageMenuOpen && drawerOpen}
         <div class="page-menu" role="menu">
-          <button class="page-menu-item" role="menuitem" on:click={() => selectPage('/')}>
+          <button class="page-menu-item" role="menuitem" onclick={() => selectPage('/')}>
             <i class="fas fa-home"></i>
             <span>Main site</span>
           </button>
           {#if demoExists}
-            <button class="page-menu-item" role="menuitem" on:click={() => selectPage('/demo')}>
+            <button class="page-menu-item" role="menuitem" onclick={() => selectPage('/demo')}>
               <i class="fas fa-box-open"></i>
               <span>Demo page</span>
             </button>
@@ -137,9 +141,9 @@
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
-          on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
-          on:mouseleave={hideHint}
-          on:click={() => selectComponent(item.id)}
+          onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+          onmouseleave={hideHint}
+          onclick={() => selectComponent(item.id)}
         >
           <i class={item.icon}></i>
           <span class="rail-label">{item.label}</span>

package/src/pages/EditorShell.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, onDestroy } from 'svelte';
   import { get } from 'svelte/store';
   import VariablesTab from '../ui/VariablesTab.svelte';
@@ -28,18 +30,18 @@
 
   const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
 
-  let selectedTokenSection: string | null = null;
-  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
+  let selectedTokenSection: string | null = $state(null);
+  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
 
-  let shellEl: HTMLElement | null = null;
-  let shellWidth = 1024;
+  let shellEl: HTMLElement | null = $state(null);
+  let shellWidth = $state(1024);
   const CONDENSE_BELOW = 520;
 
-  $: condensed = $sidebarCondensed === 'auto' ? shellWidth < CONDENSE_BELOW : $sidebarCondensed;
+  let condensed = $derived($sidebarCondensed === 'auto' ? shellWidth < CONDENSE_BELOW : $sidebarCondensed);
 
   const HINT_DELAY_MS = 80;
-  let hintLabel: string | null = null;
-  let hintTop = 0;
+  let hintLabel: string | null = $state(null);
+  let hintTop = $state(0);
   let hintTimer: ReturnType<typeof setTimeout> | null = null;
 
   function showHint(label: string, target: HTMLElement) {
@@ -60,7 +62,9 @@
     hintLabel = null;
   }
 
-  $: if (!condensed) hideHint();
+  run(() => {
+    if (!condensed) hideHint();
+  });
 
   function scrollToSection(sectionId: string) {
     selectedTokenSection = sectionId;
@@ -80,8 +84,8 @@
     });
   }
 
-  async function handleSave(e: CustomEvent<{ fileName: string; displayName: string }>) {
-    const { fileName, displayName } = e.detail;
+  async function handleSave(detail: { fileName: string; displayName: string }) {
+    const { fileName, displayName } = detail;
     saveStatus = 'saving';
     try {
       await persistTheme(get(editorState), fileName, displayName);
@@ -93,9 +97,9 @@
     }
   }
 
-  async function handleLoad(e: CustomEvent<{ fileName: string }>) {
+  async function handleLoad(detail: { fileName: string }) {
     try {
-      await hydrateTheme(e.detail.fileName);
+      await hydrateTheme(detail.fileName);
     } catch {
       // silent
     }
@@ -132,7 +136,7 @@
         class="rail-toggle"
         aria-label={condensed ? 'Expand sidebar' : 'Collapse sidebar'}
         aria-expanded={!condensed}
-        on:click={toggleCondensed}
+        onclick={toggleCondensed}
       >
         <i class="fas {condensed ? 'fa-arrow-right' : 'fa-arrow-left'}"></i>
       </button>
@@ -146,9 +150,9 @@
           <button
             class="nav-item"
             class:active={selectedTokenSection === item.id}
-            on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
-            on:mouseleave={hideHint}
-            on:click={() => scrollToSection(item.id)}
+            onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+            onmouseleave={hideHint}
+            onclick={() => scrollToSection(item.id)}
           >
             <i class={item.icon}></i>
             <span class="nav-label">{item.label}</span>
@@ -157,7 +161,7 @@
       </div>
       {#if !condensed}
         <div class="sidebar-footer">
-          <ThemeFileManager {saveStatus} on:save={handleSave} on:load={handleLoad} />
+          <ThemeFileManager {saveStatus} onsave={handleSave} onload={handleLoad} />
         </div>
       {/if}
     {:else}
@@ -166,9 +170,9 @@
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
-            on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
-            on:mouseleave={hideHint}
-            on:click={() => selectComponent(item.id)}
+            onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+            onmouseleave={hideHint}
+            onclick={() => selectComponent(item.id)}
           >
             <i class={item.icon}></i>
             <span class="nav-label">{item.label}</span>

package/src/styles/form-controls.css

@@ -69,7 +69,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-light);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-md);
   vertical-align: middle;
   cursor: pointer;
   transition: all var(--duration-150);
@@ -124,7 +124,7 @@
   min-height: 2rem;
   font-size: var(--font-size-md);
   font-family: var(--font-sans);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-md);
 }
 
 /* Disabled options */