@motion-proto/live-tokens 0.49.0 → 0.50.0

package/src/editor/ui/UIFontSizeSelector.svelte

@@ -2,7 +2,7 @@
   import { run } from 'svelte/legacy';
 
   import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
   import UIVariantSelector from './UIVariantSelector.svelte';
 
   interface Props {
@@ -74,8 +74,8 @@
   }
 
   function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name?.startsWith('--font-size-') || detail?.name?.startsWith('--icon-size-')) readPxValues();
+    const names = (e as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (names.some((name) => name.startsWith('--font-size-') || name.startsWith('--icon-size-'))) readPxValues();
   }
 
   // Re-read sizes when the target variable's scale changes
@@ -86,10 +86,10 @@
 
   onMount(() => {
     readPxValues();
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
   onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 </script>
 

package/src/editor/ui/UIFontWeightSelector.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
+  import {
+    fontWeightAvailability,
+    inferFontFamilyVariable,
+  } from '../core/fonts/fontWeightAvailability';
   import UIVariantSelector from './UIVariantSelector.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
@@ -31,6 +38,44 @@
     { key: 'extrabold', label: 'Extra Bold', value: '800' },
     { key: 'black', label: 'Black', value: '900' },
   ] as const;
+
+  let availability = $state<ReturnType<typeof fontWeightAvailability>>(null);
+  let familyVariable = $derived(inferFontFamilyVariable(variable));
+
+  function refreshAvailability() {
+    if (!familyVariable) {
+      availability = null;
+      return;
+    }
+    const familyValue = getComputedStyle(document.documentElement)
+      .getPropertyValue(familyVariable)
+      .trim();
+    availability = fontWeightAvailability(
+      familyValue,
+      $editorState.fonts.sources,
+      $editorState.fonts.stacks,
+    );
+  }
+
+  function handleVarChange(event: Event) {
+    const names = (event as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (
+      (familyVariable && names.includes(familyVariable))
+      || names.some((name) => /^--font-(?:display|sans|serif|mono)$/.test(name))
+    ) {
+      refreshAvailability();
+    }
+  }
+
+  $effect(() => {
+    variable;
+    $editorState.fonts.sources;
+    $editorState.fonts.stacks;
+    refreshAvailability();
+  });
+
+  onMount(() => document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange));
+  onDestroy(() => document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange));
 </script>
 
 <UIVariantSelector
