@motion-proto/live-tokens 0.55.1 → 0.57.0

package/README.md

@@ -1,4 +1,4 @@
-# Live Tokens
+# LiveTokens
 
 A design system for styling and building Svelte + Vite microsites. Edit tokens and components in a dev-only editor and watch the running site repaint on every input. Save the result as a theme file and carry it between projects.
 
@@ -17,7 +17,7 @@ The editor is dev-only. Production builds get plain CSS variables and the compon
 - **Themes.** A theme is a whole look in one file: colors and type plus a config for every component, stored by value. Loading one changes a single pointer file, and nothing your site ships changes until you Adopt. Export a theme and import it into another project to restore the look in one step.
 - **Seven example looks.** Autumn, Halloween, Midnight Study, Ocean, Royal Velvet, Spring Meadow, and Sunset each ship as a full theme: colors, a Google Fonts pairing, and a shape personality of radius, padding, gap, and border-width aliases. They ship inside the package, so trying one needs no local files. Load Motion Proto to return to the default. Saving over a preset writes a local copy that shadows the shipped one; delete the copy and the shipped version returns.
 - **Vite plugin.** Hosts the `/api/live-tokens/{colors-and-type,component-configs,themes}/*` routes the editor reads and writes through. The single namespace keeps these routes clear of anything your app serves under `/api`.
