@motion-proto/live-tokens 0.73.0 → 0.74.0

package/bin/{set-fonts.mjs → set-type.mjs}

@@ -1,7 +1,7 @@
-// `live-tokens set-fonts` worker.
+// `live-tokens set-type` 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 —
+// Reads a pairing file (JSON), verifies each family against Google Fonts,
+// binds it to a font stack via the compiled engine (dist-plugin/setType —
 // 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
@@ -12,11 +12,11 @@ import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { readActiveTheme, readLiveColorsAndType, readSavedColorsAndType, sameContent } from './lib/liveState.mjs';
 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');
+const ENGINE = resolve(pkgRoot, 'dist-plugin/setType/index.js');
 
 // Google serves a different stylesheet per user agent; ask as a browser would
 // so the weight census matches what the page will actually load.
@@ -32,7 +32,7 @@ const SOURCE_LABELS = {
 async function loadEngine() {
   if (!existsSync(ENGINE)) {
     throw new Error(
-      `font pairing engine not found at ${relative(process.cwd(), ENGINE)}. ` +
+      `setType engine not found at ${relative(process.cwd(), ENGINE)}. ` +
         `Build the plugin first (npm run build:plugin).`,
     );
   }
@@ -43,53 +43,22 @@ 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);
+  throw new Error(`pairing slot "${slot}" must be a family name or { "name": "...", "url": "..." }`);
 }
 
 /** `engine` and `fetcher` are test seams; the CLI always runs the compiled
  *  bundle against the live API. */
