@motion-proto/live-tokens 0.52.1 → 0.53.0

package/dist-plugin/index.js

@@ -1,8 +1,11 @@
 import {
+  formatGradientValue,
   palettesToVars,
+  parseColorOpacity,
+  parseGradientValue,
   reconcilePalettesFromCssVars,
   sanitizeFileName
-} from "./chunk-JIGIIE5P.js";
+} from "./chunk-PB2JTK2H.js";
 import {
   THEME_SCHEMA_VERSION,
   detectLegacyLayout,
@@ -10,7 +13,10 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-6OZFXIQI.js";
+} from "./chunk-232GZGQU.js";
+import {
+  CURRENT_COMPONENT_SCHEMA_VERSION
+} from "./chunk-NE6N66EE.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
@@ -29,14 +35,6 @@ import {
 import fs from "fs";
 import path from "path";
 
-// src/editor/core/themes/parsers/colorOpacity.ts
-var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
-function parseColorOpacity(value) {
-  const m = value.trim().match(COLOR_OPACITY_RE);
-  if (!m) return null;
-  return { name: m[1], opacity: parseInt(m[2], 10) };
-}
-
 // src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts
 var round = (v, dp) => {
   const f = 10 ** dp;
@@ -106,8 +104,29 @@ var PKG_VERSION = (() => {
 })();
 var BUNDLE_KIND_BY_VERSION = {
   1: "manifest-bundle",
+  3: "theme-bundle",
   [THEME_SCHEMA_VERSION]: "theme-bundle"
 };
+function extractAliasDeclarations(body) {
+  const aliases = {};
+  const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
+  let m;
+  while ((m = re.exec(body)) !== null) {
+    const value = m[2].trim();
+    const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
+    if (plain) {
+      aliases[m[1]] = plain[1];
+      continue;
+    }
+    if (parseColorOpacity(value)) {
+      aliases[m[1]] = value;
+      continue;
+    }
+    const gradient = parseGradientValue(value);
+    if (gradient) aliases[m[1]] = { kind: "gradient", value: gradient };
+  }
+  return aliases;
+}
 function themeFileApi(opts) {
   const dataDirs = resolveDataDirs({
     dataDir: opts.dataDir,
@@ -284,6 +303,7 @@ function themeFileApi(opts) {
         const overrides = [];
         const defaultAliases = defaultCfg.aliases ?? {};
         for (const [varName, semanticValue] of Object.entries(prodCfg.aliases ?? {})) {
+          if (!(varName in defaultAliases)) continue;
           if (!aliasValuesEqual(defaultAliases[varName], semanticValue)) {
             overrides.push([varName, semanticValue]);
           }
@@ -346,18 +366,6 @@ function themeFileApi(opts) {
     fs.writeFileSync(FONTS_CSS_PATH, content);
     console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path.basename(FONTS_CSS_PATH)}`);
   }
-  function extractAliasDeclarations(body) {
-    const aliases = {};
-    const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
-    let m;
-    while ((m = re.exec(body)) !== null) {
-      const value = m[2].trim();
-      const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
-      if (plain) aliases[m[1]] = plain[1];
-      else if (parseColorOpacity(value)) aliases[m[1]] = value;
-    }
-    return aliases;
-  }
   function componentNameFromFile(filePath) {
     return path.basename(filePath, ".svelte").toLowerCase();
   }
@@ -433,17 +441,10 @@ ${lines.join("\n")}
     r.ensureDir();
     const defaultPath = r.filePath("default");
     const sourceStat = fs.statSync(sourcePath);
-    if (fs.existsSync(defaultPath)) {
-      const defaultStat = fs.statSync(defaultPath);
-      if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
-    }
-    const source = fs.readFileSync(sourcePath, "utf-8");
-    const body = extractGlobalRootBody(source);
-    const aliases = extractAliasDeclarations(body);
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    let createdAt = now;
+    let createdAt = (/* @__PURE__ */ new Date()).toISOString();
     let existingUpdatedAt;
     let existingAliases;
+    let existingSchemaVersion;
     if (fs.existsSync(defaultPath)) {
       try {
         const existing = JSON.parse(fs.readFileSync(defaultPath, "utf-8"));
@@ -452,25 +453,29 @@ ${lines.join("\n")}
         if (existing.aliases && typeof existing.aliases === "object") {
           existingAliases = existing.aliases;
         }
+        if (typeof existing.schemaVersion === "number") existingSchemaVersion = existing.schemaVersion;
       } catch {
       }
-    }
-    if (existingAliases) {
-      for (const [token, val] of Object.entries(existingAliases)) {
-        if (val !== null && typeof val === "object" && !(token in aliases)) {
-          aliases[token] = val;
-        }
+      const defaultStat = fs.statSync(defaultPath);
+      if (defaultStat.mtimeMs >= sourceStat.mtimeMs && existingSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION) {
+        return;
       }
     }
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const source = fs.readFileSync(sourcePath, "utf-8");
+    const body = extractGlobalRootBody(source);
+    const aliases = extractAliasDeclarations(body);
     const aliasesUnchanged = existingAliases !== void 0 && JSON.stringify(existingAliases) === JSON.stringify(aliases);
+    const schemaStampCurrent = existingSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION;
     const defaultConfig = {
       name: "default",
       component: comp,
       createdAt,
       updatedAt: aliasesUnchanged && existingUpdatedAt ? existingUpdatedAt : now,
-      aliases
+      aliases,
+      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
     };
-    if (aliasesUnchanged && existingUpdatedAt) {
+    if (aliasesUnchanged && schemaStampCurrent && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
       fs.utimesSync(defaultPath, t, t);
       return;
@@ -518,6 +523,7 @@ ${lines.join("\n")}
   const diskThemeResolvers = {
     readColorsAndType: (name) => colorsAndTypeResource.readJson(sanitizeFileName(name)),
     readComponentConfig: (comp, name) => readComponentConfig(comp, sanitizeFileName(name)),
+    listComponentNames,
     normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
   };
   function readTheme(fileName) {
@@ -543,7 +549,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.`;
+    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".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -605,19 +611,26 @@ ${lines.join("\n")}
     const componentConfigs = {};
     for (const comp of listComponentNames()) {
       const cfg = readComponentConfig(comp, "default");
-      if (cfg) componentConfigs[comp] = cfg;
+      if (cfg) {
+        const { schemaVersion: _standaloneStamp, ...rest } = cfg;
+        componentConfigs[comp] = rest;
+      }
     }
-    if (existing?.schemaVersion === THEME_SCHEMA_VERSION && JSON.stringify(existing.colorsAndType) === JSON.stringify(colorsAndType) && JSON.stringify(existing.componentConfigs) === JSON.stringify(componentConfigs)) {
+    const contentUnchanged = JSON.stringify(existing?.colorsAndType) === JSON.stringify(colorsAndType) && JSON.stringify(existing?.componentConfigs) === JSON.stringify(componentConfigs);
+    if (existing?.schemaVersion === THEME_SCHEMA_VERSION && existing?.componentSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION && contentUnchanged) {
       return;
     }
     const now = (/* @__PURE__ */ new Date()).toISOString();
     writeTheme("default", {
       name: "Motion Proto",
       createdAt: typeof existing?.createdAt === "string" ? existing.createdAt : now,
-      updatedAt: now,
+      // A stamp-only rewrite (componentSchemaVersion catching up) is not a
+      // content change, so it doesn't bump this the way a real edit would.
+      updatedAt: contentUnchanged && typeof existing?.updatedAt === "string" ? existing.updatedAt : now,
       schemaVersion: THEME_SCHEMA_VERSION,
       colorsAndType,
-      componentConfigs
+      componentConfigs,
+      componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
     });
   }
   function ensureThemesDir(warn) {
@@ -649,14 +662,24 @@ ${lines.join("\n")}
     if (!shipped) return null;
     return { data: normalizeColorsAndType(shipped), source: "default" };
   }
+  const loggedMissingThemeEntries = /* @__PURE__ */ new Set();
+  function resolveComponentConfigOrDefault(comp, theme) {
+    const embedded = theme?.componentConfigs[comp];
+    if (embedded) return { ...embedded, component: comp };
+    if (!loggedMissingThemeEntries.has(comp)) {
+      loggedMissingThemeEntries.add(comp);
+      console.warn(
+        `[live-tokens] "${comp}" has no entry in the open theme; resolving from its shipped default.`
+      );
+    }
+    return readComponentConfig(comp, "default");
+  }
   function resolveLiveComponentConfig(comp, theme) {
     const working = componentResource(comp).readWorking();
     if (working !== null) return { data: working, source: "working" };
-    const embedded = theme?.componentConfigs[comp];
-    if (embedded) return { data: { ...embedded, component: comp }, source: "theme" };
-    const cfg = readComponentConfig(comp, "default");
+    const cfg = resolveComponentConfigOrDefault(comp, theme);
     if (!cfg) return null;
-    return { data: cfg, source: "default" };
+    return { data: cfg, source: "theme" };
   }
   function resolveSavedColorsAndType(theme) {
     if (theme?.colorsAndType) return theme.colorsAndType;
@@ -664,9 +687,7 @@ ${lines.join("\n")}
     return shipped ? normalizeColorsAndType(shipped) : null;
   }
   function resolveSavedComponentConfig(comp, theme) {
-    const embedded = theme?.componentConfigs[comp];
-    if (embedded) return { ...embedded, component: comp };
-    return readComponentConfig(comp, "default");
+    return resolveComponentConfigOrDefault(comp, theme);
   }
   function sameJsonValue(a, b) {
     if (a === null || b === null) return a === b;
@@ -702,26 +723,9 @@ ${lines.join("\n")}
       if (entry.isDirectory()) componentResource(entry.name).clearWorking();
     }
   }
-  function formatAliasGradient(v) {
-    const stopColor = (s) => {
-      const base = s.color.startsWith("--") ? `var(${s.color})` : s.color;
-      const opacity = s.opacity ?? 100;
-      return opacity >= 100 ? base : `color-mix(in srgb, ${base} ${opacity}%, transparent)`;
-    };
-    if (v.type === "none") return "transparent";
-    if (v.type === "solid") {
-      const first = v.stops[0];
-      if (!first) return "transparent";
-      return stopColor(first);
-    }
-    const stops = v.stops.map((s) => `${stopColor(s)} ${s.position}%`).join(", ");
-    if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
-    const radial = v.radius && v.radius > 0 ? `circle ${v.radius}px at center` : "circle";
-    return `radial-gradient(${radial}, ${stops})`;
-  }
   function aliasValueToCss(v) {
     if (typeof v === "string") return v.startsWith("--") ? `var(${v})` : v;
-    return formatAliasGradient(v.value);
+    return formatGradientValue(v.value);
   }
   function aliasValuesEqual(a, b) {
     if (a === void 0 || b === void 0) return a === b;
@@ -871,13 +875,9 @@ ${lines.join("\n")}
     }
   }
   async function handleListComponents({ res }) {
-    const theme = activeTheme();
     const components = listComponentNames().map((comp) => ({
       name: comp,
-      // Presence, not a parse: one corrupt buffer must not take the listing
-      // down, and the door only has to say where each component's live config
-      // comes from.
-      source: componentResource(comp).hasWorking() ? "working" : theme?.componentConfigs[comp] ? "theme" : "default"
+      source: componentResource(comp).hasWorking() ? "working" : "theme"
     }));
     jsonResponse(res, 200, { components });
   }
@@ -888,6 +888,7 @@ ${lines.join("\n")}
   }
   async function handleGetComponentActive({ params, res }) {
     const [comp] = params;
+    if (rejectUnknownComponent(res, comp)) return;
     const resolved = resolveLiveComponentConfig(comp, activeTheme());
     if (!resolved) {
       jsonResponse(res, 404, { error: "Active config not found" });
@@ -1134,9 +1135,11 @@ ${lines.join("\n")}
       respondUnreadableTheme(res, fileName, "Theme not found");
       return;
     }
-    const { theme } = read;
+    const { theme, filled } = read;
     if (!theme.colorsAndType) {
-      jsonResponse(res, 422, { error: "This theme carries no colors and type" });
+      jsonResponse(res, 422, {
+        error: 'This theme carries no colors and type. Build one with the theme generator skill "generate-theme".'
+      });
       return;
     }
     clearAllWorking();
@@ -1160,7 +1163,8 @@ ${lines.join("\n")}
         _source: resolvedColorsAndType.source
       },
       componentConfigs: resolvedConfigs,
-      skippedComponents
+      skippedComponents,
+      filled
     });
   }
   async function handleExportTheme({ params, res }) {
@@ -1215,10 +1219,27 @@ ${lines.join("\n")}
     }
     const bundleResolvers = {
       readColorsAndType: () => bundle.theme,
-      readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`],
+      // A named ref resolves inside the bundle only — a v1 bundle's
+      // `${comp}/${name}` map is itself the sender's data, and a stale name
+      // must still land in `dropped` rather than quietly picking up this
+      // install's copy. But `'default'` never named a bundled entry; v1
+      // spelled "no override" that way (normalizeTheme.ts's pointer-
+      // resolution loop treats it identically), so it always meant *this
+      // install's* default, not something the bundle carries. The
+      // completeness fill (Wave 2 of docs/plans/theme-completeness.md) relies
+      // on that fall-through: without it, `readComponentConfig(comp,
+      // 'default')` answers undefined for every component (no bundle ever
+      // carries a `<comp>/default` entry), the fill loop no-ops 25 times, and
+      // an incomplete bundle stays incomplete forever — exactly the drift RJC
+      // 10 exists to prevent.
+      readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`] ?? (name === "default" ? readComponentConfig(comp, "default") : void 0),
+      // Installed components are a property of this install, not of the
+      // bundle being imported, so the completeness fill (Wave 2) uses the
+      // same list the disk resolver does.
+      listComponentNames,
       normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
     };
-    const { theme, dropped } = normalizeTheme(bundle.manifest, bundleResolvers);
+    const { theme, dropped, filled } = normalizeTheme(bundle.manifest, bundleResolvers);
     if (theme.colorsAndType) theme.colorsAndType = normalizeColorsAndType(theme.colorsAndType);
     if (!theme.colorsAndType) {
       jsonResponse(res, 400, { error: "Bundle carries no theme" });
@@ -1239,7 +1260,8 @@ ${lines.join("\n")}
       ok: true,
       theme: finalName,
       renames,
-      dropped
+      dropped,
+      filled
     });
   }
   async function handleAdoptLook({ res }) {