-- **Claude Code skills.** Five bundled skills that drive the package from plain English. See [Claude Code skills](#claude-code-skills).
+- **Claude Code skills.** Six bundled skills that drive the package from plain English. See [Claude Code skills](#claude-code-skills).
 
 ## Install
 
@@ -267,13 +267,14 @@ npx @motion-proto/live-tokens <command>
 | `check-component <id>` | Validate a component's runtime, editor, and registration against the authoring contract. |
 | `generate-theme <brief.json> [--no-activate] [--dry-run] [--carry-from <name>]` | Build a full theme from a 10-seed OKLCH brief, enforce AA contrast, write `themes/<slug>.json`, and open it. |
 | `adjust <ops.json> [--dry-run]` | Move radius, padding, gap, and border-width aliases along their token scales. |
+| `set-fonts <brief.json> [--dry-run] [--no-verify]` | Bind Google Fonts families to the theme's font stacks, verified against the API. |
 | `migrate [--check] [--write] [--tokens <path>]` | Reconcile the project with the installed package: additive `tokens.css` migrations, the pre-0.48 data-tree move, and a report on source references to the routes that moved in 0.35.0. |
 
 Once installed in a project, the same commands are available as `npx live-tokens <command>`.
 
 ## Claude Code skills
 
-The package bundles five Claude Code skills. They encode the conventions this README cannot carry in full: which component fits a need, how a page is wired, what a valid theme looks like in OKLCH, and how shape and space move along the token scales. Each triggers from an ordinary request, so there are no slash commands to learn.
+The package bundles six Claude Code skills. They encode the conventions this README cannot carry in full: which component fits a need, how a page is wired, what a valid theme looks like in OKLCH, how two typefaces sit together, and how geometry moves along the token scales. Each triggers from an ordinary request, so there are no slash commands to learn.
 
 ### Install
 
@@ -303,13 +304,25 @@ The skill composes the page from shipped components, styles every value with `va
 
 Ask for a look: "a dark, moody night theme", "a St Patrick's Day theme in green and gold", "warmer", "more contrast", "calmer".
 
-The skill translates the brief into ten OKLCH seeds (Brand, Accent, Special, Canvas, Neutral, Alternate, Info, Success, Warning, Danger) plus a light or dark scheme, then runs `npx live-tokens generate-theme <brief.json>`. The CLI assembles the curves, enforces AA contrast on derived text tokens and auto-corrects where it can, writes `themes/<slug>.json`, opens it, and prints a contrast report. Exit 1 means the seeds themselves are unworkable, and each failure line names the seed to change.
+A theme is three decisions made from one brief: color, type, and geometry. The skill owns color and delegates the other two to `live-tokens-pair-fonts` and `live-tokens-adjust-geometry`, so the whole look comes from the same reading of the brief.
 
-Most of the skill is the judgment the generator cannot supply: a chroma budget scaled to how much screen area each palette covers, per-role lightness and hue bands for each scheme, gamut guardrails against impossible seeds, harmony modes, the optional canvas gradient, shadow weight for the canvas, and OKLCH anchors for named colors.
+For color it translates the brief into ten OKLCH seeds (Brand, Accent, Special, Canvas, Neutral, Alternate, Info, Success, Warning, Danger) plus a light or dark scheme, then runs `npx live-tokens generate-theme <brief.json>`. The CLI assembles the curves, enforces AA contrast on derived text tokens and auto-corrects where it can, writes `themes/<slug>.json`, opens it, and prints a contrast report. Exit 1 means the seeds themselves are unworkable, and each failure line names the seed to change.
 
-Scope: colors only. Fonts, gradients, and component aliases carry forward from the open theme, or from `--carry-from <name>`. `--dry-run` prints the report without writing; `--no-activate` writes without opening. Opening a theme never changes what your site ships; Adopt does. Regenerating replaces that theme's whole color state, including palette edits made in the editor since the last run.
+Most of the skill is the judgment the generator cannot supply: a chroma budget scaled to how much screen area each palette covers, per-role lightness and hue bands for each scheme, gamut guardrails against impossible seeds, harmony modes, the optional canvas gradient, and a voice-to-shape table for the shape step. OKLCH anchors for named holidays and seasons live in a reference file the skill reads on demand.
 
-### `live-tokens-adjust-shape-space`
+Color lands in the theme file; type and shape land in the unsaved buffers, and one Save keeps all three. `--dry-run` prints the report without writing; `--no-activate` writes without opening. Opening a theme never changes what your site ships; Adopt does. Regenerating replaces that theme's whole color state, including palette edits made in the editor since the last run, and carries the live buffers forward, so re-rolling color after setting fonts and shape keeps both.
+
+### `live-tokens-pair-fonts`
+
+Ask for type: "pair some fonts for this theme", "what font should the headings use?", "make the type more editorial", "something friendlier", "a serif for headings".
+
+The skill chooses the families and runs `npx live-tokens set-fonts <brief.json>`, which binds each one to `--font-display`, `--font-sans`, `--font-serif`, or `--font-mono`. Every family is checked against the Google Fonts API before it is written, and the URL is built from the weights that family actually has: a range for a variable font, an enumeration for a static one, a bare URL for a single-weight display face. The report names the weights your typography tokens ask for and the family does not carry.
+
+The judgment is the skill's half. It anchors on the body face, because that is most of the words on the page and text faces survive small sizes where display faces do not. It classifies both candidates by form model (dynamic, rational, geometric) and applies the font matrix: two faces sharing a skeleton under different surfaces pair reliably, two faces sharing a surface over different skeletons fight, and two faces far apart on both read as a decision. It also carries the screen test a body face has to pass, a voice table from brief to type, and the Google Fonts superfamilies for when the type should stay quiet.
+
+Scope: type only, and never color. Edits land in the colors-and-type `_working.json` buffer, so save the open theme to keep them. `--dry-run` reports without writing.
+
+### `live-tokens-adjust-geometry`
 
 Ask for shape or space: "make the buttons pill shaped", "sharper corners on the cards", "space it out", "tighter", "thinner borders".
 
@@ -323,7 +336,7 @@ Edits land in each affected component's `_working.json` buffer, which is what th
 
 Ask for something the catalogue lacks: "author a Rating component", "make my Chip component editable in the editor".
 
-The skill covers the four-step recipe: the runtime `.svelte` file with its `:global(:root)` token block, the editor `.svelte` file exporting `allTokens` and its variant groups, the `registerComponent()` call, and the catalogue entry that keeps `live-tokens-pick-component` current. It carries the naming scheme, the token suffix vocabulary, the state model (component states such as selected and disabled are separate from interaction states such as hover), linked siblings, the public-imports rule, and the shipped `Toggle` as a worked example from runtime file to registration.
+The skill covers the recipe: the runtime `.svelte` file with its `:global(:root)` token block, the editor `.svelte` file exporting `allTokens` and its variant groups, the `registerComponent()` call, and the catalogue entry that keeps `live-tokens-pick-component` current. It carries the naming scheme, the token suffix vocabulary, the state model (component states such as selected and disabled are separate from interaction states such as hover), and the public-imports rule, and points at the shipped `Toggle` in `node_modules` as the worked example. Linked siblings, intrinsics, and the fixed-overlay portal rule sit in reference files the skill reads only when a component needs them.
 
 Verify the result:
 

package/bin/cli.mjs

@@ -6,6 +6,7 @@
 //   check-component <id>     Validate a component against the add-component skill contract.
 //   generate-theme <brief>   Build a theme from a 10-seed OKLCH brief and open it.
 //   adjust <ops.json>        Apply radius/padding/gap/border-width ops to the open buffer.
+//   set-fonts <brief.json>   Bind Google Fonts families to the theme's font stacks.
 //   migrate [...]            Reconcile tokens.css, the data tree, and route references.
 
 import { cpSync, existsSync, mkdirSync, readdirSync, statSync } from 'node:fs';
@@ -23,6 +24,7 @@ import { runMigrateRoutes, formatRouteResult } from './migrate-routes.mjs';
 import { runCreate, formatCreateResult } from './create.mjs';
 import { runGenerateTheme, formatGenerateThemeResult } from './generate-theme.mjs';
 import { runAdjust, formatAdjustResult } from './adjust.mjs';
+import { runSetFonts, formatSetFontsResult } from './set-fonts.mjs';
 
 const USAGE = `Usage: npx @motion-proto/live-tokens <command> [options]
 
@@ -47,11 +49,23 @@ Commands:
   adjust <ops.json> [--dry-run]
                               Move radius, padding, gap, and border-width
                               aliases along their token scales (see the
-                              live-tokens-adjust-shape-space skill). Reads each
+                              live-tokens-adjust-geometry skill). Reads each
                               component's live config and writes the result to
                               that component's unsaved buffer, so save the open
                               theme in the editor to keep it. --dry-run prints
                               the report without writing.
+  set-fonts <brief.json> [--dry-run] [--no-verify]
+                              Bind Google Fonts families to --font-display,
+                              --font-sans, --font-serif, --font-mono and
+                              --font-editorial (see
+                              the live-tokens-pair-fonts skill). Each family is
+                              verified against the Google Fonts API and the URL
+                              is negotiated from the weights it actually has.
+                              Writes the result to the unsaved colors-and-type
+                              buffer, so save the open theme in the editor to
+                              keep it. --dry-run prints the report without
+                              writing; --no-verify skips the network and
+                              requires an explicit URL per family.
   migrate [--check] [--write] [--tokens <path>]
                               Reconcile your project with the installed package:
                               applies additive tokens.css migrations, moves a
@@ -148,6 +162,30 @@ if (command === 'adjust') {
   }
 }
 