@@ -44,8 +89,13 @@
   {onchange}
 >
   {#snippet option({ opt, active, select })}
-  
-      <UIOptionItem {active} onclick={select}>
+      {@const unsupported = availability !== null && !availability.weights.has(Number(opt.value))}
+      <UIOptionItem
+        {active}
+        disabled={unsupported}
+        title={unsupported ? `${opt.label} is not available for ${availability?.familyName}` : ''}
+        onclick={select}
+      >
         {#snippet preview()}
             <span  class="weight-sample" style="font-weight: var(--font-weight-{opt.key});">A</span>
           {/snippet}

package/src/editor/ui/UIOptionItem.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   interface Props {
     active?: boolean;
+    disabled?: boolean;
+    title?: string;
     preview?: import('svelte').Snippet;
     label?: import('svelte').Snippet;
     meta?: import('svelte').Snippet;
@@ -9,6 +11,8 @@
 
   let {
     active = false,
+    disabled = false,
+    title = '',
     preview,
     label,
     meta,
@@ -16,7 +20,7 @@
   }: Props = $props();
 </script>
 
-<button class="ui-option-item" class:active {onclick}>
+<button class="ui-option-item" class:active {onclick} {disabled} {title}>
   {#if preview}
     <span class="ui-option-preview">
       {@render preview?.()}
@@ -64,6 +68,15 @@
     color: var(--ui-text-primary);
   }
 
+  .ui-option-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ui-option-item:disabled:hover {
+    background: none;
+  }
+
   .ui-option-preview {
     flex-shrink: 0;
     display: inline-flex;

package/src/editor/ui/UIPaddingSelector.svelte

@@ -7,7 +7,7 @@
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
-  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import { setCssVar, removeCssVar, CSS_VARS_CHANGE_EVENT } from '../core/cssVarSync';
   import {
     editorState,
     setComponentAlias,
@@ -207,11 +207,11 @@
 
   onMount(() => {
     refreshFromState();
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 
   onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 
   // Track `variable` alongside `$editorState` so a VariantGroup tabs view that
@@ -396,6 +396,7 @@
     <button
       type="button"
       class="merge-btn"
+      data-padding-parent-variable={variable}
       onclick={mergeToSingle}
       title="Use the same value for all sides"
       disabled={disabled || selectionsLocked}

package/src/editor/ui/UIPaletteSelector.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
+  import { untrack } from 'svelte';
   import { slide } from 'svelte/transition';
   import { cubicOut, cubicIn } from 'svelte/easing';
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
@@ -528,13 +527,14 @@
   // The wrapper UITokenSelector forwards `var-change` only for the currently
   // bound variable, so prop swaps wouldn't otherwise refresh `chosenCategory`
   // / `chosenFamily` / `chosenStep` and the meta label drifts from the swatch.
-  let lastSeenVariable: string | null = $state(null);
-  run(() => {
-    if (variable !== lastSeenVariable) {
-      lastSeenVariable = variable;
+  $effect(() => {
+    // Track only the prop. The initialization writes local display state and
+    // must not subscribe the effect to that same state.
+    variable;
+    untrack(() => {
       initFromCurrent();
       captureSelfDefault();
-    }
+    });
   });
 
   let chosenGradientToken = $derived(chosenGradient ? getGradientToken(chosenGradient) : undefined);
@@ -542,8 +542,11 @@
   let effectiveAngle = $derived(chosenGradientToken
     ? (chosenAngle ?? chosenGradientToken.angle)
     : 0);
-  run(() => {
-    angleInput = effectiveAngle;
+  $effect(() => {
+    const nextAngle = effectiveAngle;
+    untrack(() => {
+      angleInput = nextAngle;
+    });
   });
 
   let metaLabel = $derived(chosenNone
@@ -560,10 +563,14 @@
     ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
     : allCategories);
 
-  run(() => {
-    if (selectedFamily && !availableTabs.find(t => t.id === selectedTab)) {
-      selectedTab = 'palette';
-    }
+  $effect(() => {
+    const family = selectedFamily;
+    const tabs = availableTabs;
+    untrack(() => {
+      if (family && !tabs.find(t => t.id === selectedTab)) {
+        selectedTab = 'palette';
+      }
+    });
   });
 </script>
 

package/src/editor/ui/UIRelinkConfirmDialog.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { self } from 'svelte/legacy';
   import UIRadio from './UIRadio.svelte';
 
   type Candidate = { variable: string; alias: string };
@@ -73,8 +72,13 @@
   });
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions a11y_no_static_element_interactions -->
-<div class="ui-relink-backdrop" onclick={self(handleCancel)}>
+<div class="ui-relink-backdrop">
+  <button
+    type="button"
+    class="ui-relink-dismiss"
+    aria-label="Cancel linking"
+    onclick={handleCancel}
+  ></button>
   <div
     class="ui-relink-dialog"
     role="dialog"
@@ -135,7 +139,18 @@
     z-index: 10000;
   }
 
+  .ui-relink-dismiss {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: default;
+  }
+
   .ui-relink-dialog {
+    position: relative;
+    z-index: 1;
     background: var(--ui-surface-higher);
     border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);

package/src/editor/ui/UITextTransformSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
@@ -40,8 +40,8 @@
   }
 
   function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name === variable) readResolved();
+    const names = (e as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (names.includes(variable)) readResolved();
   }
 
   function select(keyword: string, close: () => void) {
@@ -58,10 +58,10 @@
 
   onMount(() => {
     readResolved();
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
   onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 
   let activeKey = $derived(options.find((o) => o.key === current)?.key ?? null);

package/src/editor/ui/UITokenSelector.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
-  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import {
+    setCssVar,
+    removeCssVar,
+    CSS_VARS_CHANGE_EVENT,
+    type CssVarsChangeDetail,
+  } from '../core/cssVarSync';
   import type { CssVarRef } from '../core/store/editorTypes';
   import { cssStringToRef } from '../core/store/cssVarRef';
   import {
@@ -98,6 +103,18 @@
   let relinkOpen = $state(false);
   let relinkCandidates: { variable: string; alias: string }[] = $state([]);
 
+  /** Keep overflow metadata available through the native title tooltip without
+   * attaching a mouse-only interaction handler to otherwise static text. */
+  function mirrorTextToTitle(node: HTMLElement) {
+    const sync = () => {
+      node.title = node.textContent?.trim() ?? '';
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { childList: true, characterData: true, subtree: true });
+    return { destroy: () => observer.disconnect() };
+  }
+
   let isLinkedFromData = $derived(canBeLinked && component && $editorState
     ? isComponentPropertyLinked(component, variable)
     : false);
@@ -251,22 +268,27 @@
   }
 
   function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name === variable) onvarChange?.();
+    const names = (e as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (names.includes(variable)) onvarChange?.();
   }
 
   onMount(() => {
     document.addEventListener('click', handleClickOutside, true);
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 
   onDestroy(() => {
     document.removeEventListener('click', handleClickOutside, true);
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 </script>
 
-<div class="ui-token-selector" class:disabled bind:this={container}>
+<div
+  class="ui-token-selector"
+  class:disabled
+  data-token-variable={variable}
+  bind:this={container}
+>
   <div class="ui-ts-trigger-wrap">
     <button
       class="ui-ts-trigger"
@@ -340,7 +362,7 @@
   {#if triggerMeta}
     <span
       class="ui-ts-meta-text"
-      onmouseenter={(e) => { e.currentTarget.title = e.currentTarget.textContent ?? ''; }}
+      use:mirrorTextToTitle
     >{@render triggerMeta()}</span>
   {/if}
 </div>

package/src/live-tokens/data/themes/spring-meadow.json

@@ -1,7 +1,7 @@
 {
   "name": "Spring Meadow",
   "createdAt": "2026-08-13T10:21:46.867Z",
-  "updatedAt": "2026-08-14T23:53:22.549Z",
+  "updatedAt": "2026-08-17T20:21:26.098Z",
   "schemaVersion": 3,
   "colorsAndType": {
     "name": "Spring Meadow",
@@ -3433,10 +3433,10 @@
     "sectiondivider": {
       "name": "spring-meadow",
       "component": "sectiondivider",
-      "createdAt": "2026-05-10T22:09:00.336Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "createdAt": "2026-08-17T20:21:22.937Z",
+      "updatedAt": "2026-08-17T20:21:22.937Z",
       "aliases": {
-        "--sectiondivider-lg-title-font-family": "--font-display",
+        "--sectiondivider-lg-title-font-family": "--font-sans",
         "--sectiondivider-lg-title-font-weight": "--font-weight-bold",
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
@@ -3465,9 +3465,9 @@
         "--sectiondivider-lg-border": "--color-transparent",
         "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
-        "--sectiondivider-md-title-font-family": "--font-display",
-        "--sectiondivider-md-title-font-weight": "--font-weight-bold",
-        "--sectiondivider-md-title-font-size": "--font-size-4xl",
+        "--sectiondivider-md-title-font-family": "--font-sans",
+        "--sectiondivider-md-title-font-weight": "--font-weight-extrabold",
+        "--sectiondivider-md-title-font-size": "--font-size-5xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
         "--sectiondivider-md-title-outline-width": "--border-width-4",
@@ -3488,13 +3488,13 @@
         "--sectiondivider-md-shadow": "--shadow-none",
         "--sectiondivider-md-hairline-thickness": "--border-width-1",
         "--sectiondivider-md-background": "--color-transparent",
-        "--sectiondivider-md-title": "--text-primary",
+        "--sectiondivider-md-title": "--color-brand-700",
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "color-mix(in srgb, var(--color-white) 34%, transparent)",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
-        "--sectiondivider-sm-title-font-family": "--font-display",
+        "--sectiondivider-sm-title-font-family": "--font-sans",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
@@ -3523,7 +3523,9 @@
         "--sectiondivider-sm-border": "--color-transparent",
         "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
-      }
+      },
+      "config": {},
+      "schemaVersion": 21
     },
     "segmentedcontrol": {
       "name": "spring-meadow",
@@ -3901,4 +3903,4 @@
       }
     }
   }
-}
+}

package/src/system/components/Button.svelte

@@ -348,7 +348,8 @@
             color: var(--button-outline-hover-text);
          }
 
-         &:active:not(:disabled) {
+         &:active:not(:disabled),
+         &.force-active:not(:disabled) {
             background: var(--button-outline-active-surface);
          }
 

package/src/system/components/FloatingTokenTags.css

@@ -17,6 +17,7 @@
 
 /* --- Central box ---------------------------------------------------------- */
 .ftt-box {
+  --ftt-box-contrast-color: var(--color-white);
   position: absolute;
   left: 50%;
   top: 50%;
@@ -46,7 +47,7 @@
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--ftt-box-contrast-color);
   white-space: nowrap;
   user-select: none;
   pointer-events: none;

package/src/system/components/FloatingTokenTags.svelte

@@ -191,6 +191,7 @@
   }
 
   let lastPageBackground = '';
+  let lastBoxBackground = '';
   function syncConnectorContrast() {
     if (!stageEl) return;
     const styles = getComputedStyle(stageEl);
@@ -201,11 +202,21 @@
     stageEl.style.setProperty('--ftt-contrast-color', `var(${token})`);
   }
 
+  function syncBoxLabelContrast() {
+    if (!boxEl) return;
+    const background = getComputedStyle(boxEl).backgroundColor;
+    if (background === lastBoxBackground) return;
+    lastBoxBackground = background;
+    const token = contrastTokenForBackground(background);
+    boxEl.style.setProperty('--ftt-box-contrast-color', `var(${token})`);
+  }
+
   // Kite strings and energy balls are recomputed each frame from the box's
   // measured rect so intrinsic sizing drives anchor placement.
   function syncFrame() {
     if (!stageEl) return;
     syncConnectorContrast();
+    syncBoxLabelContrast();
     const stageRect = stageEl.getBoundingClientRect();
     if (stageRect.width === 0 || stageRect.height === 0) return;
 

package/src/system/components/IconButton.svelte

@@ -229,7 +229,8 @@
             color: var(--iconbutton-outline-hover-icon);
          }
 
-         &:active:not(:disabled) {
+         &:active:not(:disabled),
+         &.force-active:not(:disabled) {
             background: var(--iconbutton-outline-active-surface);
          }
 

package/src/system/components/Image.svelte

@@ -17,6 +17,8 @@
     /** Content images default to lazy; pass `'eager'` for above-the-fold heroes. */
     loading?: 'lazy' | 'eager';
     decoding?: 'async' | 'sync' | 'auto';
+    /** Editor preview hook: paint the hover transform without pointer input. */
+    forceHover?: boolean;
   }
 
   let {
@@ -29,7 +31,8 @@
     srcset = undefined,
     sizes = undefined,
     loading = 'lazy',
-    decoding = 'async'
+    decoding = 'async',
+    forceHover = false,
   }: Props = $props();
 
   const variantHeights: Record<string, string | undefined> = {
@@ -60,6 +63,7 @@
 
 <div
   class="image"
+  class:force-hover={forceHover}
   style:height={resolvedHeight}
   style:--image-zoom-hover={contentHover}
   style:--image-grow-hover={frameHover}
@@ -100,11 +104,13 @@
     transition: transform var(--duration-300) var(--ease-out-cubic);
   }
 
-  .image:hover {
+  .image:hover,
+  .image.force-hover {
     transform: var(--image-grow-hover);
   }
 
-  .image:hover img {
+  .image:hover img,
+  .image.force-hover img {
     transform: var(--image-zoom-hover);
   }
 </style>

package/src/system/components/ImageLightbox.svelte

@@ -585,6 +585,8 @@
     style:--imagelightbox-tile-object-fit={fit}
     type="button"
     aria-label={cover?.alt ? `Expand image: ${cover.alt}` : 'Expand image'}
+    aria-haspopup="dialog"
+    aria-expanded={open}
     onclick={openLightbox}
   >
     <img src={cover?.src} alt={cover?.alt} draggable="false" onload={onCoverLoad} />

package/src/system/components/SectionDivider.svelte

@@ -63,11 +63,28 @@
   });
 
   onMount(() => {
+    let mounted = true;
+    const sync = () => { measure(); syncFilter(); };
     measure();
     syncFilter();
-    const obs = new MutationObserver(() => { measure(); syncFilter(); });
+    const obs = new MutationObserver(sync);
     obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-    return () => obs.disconnect();
+
+    // A font-family variable changes before its webfont necessarily finishes
+    // loading. Re-run getBBox when the real face becomes available so the SVG
+    // viewBox and outline do not stay sized for the fallback font.
+    const fonts = document.fonts;
+    const onFontsLoaded = () => {
+      if (mounted) sync();
+    };
+    fonts?.addEventListener('loadingdone', onFontsLoaded);
+    void fonts?.ready.then(onFontsLoaded);
+
+    return () => {
+      mounted = false;
+      obs.disconnect();
+      fonts?.removeEventListener('loadingdone', onFontsLoaded);
+    };
   });
 </script>
 
@@ -531,6 +548,7 @@
     font-family: var(--_divider-title-font-family);
     font-weight: var(--_divider-title-font-weight);
     font-size: var(--_divider-title-font-size);
+    line-height: var(--_divider-title-line-height);
     letter-spacing: var(--_divider-title-letter-spacing);
     fill: currentColor;
   }