-export async function runSetFonts({
-  briefPath,
+export async function runSetType({
+  pairingPath,
   dryRun = false,
   verify = true,
   root = process.cwd(),
@@ -110,21 +79,21 @@ export async function runSetFonts({
     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;
+  const fullPath = resolve(root, pairingPath);
+  if (!existsSync(fullPath)) throw new Error(`pairing file not found at ${relative(root, fullPath)}`);
+  let input;
   try {
-    brief = readJson(briefFull);
+    input = readJson(fullPath);
   } catch (err) {
-    throw new Error(`brief file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
+    throw new Error(`pairing file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
   }
 
-  const requested = SLOT_ORDER.filter((slot) => brief[slot] !== undefined).map((slot) => ({
+  const requested = SLOT_ORDER.filter((slot) => input[slot] !== undefined).map((slot) => ({
     slot,
-    face: normalizeFace(slot, brief[slot]),
+    face: normalizeFace(slot, input[slot]),
   }));
   if (requested.length === 0) {
-    throw new Error(`brief names no slot. Use one or more of: ${SLOT_ORDER.join(', ')}.`);
+    throw new Error(`pairing names no slot. Use one or more of: ${SLOT_ORDER.join(', ')}.`);
   }
 
   const resolved = colorsAndTypeDir && themesDir ? null : resolveDataDirs();
@@ -176,14 +145,11 @@ export async function runSetFonts({
   }
 
   const workingPath = join(colorsDir, '_working.json');
-  const savedColorsAndType =
-    active?.theme?.colorsAndType ??
-    readJsonIfExists(join(colorsDir, 'default.json')) ??
-    readJsonIfExists(join(packageDataDir, 'colors-and-type', 'default.json'));
+  const savedColorsAndType = readSavedColorsAndType(colorsDir, active);
 
   // 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);
+  const backToSaved = savedColorsAndType !== null && sameContent(next, savedColorsAndType);
   let wrote = null;
   if (!dryRun && report.changed) {
     if (backToSaved) {
@@ -196,7 +162,7 @@ export async function runSetFonts({
   }
 
   return {
-    briefPath: briefFull,
+    pairingPath: fullPath,
     colorsAndTypeDir: colorsDir,
     workingPath,
     openTheme: active?.slug ?? null,
@@ -212,7 +178,7 @@ export async function runSetFonts({
   };
 }
 
-export function formatSetFontsResult(result) {
+export function formatSetTypeResult(result) {
   const root = process.cwd();
   const lines = [];
 

package/dist-plugin/{chunk-RIXO2E55.js → chunk-7VRTBGJT.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-YLCOIGQC.js";
+} from "./chunk-V3YF6CGT.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/{chunk-YLCOIGQC.js → chunk-V3YF6CGT.js}

@@ -826,6 +826,60 @@ var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-03-drop-legacy-component-keys.ts
+var DROPPED3 = /* @__PURE__ */ new Set([
+  "--badge-trait-surface",
+  "--badge-trait-text",
+  "--badge-trait-text-font-family",
+  "--badge-trait-text-font-size",
+  "--badge-trait-text-font-weight",
+  "--badge-trait-text-line-height",
+  "--badge-trait-border",
+  "--badge-trait-border-width",
+  "--badge-trait-shadow",
+  "--sectiondivider-title",
+  "--sectiondivider-title-font-family",
+  "--sectiondivider-title-font-size",
+  "--sectiondivider-title-font-weight",
+  "--sectiondivider-title-line-height",
+  "--sectiondivider-title-border-width",
+  "--sectiondivider-title-stroke-color",
+  "--sectiondivider-description",
+  "--sectiondivider-description-font-family",
+  "--sectiondivider-description-font-size",
+  "--sectiondivider-description-font-weight",
+  "--sectiondivider-description-line-height",
+  "--dialog-primary-default-surface",
+  "--dialog-primary-default-text",
+  "--dialog-primary-default-border",
+  "--dialog-primary-default-border-width",
+  "--dialog-primary-hover-surface",
+  "--dialog-primary-hover-text",
+  "--dialog-primary-hover-border",
+  "--dialog-primary-hover-border-width",
+  "--dialog-secondary-default-text",
+  "--dialog-secondary-default-border",
+  "--dialog-secondary-default-border-width",
+  "--dialog-secondary-hover-surface",
+  "--dialog-secondary-hover-text",
+  "--dialog-secondary-hover-border",
+  "--dialog-secondary-hover-border-width"
+]);
+var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
+  id: "2026-09-03-drop-legacy-component-keys",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED3.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -860,7 +914,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
-  componentMigration_2026_09_02_sectiondividerDropTitleOutline
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -877,7 +932,6 @@ function runMigrations(kind, fileVersion, rawVars, meta = {}) {
 }
 
 export {
-  CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
 };

package/dist-plugin/index.cjs

@@ -1610,6 +1610,60 @@ var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-03-drop-legacy-component-keys.ts
+var DROPPED3 = /* @__PURE__ */ new Set([
+  "--badge-trait-surface",
+  "--badge-trait-text",
+  "--badge-trait-text-font-family",
+  "--badge-trait-text-font-size",
+  "--badge-trait-text-font-weight",
+  "--badge-trait-text-line-height",
+  "--badge-trait-border",
+  "--badge-trait-border-width",
+  "--badge-trait-shadow",
+  "--sectiondivider-title",
+  "--sectiondivider-title-font-family",
+  "--sectiondivider-title-font-size",
+  "--sectiondivider-title-font-weight",
+  "--sectiondivider-title-line-height",
+  "--sectiondivider-title-border-width",
+  "--sectiondivider-title-stroke-color",
+  "--sectiondivider-description",
+  "--sectiondivider-description-font-family",
+  "--sectiondivider-description-font-size",
+  "--sectiondivider-description-font-weight",
+  "--sectiondivider-description-line-height",
+  "--dialog-primary-default-surface",
+  "--dialog-primary-default-text",
+  "--dialog-primary-default-border",
+  "--dialog-primary-default-border-width",
+  "--dialog-primary-hover-surface",
+  "--dialog-primary-hover-text",
+  "--dialog-primary-hover-border",
+  "--dialog-primary-hover-border-width",
+  "--dialog-secondary-default-text",
+  "--dialog-secondary-default-border",
+  "--dialog-secondary-default-border-width",
+  "--dialog-secondary-hover-surface",
+  "--dialog-secondary-hover-text",
+  "--dialog-secondary-hover-border",
+  "--dialog-secondary-hover-border-width"
+]);
+var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
+  id: "2026-09-03-drop-legacy-component-keys",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED3.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1644,7 +1698,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
-  componentMigration_2026_09_02_sectiondividerDropTitleOutline
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -3816,7 +3871,7 @@ ${lines.join("\n")}
     return "corrupt";
   }
   function notAThemeError(fileName) {
-    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme generator skill "generate-theme".`;
+    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme skill "create-theme".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -4408,7 +4463,7 @@ ${lines.join("\n")}
     const { theme, filled } = read;
     if (!theme.colorsAndType) {
       jsonResponse(res, 422, {
-        error: 'This theme carries no colors and type. Build one with the theme generator skill "generate-theme".'
+        error: 'This theme carries no colors and type. Build one with the theme skill "create-theme".'
       });
       return;
     }

package/dist-plugin/index.js

@@ -1,3 +1,11 @@
+import {
+  THEME_SCHEMA_VERSION,
+  detectLegacyLayout,
+  isColorsAndTypeShaped,
+  nextAvailableName,
+  normalizeTheme,
+  versionedFileResourceServer
+} from "./chunk-7VRTBGJT.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -6,17 +14,9 @@ import {
   reconcilePalettesFromCssVars,
   sanitizeFileName
 } from "./chunk-O6GQ6GBH.js";
-import {
-  THEME_SCHEMA_VERSION,
-  detectLegacyLayout,
-  isColorsAndTypeShaped,
-  nextAvailableName,
-  normalizeTheme,
-  versionedFileResourceServer
-} from "./chunk-RIXO2E55.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-YLCOIGQC.js";
+} from "./chunk-V3YF6CGT.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
@@ -659,7 +659,7 @@ ${lines.join("\n")}
     return "corrupt";
   }
   function notAThemeError(fileName) {
-    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${path.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme generator skill "generate-theme".`;
+    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${path.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme skill "create-theme".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -1251,7 +1251,7 @@ ${lines.join("\n")}
     const { theme, filled } = read;
     if (!theme.colorsAndType) {
       jsonResponse(res, 422, {
-        error: 'This theme carries no colors and type. Build one with the theme generator skill "generate-theme".'
+        error: 'This theme carries no colors and type. Build one with the theme skill "create-theme".'
       });
       return;
     }

package/dist-plugin/migrateData/index.cjs

@@ -999,6 +999,60 @@ var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-03-drop-legacy-component-keys.ts
+var DROPPED3 = /* @__PURE__ */ new Set([
+  "--badge-trait-surface",
+  "--badge-trait-text",
+  "--badge-trait-text-font-family",
+  "--badge-trait-text-font-size",
+  "--badge-trait-text-font-weight",
+  "--badge-trait-text-line-height",
+  "--badge-trait-border",
+  "--badge-trait-border-width",
+  "--badge-trait-shadow",
+  "--sectiondivider-title",
+  "--sectiondivider-title-font-family",
+  "--sectiondivider-title-font-size",
+  "--sectiondivider-title-font-weight",
+  "--sectiondivider-title-line-height",
+  "--sectiondivider-title-border-width",
+  "--sectiondivider-title-stroke-color",
+  "--sectiondivider-description",
+  "--sectiondivider-description-font-family",
+  "--sectiondivider-description-font-size",
+  "--sectiondivider-description-font-weight",
+  "--sectiondivider-description-line-height",
+  "--dialog-primary-default-surface",
+  "--dialog-primary-default-text",
+  "--dialog-primary-default-border",
+  "--dialog-primary-default-border-width",
+  "--dialog-primary-hover-surface",
+  "--dialog-primary-hover-text",
+  "--dialog-primary-hover-border",
+  "--dialog-primary-hover-border-width",
+  "--dialog-secondary-default-text",
+  "--dialog-secondary-default-border",
+  "--dialog-secondary-default-border-width",
+  "--dialog-secondary-hover-surface",
+  "--dialog-secondary-hover-text",
+  "--dialog-secondary-hover-border",
+  "--dialog-secondary-hover-border-width"
+]);
+var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
+  id: "2026-09-03-drop-legacy-component-keys",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED3.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1033,7 +1087,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
-  componentMigration_2026_09_02_sectiondividerDropTitleOutline
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/migrateData/index.js

@@ -7,10 +7,10 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-RIXO2E55.js";
+} from "../chunk-7VRTBGJT.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-YLCOIGQC.js";
+} from "../chunk-V3YF6CGT.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs