@motion-proto/live-tokens 0.91.2 → 0.92.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/sections/textStyles.ts

@@ -1,110 +1,62 @@
-/**
- * Registry of the semantic text styles rendered by TextStylesSection.
- * Each style is a bundle of alias tokens declared in tokens.css; the prefix
- * joins with a kind suffix (`-font-family`, `-font-size`, …) to form each
- * axis variable the editor's pickers target.
- *
- * Family/size/weight/letter-spacing/line-height are editable on every style.
- * `hasTextTransform` marks the one style (eyebrow) that also exposes a
- * text-transform picker — the only axis that exists on just one style.
- */
+import {
+  DEFAULTS,
+  EYEBROW_PREFIX,
+  STEPS,
+  USAGES,
+  stepPrefix,
+  type StylePrefix,
+  type Usage,
+} from '../../core/typeScale/typeScale';
 
 export interface TextStyle {
   name: string;
   label: string;
   /** Variable prefix, e.g. `--heading-xl`; suffixes form each axis var. */
-  prefix: string;
-  /** Element (or class) this style is the default for. */
+  prefix: StylePrefix;
+  /** The elements `site.css` styles with it, or else its class. */
   defaultElement: string;
   preview: string;
   /** Whether this style exposes an editable `-text-transform` axis. */
   hasTextTransform?: boolean;
 }
 
+const USAGE_LABEL: Readonly<Record<Usage, string>> = {
+  display: 'Display',
+  heading: 'Heading',
+  body: 'Body',
+  editorial: 'Editorial',
+  code: 'Code',
+};
+
+const USAGE_PREVIEW: Readonly<Record<Usage, string>> = {
+  display: 'Tokens that move with every edit',
+  heading: 'Choosing a palette for the launch page',
+  body: 'Body copy for comfortable reading.',
+  editorial: 'A pull quote sets the tone for the essay.',
+  code: 'const total = sum(items.map(price));',
+};
+
+/** Every text style in `tokens.css` order: each usage's steps, largest first, then the eyebrow. */
 export const TEXT_STYLES: TextStyle[] = [
-  {
-    name: 'heading-xl',
-    label: 'Heading XL',
-    prefix: '--heading-xl',
-    defaultElement: 'h1',
-    preview: 'Page title',
-  },
-  {
-    name: 'heading-lg',
-    label: 'Heading LG',
-    prefix: '--heading-lg',
-    defaultElement: 'h2',
-    preview: 'Section heading',
-  },
-  {
-    name: 'heading-md',
-    label: 'Heading MD',
-    prefix: '--heading-md',
-    defaultElement: 'h3',
-    preview: 'Subsection heading',
-  },
-  {
-    name: 'heading-sm',
-    label: 'Heading SM',
-    prefix: '--heading-sm',
-    defaultElement: 'h4',
-    preview: 'Minor heading',
-  },
-  {
-    name: 'body-md',
-    label: 'Body MD',
-    prefix: '--body-md',
-    defaultElement: 'p',
-    preview: 'Body copy for comfortable reading.',
-  },
-  {
-    name: 'body-sm',
-    label: 'Body SM',
-    prefix: '--body-sm',
-    defaultElement: 'small',
-    preview: 'Captions and secondary text.',
-  },
-  {
-    name: 'editorial-xl',
-    label: 'Editorial XL',
-    prefix: '--editorial-xl',
-    defaultElement: 'editorial-xl',
-    preview: 'Pull quotes and opening statements.',
-  },
-  {
-    name: 'editorial-lg',
-    label: 'Editorial LG',
-    prefix: '--editorial-lg',
-    defaultElement: 'editorial-lg',
-    preview: 'Standfirsts and section ledes.',
-  },
-  {
-    name: 'editorial-md',
-    label: 'Editorial MD',
-    prefix: '--editorial-md',
-    defaultElement: 'editorial-md',
-    preview: 'Long-form reading, set in the editorial face.',
-  },
-  {
-    name: 'editorial-sm',
-    label: 'Editorial SM',
-    prefix: '--editorial-sm',
-    defaultElement: 'editorial-sm',
-    preview: 'Captions, credits, and asides.',
-  },
-  {
-    name: 'code',
-    label: 'Code',
-    prefix: '--code',
-    defaultElement: 'code',
-    preview: 'const total = sum(items);',
-  },
+  ...USAGES.flatMap((usage) =>
+    [...STEPS].reverse().map((step): TextStyle => {
+      const name = `${usage}-${step}`;
+      const elements = DEFAULTS.usages[usage].elements[step];
+      return {
+        name,
+        label: `${USAGE_LABEL[usage]} ${step.toUpperCase()}`,
+        prefix: stepPrefix(usage, step),
+        defaultElement: elements ? elements.join(', ') : `.${name}`,
+        preview: USAGE_PREVIEW[usage],
+      };
+    }),
+  ),
   {
     name: 'eyebrow',
     label: 'Eyebrow',
-    prefix: '--eyebrow',
-    defaultElement: 'eyebrow',
-    preview: 'Overline label',
+    prefix: EYEBROW_PREFIX,
+    defaultElement: '.eyebrow',
+    preview: 'Release notes',
     hasTextTransform: true,
   },
 ];

package/src/editor/ui/text-styles/ControlBody.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    width: string;
+    /** Null draws no link bar. */
+    linked: boolean | null;
+    children: Snippet;
+    /** Content after the body, such as a lock or a unit. */
+    after?: Snippet;
+  }
+
+  let { width, linked, children, after }: Props = $props();
+</script>
+
+{#if linked === null}
+  <div class="ctl-body" style:--w={width}>{@render children()}</div>
+{:else}
+  <div class="linkwrap" class:is-unlinked={!linked}>
+    <div class="ctl-body" style:--w={width}>{@render children()}</div>
+    {@render after?.()}
+  </div>
+{/if}
+
+<style>
+  /* The link bar matches the editor's token selectors: a white bar flush
+     against a linked control, an amber tick beside an indented unlinked one. */
+  .linkwrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    min-width: 0;
+    padding-left: 4px;
+  }
+
+  .linkwrap::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 4px;
+    height: 1.75rem;
+    background: var(--ui-text-primary);
+    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition:
+      width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+      height 220ms cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .linkwrap.is-unlinked {
+    padding-left: 10px;
+  }
+
+  .linkwrap.is-unlinked::before {
+    width: 2px;
+    height: 0.875rem;
+    background: var(--ui-link-broken);
+    border-radius: 1px;
+  }
+
+  /* Unlinking indents the body by 6px and narrows it by as much, so whatever
+     follows holds its position. */
+  .ctl-body {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: var(--w);
+    min-width: 0;
+  }
+
+  .is-unlinked > .ctl-body {
+    width: calc(var(--w) - 6px);
+  }
+
+  .ctl-body > :global(*) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ctl-body :global(.ui-token-selector) {
+    display: block;
+    width: 100%;
+  }
+
+  /* The trigger names the value; a resolved-value line under it would push
+     the lock off the trigger's centre line. */
+  .ctl-body :global(.ui-ts-meta-text) {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .linkwrap::before {
+      transition: none;
+    }
+  }
+</style>

package/src/editor/ui/text-styles/ResetIcon.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  interface Props {
+    /** Names the value in the button's accessible label. */
+    label: string;
+    visible: boolean;
+    onreset: () => void;
+  }
+
+  let { label, visible, onreset }: Props = $props();
+
+  // The icon leaves the DOM once its value resets, so focus moves to the
+  // control it restored.
+  async function reset(e: MouseEvent) {
+    const scope = (e.currentTarget as HTMLElement).closest<HTMLElement>('[data-reset-scope]');
+    onreset();
+    await tick();
+    scope?.querySelector<HTMLElement>('input, select, button:not(.reset)')?.focus();
+  }
+</script>
+
+{#if visible}
+  <button
+    type="button"
+    class="reset"
+    aria-label="Reset {label} to default"
+    title="Reset to default"
+    onclick={reset}
+  >
+    <i class="fas fa-rotate-left" aria-hidden="true"></i>
+  </button>
+{/if}
+
+<style>
+  .reset {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-tertiary);
+    font-size: 0.6875rem;
+    cursor: pointer;
+  }
+
+  .reset:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-higher);
+  }
+
+  .reset:focus-visible {
+    outline: 2px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+</style>