+if (command === 'set-fonts') {
+  const briefPath = rest.find((a) => !a.startsWith('-'));
+  if (!briefPath) {
+    fail(`Usage: npx @motion-proto/live-tokens set-fonts <brief.json> [--dry-run] [--no-verify]`);
+  }
+  if (rest.includes('--no-activate')) {
+    fail(
+      `set-fonts has no --no-activate: it edits the open buffer, which is what the page already runs. ` +
+        `Drop the flag and re-run.`,
+    );
+  }
+  try {
+    const result = await runSetFonts({
+      briefPath,
+      dryRun: rest.includes('--dry-run'),
+      verify: !rest.includes('--no-verify'),
+    });
+    console.log(formatSetFontsResult(result));
+    process.exit(0);
+  } catch (err) {
+    fail(`set-fonts failed: ${err instanceof Error ? err.message : String(err)}`);
+  }
+}
+
 if (command === 'migrate') {
   const check = rest.includes('--check');
   const write = rest.includes('--write');
@@ -229,8 +267,9 @@ const SAMPLE_PROMPTS = {
   'live-tokens-build-page': 'build a pricing page using live-tokens components',
   'live-tokens-pick-component': "what's the difference between TabBar and SegmentedControl?",
   'live-tokens-create-component': 'author a new Toggle component for my live-tokens project',
-  'live-tokens-generate-theme': 'make me a bright and cheerful color theme',
-  'live-tokens-adjust-shape-space': 'make the buttons pill shaped',
+  'live-tokens-generate-theme': 'make me a bright and cheerful theme',
+  'live-tokens-adjust-geometry': 'make the buttons pill shaped',
+  'live-tokens-pair-fonts': 'pair some fonts for this theme',
 };
 
 const installedSamples = skills

package/bin/set-fonts.mjs

@@ -0,0 +1,280 @@
+// `live-tokens set-fonts` worker.
+//
+// Reads a pairing brief (JSON), verifies each family against Google Fonts,
+// binds it to a font stack via the compiled engine (dist-plugin/fontPairing —
+// the CLI never imports TS sources), and writes the result into
+// `colors-and-type/_working.json`: the same buffer the editor's own font edits
+// land in, so a retype is an unsaved edit the user saves into a theme when they
+// want to keep it. Named colors-and-type files, themes, tokens.css and
+// fonts.css are never touched, and nothing is activated.
+
+import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { resolveTokensCssPath } from './migrate.mjs';
+
+const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const ENGINE = resolve(pkgRoot, 'dist-plugin/fontPairing/index.js');
+const packageDataDir = join(pkgRoot, 'src/live-tokens/data');
+
+// Google serves a different stylesheet per user agent; ask as a browser would
+// so the weight census matches what the page will actually load.
+const BROWSER_UA =
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36';
+
+const SOURCE_LABELS = {
+  working: 'your unsaved edits',
+  theme: 'the open theme',
+  default: 'the package default',
+};
+
+async function loadEngine() {
+  if (!existsSync(ENGINE)) {
+    throw new Error(
+      `font pairing engine not found at ${relative(process.cwd(), ENGINE)}. ` +
+        `Build the plugin first (npm run build:plugin).`,
+    );
+  }
+  return import(ENGINE);
+}
+
+function readJson(path) {
+  return JSON.parse(readFileSync(path, 'utf8'));
+}
+
+function readJsonIfExists(path) {
+  return existsSync(path) ? readJson(path) : null;
+}
+
+function browserFetch(url) {
+  return fetch(url, { headers: { 'user-agent': BROWSER_UA } });
+}
+
+/** The open theme, read the way every other door reads it: the local file
+ *  first, then the copy the installed package ships. */
+function readActiveTheme(themesDir) {
+  const slug = readJsonIfExists(join(themesDir, '_active.json'))?.activeFile ?? 'default';
+  const theme =
+    readJsonIfExists(join(themesDir, `${slug}.json`)) ??
+    readJsonIfExists(join(packageDataDir, 'themes', `${slug}.json`));
+  return theme ? { slug, theme } : null;
+}
+
+/** Mirrors the dev server's live colors-and-type resolution: the unsaved
+ *  buffer, then the open theme's own copy, then the package default. */
+function readLiveColorsAndType(colorsAndTypeDir, active) {
+  const working = readJsonIfExists(join(colorsAndTypeDir, '_working.json'));
+  if (working) return { colorsAndType: working, source: 'working' };
+  if (active?.theme?.colorsAndType) return { colorsAndType: active.theme.colorsAndType, source: 'theme' };
+  const shipped =
+    readJsonIfExists(join(colorsAndTypeDir, 'default.json')) ??
+    readJsonIfExists(join(packageDataDir, 'colors-and-type', 'default.json'));
+  if (!shipped) throw new Error(`no colors and type to read at ${colorsAndTypeDir}`);
+  return { colorsAndType: shipped, source: 'default' };
+}
+
+function normalizeFace(slot, value) {
+  if (typeof value === 'string') return { name: value };
+  if (value && typeof value === 'object' && typeof value.name === 'string') {
+    return { name: value.name, ...(value.url ? { url: value.url } : {}) };
+  }
+  throw new Error(`brief slot "${slot}" must be a family name or { "name": "...", "url": "..." }`);
+}
+
+function sameJson(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+/** `engine` and `fetcher` are test seams; the CLI always runs the compiled
+ *  bundle against the live API. */
+export async function runSetFonts({
+  briefPath,
+  dryRun = false,
+  verify = true,
+  root = process.cwd(),
+  colorsAndTypeDir,
+  themesDir,
+  tokensCssPath,
+  engine,
+  fetcher = browserFetch,
+} = {}) {
+  const {
+    applyFontPairing,
+    resolveGoogleFont,
+    requiredWeights,
+    weightCoverage,
+    SLOT_ORDER,
+    SLOT_VARIABLES,
+    readLiveTokensConfig,
+    resolveDataDirs,
+  } = engine ?? (await loadEngine());
+
+  const briefFull = resolve(root, briefPath);
+  if (!existsSync(briefFull)) throw new Error(`brief file not found at ${relative(root, briefFull)}`);
+  let brief;
+  try {
+    brief = readJson(briefFull);
+  } catch (err) {
+    throw new Error(`brief file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
+  }
+
+  const requested = SLOT_ORDER.filter((slot) => brief[slot] !== undefined).map((slot) => ({
+    slot,
+    face: normalizeFace(slot, brief[slot]),
+  }));
+  if (requested.length === 0) {
+    throw new Error(`brief names no slot. Use one or more of: ${SLOT_ORDER.join(', ')}.`);
+  }
+
+  const resolved = colorsAndTypeDir && themesDir ? null : resolveDataDirs();
+  const colorsDir = colorsAndTypeDir ?? resolved.colorsAndTypeDir;
+  const themes = themesDir ?? resolved.themesDir;
+  if (!existsSync(colorsDir)) {
+    throw new Error(`no colors and type at ${relative(root, colorsDir)}. Run the dev server once to create it.`);
+  }
+
+  const active = readActiveTheme(themes);
+  const { colorsAndType, source } = readLiveColorsAndType(colorsDir, active);
+
+  const pairing = {};
+  const faces = [];
+  for (const { slot, face } of requested) {
+    if (!verify) {
+      if (!face.url) {
+        throw new Error(
+          `--no-verify needs an explicit URL for "${slot}". Give it as ` +
+            `{ "name": "${face.name}", "url": "https://fonts.googleapis.com/css2?..." } ` +
+            `or drop the flag and let the CLI negotiate one.`,
+        );
+      }
+      pairing[slot] = { name: face.name, url: face.url };
+      faces.push({ slot, name: face.name, url: face.url, weights: [], italics: false, verified: false });
+      continue;
+    }
+    const found = face.url
+      ? { name: face.name, url: face.url, weights: [], italics: false }
+      : await resolveGoogleFont(face.name, fetcher);
+    pairing[slot] = { name: found.name, url: found.url, weights: found.weights, italics: found.italics };
+    faces.push({ slot, ...found, verified: true, pinned: Boolean(face.url) });
+  }
+
+  const { colorsAndType: next, report } = applyFontPairing(colorsAndType, pairing);
+
+  const tokensPath = resolveTokensCssPath(tokensCssPath, readLiveTokensConfig().tokensCssPath, root);
+  let coverage = [];
+  if (tokensPath && existsSync(tokensPath)) {
+    const covered = {};
+    for (const face of faces) {
+      if (!face.verified || face.weights.length === 0) continue;
+      covered[SLOT_VARIABLES[face.slot]] = { name: face.name, weights: face.weights, italics: face.italics };
+    }
+    coverage = weightCoverage(
+      requiredWeights(readFileSync(tokensPath, 'utf8'), next.cssVariables ?? {}),
+      covered,
+    );
+  }
+
+  const workingPath = join(colorsDir, '_working.json');
+  const savedColorsAndType =
+    active?.theme?.colorsAndType ??
+    readJsonIfExists(join(colorsDir, 'default.json')) ??
+    readJsonIfExists(join(packageDataDir, 'colors-and-type', 'default.json'));
+
+  // Returning the buffer to what the open theme already holds is a discard,
+  // not an edit — the same call the dev server's own PUT makes.
+  const backToSaved = savedColorsAndType !== null && sameJson(next, savedColorsAndType);
+  let wrote = null;
+  if (!dryRun && report.changed) {
+    if (backToSaved) {
+      if (existsSync(workingPath)) rmSync(workingPath);
+      wrote = 'cleared';
+    } else {
+      writeFileSync(workingPath, JSON.stringify(next, null, 2) + '\n');
+      wrote = 'buffer';
+    }
+  }
+
+  return {
+    briefPath: briefFull,
+    colorsAndTypeDir: colorsDir,
+    workingPath,
+    openTheme: active?.slug ?? null,
+    source,
+    verified: verify,
+    dryRun,
+    faces,
+    changes: report.changes,
+    dropped: report.dropped,
+    coverage,
+    changed: report.changed,
+    wrote,
+  };
+}
+
+export function formatSetFontsResult(result) {
+  const root = process.cwd();
+  const lines = [];
+
+  if (!result.changed) {
+    lines.push('Nothing to change: those faces are already bound to those stacks.');
+    return lines.join('\n');
+  }
+
+  const from =
+    result.source === 'theme' && result.openTheme
+      ? `theme "${result.openTheme}"`
+      : SOURCE_LABELS[result.source];
+  const verb = result.dryRun ? 'Would set' : 'Set';
+  lines.push(`${verb} ${result.changes.length} font stack(s), reading from ${from}.`);
+
+  const width = Math.max(0, ...result.changes.map((c) => c.variable.length));
+  for (const change of result.changes) {
+    lines.push(`    ${change.variable.padEnd(width)}  ${change.from ?? '(none)'} → ${change.to}`);
+  }
+
+  for (const face of result.faces) {
+    if (!face.verified) continue;
+    const weights = face.weights.length > 0 ? `${face.weights.join(', ')}` : 'single weight';
+    lines.push(`\n${face.name}  (${face.slot})`);
+    lines.push(`    weights: ${weights}${face.italics ? ' + italics' : ', no italics'}`);
+    lines.push(`    ${face.url}`);
+  }
+
+  if (result.dropped.length > 0) {
+    lines.push(
+      `\nDropped ${result.dropped.length} source(s) no stack references any more: ` +
+        `${result.dropped.map((d) => d.names.join(', ')).join('; ')}.`,
+    );
+  }
+
+  const gaps = result.coverage.filter((c) => c.missing.length > 0);
+  if (gaps.length > 0) {
+    lines.push('\nWeight coverage:');
+    for (const gap of gaps) {
+      lines.push(
+        `    ${gap.family} (${gap.stack}) has no ${gap.missing.join(', ')}; ` +
+          `tokens ask for ${gap.required.join(', ')}. The browser will synthesize the rest.`,
+      );
+    }
+  }
+  const body = result.coverage.find((c) => c.stack === '--font-sans');
+  if (body && !body.italics) {
+    lines.push(`\n${body.family} has no italics. Emphasis in body text will be synthesized.`);
+  }
+
+  if (result.wrote === 'buffer') {
+    lines.push(
+      `\nReload the app to see it. This is an unsaved edit: save the open theme in the ` +
+        `editor's Theme panel to keep it, or load a theme to discard it.`,
+    );
+  } else if (result.wrote === 'cleared') {
+    lines.push(
+      `\nThat is what the open theme already holds, so the unsaved buffer was discarded. ` +
+        `Reload the app to see it.`,
+    );
+  } else if (result.dryRun) {
+    lines.push(`\nDry run: nothing written under ${relative(root, result.colorsAndTypeDir)}.`);
+  }
+  return lines.join('\n');
+}

package/dist-plugin/adjust/index.cjs

@@ -270,6 +270,7 @@ function resolveDataDirs(opts = {}) {
     colorsAndTypeDir: opts.colorsAndTypeDir ? import_path.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
     themesDir: opts.themesDir ? import_path.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path.default.resolve(fileConfig.themesDir) : sub("themes"),
+    sketchPresetsDir: sub("sketch-presets"),
     legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }

package/dist-plugin/adjust/index.d.cts

@@ -1,6 +1,6 @@
-import { A as AliasDiskValue, b as ComponentConfig } from '../index-DpTIRZ2H.cjs';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
 interface AdjustOp {

package/dist-plugin/adjust/index.d.ts

@@ -1,6 +1,6 @@
-import { A as AliasDiskValue, b as ComponentConfig } from '../index-DpTIRZ2H.js';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
 interface AdjustOp {

package/dist-plugin/adjust/index.js

@@ -4,7 +4,7 @@ import {
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 
 // src/editor/core/components/aliasKinds.ts
 var KIND_PATTERNS = [

package/dist-plugin/{chunk-TKZBVIW5.js → chunk-E5QYON4L.js}

@@ -1,7 +1,7 @@
 import {
   hexToOklch,
   oklchToCss
-} from "./chunk-YR6GPXW2.js";
+} from "./chunk-XWXIMTWZ.js";
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -375,6 +375,61 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
+var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
+var BUNDLE2 = [
+  { name: "--editorial-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_25_editorialTypeRole = {
+  id: "2026-08-25-editorial-type-role",
+  kind: "additive",
+  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  apply(css) {
+    const withStack = ensureScale(css, {
+      anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
+      entries: STACK
+    });
+    return ensureScale(withStack, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-08-26-gradient-stops.ts
+var STOPS_RE = /^(?:linear|radial)-gradient\(\s*[^,]+,\s*(.+)\)$/i;
+var tokensCssMigration_2026_08_26_gradientStops = {
+  id: "2026-08-26-gradient-stops",
+  kind: "additive",
+  description: "Add --gradient-N-stops companions to the gradient slots",
+  apply(css) {
+    const values = collectTokenValues(css);
+    const entries = [];
+    for (const [name, value] of values) {
+      if (!/^--gradient-\d+$/.test(name)) continue;
+      const stops = value.match(STOPS_RE);
+      if (stops) entries.push({ name: `${name}-stops`, value: stops[1].trim() });
+    }
+    if (entries.length === 0) return css;
+    return ensureScale(css, { anchorPrefixes: ["--gradient-"], entries });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -384,7 +439,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
   tokensCssMigration_2026_07_20_lineHeightRename,
   tokensCssMigration_2026_07_20_semanticTextStyles,
-  tokensCssMigration_2026_08_19_oklchColorValues
+  tokensCssMigration_2026_08_19_oklchColorValues,
+  tokensCssMigration_2026_08_25_editorialTypeRole,
+  tokensCssMigration_2026_08_26_gradientStops
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/{chunk-PB2JTK2H.js → chunk-LW4SR7AZ.js}

@@ -1,8 +1,8 @@
 import {
   cssColorToOklch,
   gamutClamp,
-  oklchToCssClamped
-} from "./chunk-YR6GPXW2.js";
+  oklchToCss
+} from "./chunk-XWXIMTWZ.js";
 
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
@@ -21,6 +21,30 @@ function formatColorOpacity(name, opacity) {
 }
 
 // src/editor/core/themes/parsers/gradient.ts
+var LINEAR_DIRECTIONS = [
+  "to top",
+  "to top right",
+  "to right",
+  "to bottom right",
+  "to bottom",
+  "to bottom left",
+  "to left",
+  "to top left"
+];
+var DIRECTION_ANGLES = {
+  "to top": 0,
+  "to top right": 45,
+  "to right": 90,
+  "to bottom right": 135,
+  "to bottom": 180,
+  "to bottom left": 225,
+  "to left": 270,
+  "to top left": 315
+};
+function parseDirection(raw) {
+  const norm = raw.trim().toLowerCase().replace(/\s+/g, " ");
+  return LINEAR_DIRECTIONS.includes(norm) ? norm : null;
+}
 var RADIAL_BASE_PX = 100;
 function formatStopColor(s) {
   const opacity = s.opacity ?? 100;
@@ -48,11 +72,15 @@ function formatGradientValue(v) {
     return first ? formatStopColor(first) : "transparent";
   }
   const stops = formatGradientStops(v.stops);
-  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  if (v.type === "linear") {
+    return `linear-gradient(${v.direction ?? `${v.angle}deg`}, ${stops})`;
+  }
   return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
 }
 var NUM = String.raw`-?\d+(?:\.\d+)?`;
-var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var HEADING = String.raw`${NUM}deg|to\s+\w+(?:\s+\w+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${HEADING})\s*,\s*(.+)\)$`, "i");
+var DEG_RE = new RegExp(String.raw`^(${NUM})deg$`, "i");
 var RADIAL_RE = new RegExp(
   String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
   "i"
@@ -111,8 +139,12 @@ function parseGradientValue(value) {
   const css = value.trim();
   const linear = css.match(LINEAR_RE);
   if (linear) {
+    const deg = linear[1].match(DEG_RE);
+    const direction = deg ? null : parseDirection(linear[1]);
+    if (!deg && !direction) return null;
     const stops2 = parseStops(linear[2]);
-    return stops2 && { type: "linear", angle: parseFloat(linear[1]), stops: stops2 };
+    if (!stops2) return null;
+    return deg ? { type: "linear", angle: parseFloat(deg[1]), stops: stops2 } : { type: "linear", angle: 0, direction, stops: stops2 };
   }
   const radial = css.match(RADIAL_RE);
   if (!radial) return null;
@@ -307,7 +339,7 @@ function scaleStepToX(step, scale) {
   return scale.steps.length > 1 ? idx / (scale.steps.length - 1) * 100 : 50;
 }
 function serializeDerivedValue(value) {
-  return value.kind === "raw" ? value.css : oklchToCssClamped(value.l, value.c, value.h);
+  return value.kind === "raw" ? value.css : oklchToCss(value.l, value.c, value.h);
 }
 function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
   const { c: baseC } = base;
@@ -587,6 +619,7 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
 
 export {
   parseColorOpacity,
+  DIRECTION_ANGLES,
   formatGradientValue,
   parseGradientValue,
   sanitizeFileName,