@motion-proto/live-tokens 0.3.9 → 0.6.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,4 +1,4 @@
-<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
@@ -12,6 +12,8 @@
 </script>
 
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, onDestroy } from 'svelte';
   import { fade } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
@@ -23,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
@@ -44,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';
 
@@ -109,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.
@@ -125,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;
@@ -244,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}
@@ -264,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>
@@ -280,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>
@@ -290,7 +311,7 @@
       <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>
@@ -313,7 +334,7 @@
         transition:fade={BTN_FADE}
       >
         <i class="fas fa-code"></i>
-        Show Source
+        Show page source
       </a>
     {/if}
 
@@ -329,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>
@@ -347,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>
@@ -355,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>

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';
@@ -6,20 +8,28 @@
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
-  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 +50,9 @@
     hintLabel = null;
   }
 
-  $: if (drawerOpen) hideHint();
+  run(() => {
+    if (drawerOpen) hideHint();
+  });
 
   function selectComponent(id: string) {
     selectedComponent.set(id);
@@ -101,7 +113,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 +124,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 +149,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>
@@ -163,7 +175,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
   .components-shell {
     --rail-w: 48px;
     display: grid;

package/src/pages/Editor.svelte

@@ -5,6 +5,14 @@
   import { installEditorKeybindings } from '../lib/editorKeybindings';
   import { initializeEditorStore } from '../lib/editorStore';
   import { storageKey } from '../lib/editorConfig';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
   const inOverlay = typeof window !== 'undefined' && window.parent !== window;
 
@@ -46,8 +54,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
-
   .editor-page {
     min-height: 100vh;
     background: black;

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/site.css

@@ -0,0 +1,138 @@
+/*
+ * Site Styles — global typography for the themed pages
+ *
+ * Unscoped element selectors (h1, h2, p, a, ul li, …) consume the design
+ * tokens in tokens.css and recolor with the user's theme. Loaded globally
+ * from main.ts.
+ *
+ * Pair with: ui-editor.css (--ui-* chrome, opposite scope — neutral and
+ * theme-immune; only loaded on editor pages).
+ */
+
+h1 {
+  font-family: var(--font-display);
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h2 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  letter-spacing: 0.01em;
+  margin: var(--space-32) 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h3 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-primary);
+  margin: var(--space-24) 0 var(--space-8);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    line-height: 1.1;
+    margin-bottom: var(--space-8);
+  }
+
+  h2 {
+    line-height: 1.15;
+    margin-top: var(--space-24);
+  }
+
+  h3 {
+    line-height: 1.2;
+    margin-top: var(--space-20);
+  }
+}
+
+p {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: var(--line-height-md);
+  margin: 0 0 14px;
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--text-brand);
+  text-decoration: none;
+  transition: color var(--duration-150);
+}
+
+a:hover {
+  color: var(--color-brand-300);
+  text-decoration: underline;
+}
+
+strong {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+ul {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ul li {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.75;
+  margin-bottom: var(--space-4);
+}
+
+ul li::marker {
+  color: var(--text-tertiary);
+}
+
+ol {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ol li {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-4);
+}
+
+ol li::marker {
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-semibold);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-neutral-faint);
+  margin: var(--space-32) 0;
+}
+
+blockquote {
+  margin: var(--space-16) 0;
+  padding: var(--space-12) var(--space-20);
+  border: 1px solid var(--color-brand-500);
+  border-left: 4px solid var(--color-brand-500);
+  background: var(--surface-neutral-high);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}