@motion-proto/live-tokens 0.91.2 → 0.93.0

package/src/editor/skill-atlas/trees/create-page.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const createPage: SkillTree = {
   "id": "live-tokens-create-page",
-  "digest": "sha256:e9eafa612a3b863b",
+  "digest": "sha256:dac3be326461ce44",
   "title": "create-page",
   "tagline": "Create a Page Using Live Tokens",
   "nodes": [
@@ -164,19 +164,19 @@ export const createPage: SkillTree = {
         },
         {
           "label": "Type",
-          "lines": [105, 120],
+          "lines": [105, 127],
           "anchor": "### Type",
           "anchorEnd": "Use the semantic element for each place: one `h1`, an `h2` f"
         },
         {
           "label": "Size and emphasis",
-          "lines": [122, 130],
+          "lines": [129, 137],
           "anchor": "### Size",
           "anchorEnd": "In a row of actions the primary sits last, on the right. Up "
         },
         {
           "label": "Spacing",
-          "lines": [132, 146],
+          "lines": [139, 153],
           "anchor": "### Spacing",
           "anchorEnd": "Every section after the first opens with a hairline: `paddin"
         }
@@ -193,12 +193,12 @@ export const createPage: SkillTree = {
       "chips": [
         {
           "label": "LiveTokensRouter",
-          "lines": [152, 152],
+          "lines": [159, 159],
           "anchor": "`<LiveTokensRouter pages={...}>`: add a `pages` entry with `"
         },
         {
           "label": "LiveEditorOverlay",
-          "lines": [153, 153],
+          "lines": [160, 160],
           "anchor": "Manual `<LiveEditorOverlay>`: dispatch with `$derived.by(() "
         }
       ]
@@ -209,7 +209,7 @@ export const createPage: SkillTree = {
       "kind": "cli",
       "title": "Run check-page",
       "desc": "check-page --tests --strict --json applies every auto repair, proves the rendered page at its own route, and returns the fixes beside the remaining findings.",
-      "lines": [170, 170],
+      "lines": [177, 177],
       "anchor": "Run `npx live-tokens check-page <file> --tests --strict --js"
     },
     {
@@ -218,7 +218,7 @@ export const createPage: SkillTree = {
       "kind": "gate",
       "title": "Repair from guidance",
       "desc": "Each remaining finding carries its guidance. Make each repair, then run check-page again.",
-      "lines": [172, 172],
+      "lines": [179, 179],
       "anchor": "Each remaining finding carries a rule id, a line, and its `g"
     },
     {
@@ -227,31 +227,31 @@ export const createPage: SkillTree = {
       "kind": "chipset",
       "title": "Check the page in the browser",
       "desc": "The checkers cannot see a layout. Open the page at its width and check each line.",
-      "lines": [174, 190],
+      "lines": [181, 197],
       "anchor": "The checkers cannot see a layout. Open the page at the width",
       "anchorEnd": "`references/interaction-sources.md` names the sources for th",
       "chips": [
         {
           "label": "Structure",
-          "lines": [176, 180],
+          "lines": [183, 187],
           "anchor": "The first section holds what the user came for.",
           "anchorEnd": "The containers in a section align at the bottom."
         },
         {
           "label": "Actions",
-          "lines": [181, 184],
+          "lines": [188, 191],
           "anchor": "The actions sit where the eye goes last, with the one primar",
           "anchorEnd": "An action that runs longer than a moment shows progress in a"
         },
         {
           "label": "Fields",
-          "lines": [185, 186],
+          "lines": [192, 193],
           "anchor": "Every field has a default, and Reset restores it.",
           "anchorEnd": "Secondary settings sit in a `CollapsibleSection`. Every cont"
         },
         {
           "label": "Words and access",
-          "lines": [187, 188],
+          "lines": [194, 195],
           "anchor": "Labels use the user's words, such as \"Export slices\".",
           "anchorEnd": "Every `img` has `alt` text. Focus order follows the reading "
         }
@@ -263,7 +263,7 @@ export const createPage: SkillTree = {
       "kind": "step",
       "title": "Read the page twice",
       "desc": "From a distance only the sections show. Up close, every border and bar earns its place or goes.",
-      "lines": [192, 192],
+      "lines": [199, 199],
       "anchor": "Then read the page from a distance: the sections and their e"
     },
     {

package/src/editor/skill-atlas/trees/set-type.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const setType: SkillTree = {
   "id": "live-tokens-set-type",
-  "digest": "sha256:0c8d26a16313f9ee",
+  "digest": "sha256:51d5983b67b548cd",
   "title": "set-type",
   "tagline": "Set Typefaces from Google Fonts",
   "nodes": [
@@ -38,7 +38,7 @@ export const setType: SkillTree = {
           "label": "Choose the body face first",
           "lines": [30, 34],
           "anchor": "## Choose the body face first",
-          "anchorEnd": "The shipped text styles ask the display face for 600 and the"
+          "anchorEnd": "The display and heading usages ask the display face for 600 "
         },
         {
           "label": "The font matrix",

package/src/editor/ui/UIFontFamilySelector.svelte

@@ -15,6 +15,8 @@
     disabled?: boolean;
     selectionsLocked?: boolean;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -24,6 +26,7 @@
     disabled = false,
     selectionsLocked = false,
     onchange,
+    onwrite,
   }: Props = $props();
 
   const SOURCE_KIND_LABELS: Record<FontSourceKind, string> = {
@@ -191,6 +194,7 @@
   dropdownMinWidth="14rem"
   onreset={handleReset}
   onvarChange={initFromCurrent}
+  {onwrite}
 >
   {#snippet triggerTitle()}{activeLabel}{/snippet}
   {#snippet triggerMeta()}{displayFamily || '—'}{/snippet}
@@ -198,7 +202,7 @@
   {#snippet children({ close })}
   
       <UIOptionList>
-        {#each options as opt}
+        {#each options as opt (opt.key)}
           <UIOptionItem
             active={chosenKey === opt.key}
             onclick={() => selectOption(opt.key, close)}

package/src/editor/ui/UIFontWeightSelector.svelte

@@ -16,6 +16,8 @@
     disabled?: boolean;
     selectionsLocked?: boolean;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -25,6 +27,7 @@
     disabled = false,
     selectionsLocked = false,
     onchange,
+    onwrite,
   }: Props = $props();
 
   const options = [
@@ -87,6 +90,7 @@
   varPrefix="--font-weight-"
   {options}
   {onchange}
+  {onwrite}
 >
   {#snippet option({ opt, active, select })}
       {@const unsupported = availability !== null && !availability.weights.has(Number(opt.value))}

package/src/editor/ui/UILetterSpacingSelector.svelte

@@ -9,6 +9,8 @@
     disabled?: boolean;
     selectionsLocked?: boolean;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -18,6 +20,7 @@
     disabled = false,
     selectionsLocked = false,
     onchange,
+    onwrite,
   }: Props = $props();
 
   const options = [
@@ -38,6 +41,7 @@
   varPrefix="--letter-spacing-"
   {options}
   {onchange}
+  {onwrite}
 >
   {#snippet option({ opt, active, select })}
     <UIOptionItem {active} onclick={select}>

package/src/editor/ui/UILineHeightSelector.svelte

@@ -9,6 +9,8 @@
     disabled?: boolean;
     selectionsLocked?: boolean;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -18,6 +20,7 @@
     disabled = false,
     selectionsLocked = false,
     onchange,
+    onwrite,
   }: Props = $props();
 
   const options = [
@@ -39,6 +42,7 @@
   varPrefix="--line-height-"
   {options}
   {onchange}
+  {onwrite}
 >
   {#snippet option({ opt, active, select })}
   

package/src/editor/ui/UITextTransformSelector.svelte

@@ -12,6 +12,8 @@
     disabled?: boolean;
     selectionsLocked?: boolean;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -21,6 +23,7 @@
     disabled = false,
     selectionsLocked = false,
     onchange,
+    onwrite,
   }: Props = $props();
 
   // text-transform is a literal CSS keyword, not a scale alias — the picker
@@ -78,6 +81,7 @@
   dropdownMinWidth="12rem"
   onreset={handleReset}
   onvarChange={readResolved}
+  {onwrite}
 >
   {#snippet triggerTitle()}{activeLabel}{/snippet}
   {#snippet triggerMeta()}{current || '—'}{/snippet}

package/src/editor/ui/UIVariantSelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T extends { key: string; label?: string; value?: string }">
   import type { Snippet } from 'svelte';
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import { parseVariantRef } from './variantScales';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
@@ -28,6 +29,8 @@
     /** Trailing dropdown content (e.g. action buttons). */
     extras?: Snippet<[{ close: () => void }]>;
     onchange?: () => void;
+    /** Routes writes to the caller in place of the DOM; see `UITokenSelector`. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -46,6 +49,7 @@
     option: callerOption,
     extras: callerExtras,
     onchange,
+    onwrite,
   }: Props<T> = $props();
 
   let selector: UITokenSelector;
@@ -53,16 +57,9 @@
   let currentValue: string = $state('');
 
   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);
-    if (!m) return null;
-    const key = m[1].slice(varPrefix.length);
-    return validKeys.has(key) ? key : null;
+    return parseVariantRef(value, varPrefix, validKeys);
   }
 
   function readResolved() {
@@ -137,6 +134,7 @@
   {dropdownMaxWidth}
   onreset={handleReset}
   onvarChange={initFromCurrent}
+  {onwrite}
 >
   {#snippet triggerTitle()}
     {#if callerTriggerTitle}{@render callerTriggerTitle({ activeOption })}{:else}{activeOption?.label ?? ''}{/if}

package/src/editor/ui/VariablesTab.svelte

@@ -4,7 +4,7 @@
   import { PALETTE_SPECS } from '../core/palettes/paletteDerivation';
   import FontStackEditor from './FontStackEditor.svelte';
   import ProjectFontsSection from './ProjectFontsSection.svelte';
-  import TextStylesSection from './TextStylesSection.svelte';
+  import TextStylesSection from './text-styles/TextStylesSection.svelte';
   import ColumnsSection from './sections/ColumnsSection.svelte';
   import TokenScaleTable from './sections/TokenScaleTable.svelte';
   import WashesSection from './sections/WashesSection.svelte';
@@ -100,7 +100,6 @@
       </div>
 
       <div class="typography-group text-styles-group">
-        <h3 class="group-title">Text Styles</h3>
         <TextStylesSection />
       </div>
 
@@ -254,10 +253,11 @@
     gap: var(--ui-space-32);
   }
 
-  /* The definition table is wide (four pickers + preview per row); give it the
-     full row so it isn't squeezed into an auto-fill column. */
+  /* Each step row holds three size inputs, a sample and four pickers, so the
+     group takes the full row. */
   .text-styles-group {
     grid-column: 1 / -1;
+    gap: var(--ui-space-16);
   }
 
   /* Utility Tokens */

package/src/editor/ui/colors/ColorsTab.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { cubicOut } from 'svelte/easing';
-  import { oklchToHexClamped } from '../../core/palettes/oklch';
+  import { cssColorToOklch, oklchToCss, oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture } from '../../core/store/editorStore';
+  import { isEditable } from '../../core/store/editorKeybindings';
   import { selectedPalette } from '../../core/store/paletteFocus';
   import { applyHarmonyToAxes, axisStatuses, HARMONY_ELIGIBLE, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import AxisNumeral from './AxisNumeral.svelte';
@@ -13,10 +14,12 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
+  import { showCopyPopover } from '../copyPopover';
   import {
     setBaseColor,
     setAxisHues,
     unbindFamily,
+    swapBaseColors,
     palettesWithDefaults,
   } from './paletteBaseColor';
   import { HARMONY_MODE_BUTTONS } from './harmonyModeIcons';
@@ -108,23 +111,99 @@
     if (family) unbindFamily(family);
   }
 
+  // A swatch dropped on another swatch swaps their colors; a chip dropped there
+  // still unassigns. The swap source is held here because dataTransfer data is
+  // unreadable during dragover, and both ends of a swap live in this row.
+  let swapSource = $state<string | null>(null);
+  let swapTarget = $state<string | null>(null);
+
+  function onSwatchDragStart(e: DragEvent, family: string) {
+    startFamilyDrag(e, family);
+    swapSource = family;
+  }
+
+  function onSwatchDragEnd() {
+    swapSource = null;
+    swapTarget = null;
+  }
+
+  function acceptsSwap(sw: Swatch): boolean {
+    return sw.eligible && swapSource !== null && swapSource !== sw.label;
+  }
+
+  function onSwatchDragOver(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    swapTarget = sw.label;
+    unassignHover = false;
+  }
+
+  function onSwatchDragLeave(sw: Swatch) {
+    if (swapTarget === sw.label) swapTarget = null;
+  }
+
+  function onSwatchDrop(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    swapBaseColors(swapSource!, sw.label);
+    onSwatchDragEnd();
+  }
+
+  const swatchEls: Record<string, HTMLButtonElement> = {};
+
+  // Copy and paste act on the selected swatch, never the focused one: Safari
+  // and macOS Firefox do not focus a button on click.
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;
+    if (e.target instanceof HTMLElement && isEditable(e.target)) return;
+    const sw = swatches.find((s) => s.label === selected);
+    if (!sw) return;
+    const key = e.key.toLowerCase();
+    if (key === 'c') {
+      // Selected page text keeps the browser's own copy.
+      if (window.getSelection()?.isCollapsed === false) return;
+      e.preventDefault();
+      const css = oklchToCss(sw.color.l, sw.color.c, sw.color.h);
+      navigator.clipboard?.writeText(css);
+      showCopyPopover(css, swatchEls[sw.label]);
+    } else if (key === 'v') {
+      e.preventDefault();
+      pasteInto(sw, swatchEls[sw.label]);
+    }
+  }
+
+  async function pasteInto(sw: Swatch, anchor: EventTarget | null) {
+    const color = cssColorToOklch(await navigator.clipboard.readText());
+    if (!color) return;
+    // A bound color drags its axis along, so an applied harmony no longer holds.
+    if (sw.axis && color.h !== sw.color.h) activeMode = 'custom';
+    setBaseColor(sw.label, color);
+    showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+  }
+
   let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
 
   let swatches = $derived.by(() => {
     const statuses = axisStatuses(activeMode, $editorState.harmonyAxes);
     return PALETTE_SPECS.map((spec) => {
-      const { l, c, h } = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
+      const color = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
       const index = $editorState.harmonyAxes.findIndex((a) => a.family === spec.label);
       return {
         label: spec.label,
         display: spec.displayLabel ?? spec.label,
-        hex: oklchToHexClamped(l, c, h),
+        color,
+        hex: oklchToHexClamped(color.l, color.c, color.h),
         axis: index === -1 ? null : { index, status: statuses[index] },
         eligible: ELIGIBLE.has(spec.label),
       };
     });
   });
 
+  type Swatch = (typeof swatches)[number];
+
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
   // Declaration order, never a computed one: sorting by luminance made the row
   // reshuffle under the pointer while a lightness edit was in flight.
@@ -150,6 +229,8 @@
   }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <div class="colors-tab">
   <div class="pane">
     <section id="colors-wheel" class="block">
@@ -227,7 +308,7 @@
       <div class="harmony-cols">
         <div class="group">
           <h3 class="title">Selected color</h3>
-          {#snippet swatchRow(row: typeof swatches, acceptsDrop = false)}
+          {#snippet swatchRow(row: Swatch[], acceptsDrop = false)}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="swatch-row"
@@ -242,12 +323,18 @@
                   class="swatch"
                   class:active={selected === sw.label}
                   class:draggable={sw.eligible}
+                  class:swap-target={swapTarget === sw.label}
                   style="--swatch-fill: {sw.hex}"
                   draggable={sw.eligible}
                   title={sw.eligible ? `${sw.display} · drag onto an axis to assign it` : sw.display}
                   aria-label={`Select ${sw.display}`}
                   aria-pressed={selected === sw.label}
-                  ondragstart={(e) => startFamilyDrag(e, sw.label)}
+                  bind:this={swatchEls[sw.label]}
+                  ondragstart={(e) => onSwatchDragStart(e, sw.label)}
+                  ondragend={onSwatchDragEnd}
+                  ondragover={(e) => onSwatchDragOver(e, sw)}
+                  ondragleave={() => onSwatchDragLeave(sw)}
+                  ondrop={(e) => onSwatchDrop(e, sw)}
                   onclick={() => select(sw.label)}
                 >
                   <span class="frame">
@@ -685,6 +772,13 @@
     border-color: var(--ui-border-high);
   }
 
+  /* The axis row's drop ring, doubled so it never reads as selection. */
+  .swatch.swap-target .frame {
+    border-color: var(--ui-text-primary);
+    outline: 1px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+
   .swatch-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);

package/src/editor/ui/colors/paletteBaseColor.ts

@@ -208,6 +208,23 @@ function giveAxisHue(s: EditorState, index: number, family: string): boolean {
   return false;
 }
 
+/** Two families trade seed colors. Each axis binding travels with the color it
+ *  held, so every axis keeps its hue and an applied harmony stays true. */
+export function swapBaseColors(a: string, b: string): void {
+  if (a === b) return;
+  mutate(`colors: swap ${a} and ${b}`, (s) => {
+    const ca = ensureConfig(s, a);
+    const cb = ensureConfig(s, b);
+    [ca.baseColor, cb.baseColor] = [cb.baseColor, ca.baseColor];
+    syncBaseAnchor(ca);
+    syncBaseAnchor(cb);
+    for (const axis of s.harmonyAxes) {
+      if (axis.family === a) axis.family = b;
+      else if (axis.family === b) axis.family = a;
+    }
+  });
+}
+
 /** Set several seed colors in ONE undo entry (harmony apply, global rotate). */
 export function setBaseColors(patch: Record<string, Oklch>, historyLabel = 'colors: harmony'): void {
   transaction(historyLabel, (s) => {