@motion-proto/live-tokens 0.25.1 → 0.28.0

package/dist-plugin/index.js

@@ -435,6 +435,8 @@ function versionedFileResourceServer(opts) {
   const activePath = path.join(dir, "_active.json");
   const productionPath = path.join(dir, "_production.json");
   const defaultName = opts.defaultName ?? "default";
+  const resolvedDir = path.resolve(dir);
+  const resolvedPackageDir = opts.packageDir ? path.resolve(opts.packageDir) : null;
   function ensureDir() {
     if (!fs.existsSync(dir)) {
       fs.mkdirSync(dir, { recursive: true });
@@ -451,6 +453,37 @@ function versionedFileResourceServer(opts) {
   function filePath(name) {
     return path.join(dir, `${name}.json`);
   }
+  function existingPath(name) {
+    const local = filePath(name);
+    if (fs.existsSync(local)) return local;
+    if (resolvedPackageDir) {
+      const pkg = path.join(resolvedPackageDir, `${name}.json`);
+      if (fs.existsSync(pkg)) return pkg;
+    }
+    return null;
+  }
+  function readJson(name) {
+    const resolved = existingPath(name);
+    if (!resolved) return null;
+    return JSON.parse(fs.readFileSync(resolved, "utf-8"));
+  }
+  function listNames() {
+    const names = [];
+    const seen = /* @__PURE__ */ new Set();
+    const collect = (d) => {
+      if (!d || !fs.existsSync(d)) return;
+      for (const f of fs.readdirSync(d)) {
+        if (!f.endsWith(".json") || f.startsWith("_")) continue;
+        const name = f.slice(0, -".json".length);
+        if (seen.has(name)) continue;
+        seen.add(name);
+        names.push(name);
+      }
+    };
+    collect(resolvedDir);
+    if (resolvedPackageDir && resolvedPackageDir !== resolvedDir) collect(resolvedPackageDir);
+    return names;
+  }
   function getActiveName() {
     try {
       const data = JSON.parse(fs.readFileSync(activePath, "utf-8"));
@@ -480,6 +513,9 @@ function versionedFileResourceServer(opts) {
     ensureDir,
     ensureMeta,
     filePath,
+    existingPath,
+    readJson,
+    listNames,
     getActiveName,
     getProductionName,
     setActiveName,
@@ -566,36 +602,42 @@ function themeFileApi(opts) {
     "system",
     "components"
   );
+  const packageDataDir = path2.resolve(
+    path2.dirname(fileURLToPath(import.meta.url)),
+    "..",
+    "src",
+    "live-tokens",
+    "data"
+  );
+  const packageThemesDir = path2.join(packageDataDir, "themes");
+  const packageManifestsDir = path2.join(packageDataDir, "manifests");
+  const packageComponentConfigsDir = path2.join(packageDataDir, "component-configs");
   const COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
   if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && fs2.existsSync(packageComponentsDir)) {
     COMPONENTS_SCAN_DIRS.push(packageComponentsDir);
   }
-  const LEGACY_PRESETS_DIR = path2.resolve("presets");
   const themesResource = versionedFileResourceServer({
-    dir: THEMES_DIR
+    dir: THEMES_DIR,
+    packageDir: packageThemesDir
   });
   const componentResourceCache = /* @__PURE__ */ new Map();
   function componentResource(comp) {
     let r = componentResourceCache.get(comp);
     if (!r) {
-      r = versionedFileResourceServer({ dir: path2.join(COMPONENT_CONFIGS_DIR, comp) });
+      r = versionedFileResourceServer({
+        dir: path2.join(COMPONENT_CONFIGS_DIR, comp),
+        packageDir: path2.join(packageComponentConfigsDir, comp)
+      });
       componentResourceCache.set(comp, r);
     }
     return r;
   }
-  const manifestsResource = versionedFileResourceServer({ dir: MANIFESTS_DIR });
+  const manifestsResource = versionedFileResourceServer({
+    dir: MANIFESTS_DIR,
+    packageDir: packageManifestsDir
+  });
   function ensureThemesDir() {
     themesResource.ensureDir();
-    if (!fs2.existsSync(path2.join(THEMES_DIR, "default.json"))) {
-      const defaultTheme = {
-        name: "Default Theme",
-        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        editorConfigs: {},
-        cssVariables: {}
-      };
-      fs2.writeFileSync(path2.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
-    }
     themesResource.ensureMeta();
   }
   function readBody(req) {
@@ -659,10 +701,9 @@ function themeFileApi(opts) {
     lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
     lines.push("");
     const productionThemeName = themesResource.getProductionName();
-    const themePath = path2.join(THEMES_DIR, `${productionThemeName}.json`);
+    const themeData = themesResource.readJson(productionThemeName);
     let themeVarCount = 0;
-    if (fs2.existsSync(themePath)) {
-      const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    if (themeData) {
       const cssVars = { ...themeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
       const resolvedFontVars = resolveFontStacks(themeData);
@@ -727,9 +768,8 @@ function themeFileApi(opts) {
     regenerateTokensCss();
   }
   function syncFontsToCss(fileName) {
-    const themePath = path2.join(THEMES_DIR, `${fileName}.json`);
-    if (!fs2.existsSync(themePath)) return;
-    const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    const themeData = themesResource.readJson(fileName);
+    if (!themeData) return;
     const sources = themeData.fontSources;
     if (!sources) return;
     const lines = [];
@@ -889,28 +929,7 @@ ${lines.join("\n")}
     }
   }
   function ensureManifestsDir() {
-    if (!fs2.existsSync(MANIFESTS_DIR) && fs2.existsSync(LEGACY_PRESETS_DIR)) {
-      fs2.renameSync(LEGACY_PRESETS_DIR, MANIFESTS_DIR);
-      const legacyProd = path2.join(MANIFESTS_DIR, "_production.json");
-      if (fs2.existsSync(legacyProd)) fs2.unlinkSync(legacyProd);
-    }
     manifestsResource.ensureDir();
-    const defaultPath = path2.join(MANIFESTS_DIR, "default.json");
-    if (!fs2.existsSync(defaultPath)) {
-      const componentConfigs = {};
-      for (const comp of listComponentNames()) {
-        componentConfigs[comp] = componentResource(comp).getActiveName();
-      }
-      const now = (/* @__PURE__ */ new Date()).toISOString();
-      const defaultManifest = {
-        name: "Default",
-        createdAt: now,
-        updatedAt: now,
-        theme: themesResource.getActiveName(),
-        componentConfigs
-      };
-      fs2.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
-    }
     if (!fs2.existsSync(manifestsResource.activePath)) {
       fs2.writeFileSync(
         manifestsResource.activePath,
@@ -918,12 +937,10 @@ ${lines.join("\n")}
       );
     } else {
       const activeName = manifestsResource.getActiveName();
-      if (!fs2.existsSync(manifestsResource.filePath(activeName))) {
+      if (manifestsResource.existingPath(activeName) === null) {
         manifestsResource.setActiveName("default");
       }
     }
-    const stragglerProd = path2.join(MANIFESTS_DIR, "_production.json");
-    if (fs2.existsSync(stragglerProd)) fs2.unlinkSync(stragglerProd);
   }
   function patchActiveManifest(field, comp, fileName) {
     const activeFile = manifestsResource.getActiveName();
@@ -974,10 +991,8 @@ ${lines.join("\n")}
     return JSON.stringify(a) === JSON.stringify(b);
   }
   function readComponentConfig(comp, name) {
-    const filePath = componentResource(comp).filePath(name);
-    if (!fs2.existsSync(filePath)) return null;
     try {
-      return JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+      return componentResource(comp).readJson(name);
     } catch {
       return null;
     }
@@ -1003,14 +1018,12 @@ ${lines.join("\n")}
   const MANIFEST_BY_NAME_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)$`);
   async function handleListThemes(_ctx) {
     const activeFile = themesResource.getActiveName();
-    const files = fs2.readdirSync(THEMES_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = path2.join(THEMES_DIR, f);
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = themesResource.listNames().map((fileName) => {
+      const data = themesResource.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile
       };
     });
@@ -1018,19 +1031,19 @@ ${lines.join("\n")}
   }
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();
-    const filePath = themesResource.filePath(activeFile);
-    if (!fs2.existsSync(filePath)) {
+    const raw = themesResource.readJson(activeFile);
+    if (!raw) {
       jsonResponse(res, 404, { error: "Active theme not found" });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(raw);
     data._fileName = activeFile;
     jsonResponse(res, 200, data);
   }
   async function handleSetActiveTheme({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!fs2.existsSync(themesResource.filePath(fileName))) {
+    if (themesResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1039,12 +1052,12 @@ ${lines.join("\n")}
   }
   async function handleGetProductionTheme({ res }) {
     const prodFile = themesResource.getProductionName();
-    const filePath = themesResource.filePath(prodFile);
-    if (!fs2.existsSync(filePath)) {
+    const raw = themesResource.readJson(prodFile);
+    if (!raw) {
       jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(raw);
     jsonResponse(res, 200, {
       fileName: prodFile,
       name: data.name || prodFile,
@@ -1055,7 +1068,7 @@ ${lines.join("\n")}
   async function handleSetProductionTheme({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!fs2.existsSync(themesResource.filePath(fileName))) {
+    if (themesResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1071,28 +1084,33 @@ ${lines.join("\n")}
     syncFontsToCss(fileName);
     syncComponentsToCss();
     patchActiveManifest("theme", null, fileName);
-    const data = JSON.parse(fs2.readFileSync(themesResource.filePath(fileName), "utf-8"));
+    const data = themesResource.readJson(fileName);
     jsonResponse(res, 200, {
       ok: true,
       fileName,
-      name: data.name || fileName,
-      updatedAt: data.updatedAt || ""
+      name: data?.name || fileName,
+      updatedAt: data?.updatedAt || ""
     });
   }
   async function handleThemeByName({ params, req, res }) {
     const [fileName] = params;
     const filePath = themesResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs2.existsSync(filePath)) {
+      const raw = themesResource.readJson(fileName);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+      const data = normalizeTheme(raw);
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
     }
     if (req.method === "PUT") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot overwrite the default theme (live from package)" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (fs2.existsSync(filePath)) {
@@ -1161,8 +1179,7 @@ ${lines.join("\n")}
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
-    const configPath = r.filePath(fileName);
-    if (!fs2.existsSync(configPath)) {
+    if (r.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1186,8 +1203,7 @@ ${lines.join("\n")}
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
-    const configPath = r.filePath(fileName);
-    if (!fs2.existsSync(configPath)) {
+    if (r.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1215,11 +1231,12 @@ ${lines.join("\n")}
     const r = componentResource(comp);
     const configPath = r.filePath(name);
     if (req.method === "GET") {
-      if (!fs2.existsSync(configPath)) {
+      const raw = r.readJson(name);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+      const data = raw;
       data._fileName = name;
       jsonResponse(res, 200, data);
       return;
@@ -1277,14 +1294,12 @@ ${lines.join("\n")}
     }
     const activeFile = r.getActiveName();
     const productionFile = r.getProductionName();
-    const files = fs2.readdirSync(r.dir).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = path2.join(r.dir, f);
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = r.listNames().map((fileName) => {
+      const data = r.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile,
         isProduction: fileName === productionFile
       };
@@ -1293,14 +1308,12 @@ ${lines.join("\n")}
   }
   async function handleListManifests({ res }) {
     const activeFile = manifestsResource.getActiveName();
-    const files = fs2.readdirSync(MANIFESTS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = path2.join(MANIFESTS_DIR, f);
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = manifestsResource.listNames().map((fileName) => {
+      const data = manifestsResource.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile,
         isProtected: fileName === "default"
       };
@@ -1309,19 +1322,19 @@ ${lines.join("\n")}
   }
   async function handleGetActiveManifest({ res }) {
     const activeFile = manifestsResource.getActiveName();
-    const filePath = manifestsResource.filePath(activeFile);
-    if (!fs2.existsSync(filePath)) {
+    const raw = manifestsResource.readJson(activeFile);
+    if (!raw) {
       jsonResponse(res, 404, { error: "Active manifest not found" });
       return;
     }
-    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    const data = raw;
     data._fileName = activeFile;
     jsonResponse(res, 200, data);
   }
   async function handleSetActiveManifest({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!fs2.existsSync(manifestsResource.filePath(fileName))) {
+    if (manifestsResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
@@ -1332,11 +1345,12 @@ ${lines.join("\n")}
     const [fileName] = params;
     const filePath = manifestsResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs2.existsSync(filePath)) {
+      const raw = manifestsResource.readJson(fileName);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+      const data = raw;
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1377,15 +1391,13 @@ ${lines.join("\n")}
   }
   async function handleApplyManifest({ params, res }) {
     const [fileName] = params;
-    const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs2.existsSync(manifestPath)) {
+    const manifest = manifestsResource.readJson(fileName);
+    if (!manifest) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
-    const themePath = themesResource.filePath(themeName);
-    if (!fs2.existsSync(themePath)) {
+    if (themesResource.existingPath(themeName) === null) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
@@ -1397,8 +1409,7 @@ ${lines.join("\n")}
       if (!knownComponents.has(comp)) continue;
       const sanitized = sanitizeFileName(String(configFile) || "default");
       const r = componentResource(comp);
-      const cfgPath = r.filePath(sanitized);
-      if (!fs2.existsSync(cfgPath)) {
+      if (r.existingPath(sanitized) === null) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
@@ -1410,7 +1421,7 @@ ${lines.join("\n")}
     themesResource.setProductionName(themeName);
     syncTokensToCss(themeName);
     syncFontsToCss(themeName);
-    const themeData = normalizeTheme(JSON.parse(fs2.readFileSync(themePath, "utf-8")));
+    const themeData = normalizeTheme(themesResource.readJson(themeName));
     themeData._fileName = themeName;
     for (const [comp, configFile] of apply) {
       const r = componentResource(comp);
@@ -1436,33 +1447,30 @@ ${lines.join("\n")}
   }
   async function handleExportManifest({ params, res }) {
     const [fileName] = params;
-    const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs2.existsSync(manifestPath)) {
+    const manifest = manifestsResource.readJson(fileName);
+    if (!manifest) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
-    const themePath = themesResource.filePath(themeName);
-    if (!fs2.existsSync(themePath)) {
+    const theme = themesResource.readJson(themeName);
+    if (!theme) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
-    const theme = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
     const knownComponents = new Set(listComponentNames());
     const componentConfigs = {};
     for (const [comp, configFile] of Object.entries(manifest.componentConfigs ?? {})) {
       if (!knownComponents.has(comp)) continue;
       const sanitized = sanitizeFileName(String(configFile) || "default");
       if (sanitized === "default") continue;
-      const cfgPath = componentResource(comp).filePath(sanitized);
-      if (!fs2.existsSync(cfgPath)) {
+      const cfg = componentResource(comp).readJson(sanitized);
+      if (!cfg) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
         return;
       }
-      const cfg = JSON.parse(fs2.readFileSync(cfgPath, "utf-8"));
       componentConfigs[`${comp}/${sanitized}`] = cfg;
     }
     const bundle = {
@@ -1482,11 +1490,8 @@ ${lines.join("\n")}
     );
     res.end(JSON.stringify(bundle, null, 2));
   }
-  function nextAvailableName2(resourceFilePath, baseName) {
-    return nextAvailableName(
-      (n) => fs2.existsSync(resourceFilePath(n)),
-      sanitizeFileName(baseName)
-    );
+  function nextAvailableName2(exists, baseName) {
+    return nextAvailableName(exists, sanitizeFileName(baseName));
   }
   async function handleImportManifest({ req, res }) {
     let bundle;
@@ -1516,7 +1521,7 @@ ${lines.join("\n")}
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const originalThemeName = sanitizeFileName(bundle.manifest.theme || "default");
     const finalThemeName = nextAvailableName2(
-      (n) => themesResource.filePath(n),
+      (n) => themesResource.existingPath(n) !== null,
       originalThemeName
     );
     if (finalThemeName !== originalThemeName) {
@@ -1535,7 +1540,7 @@ ${lines.join("\n")}
       if (!knownComponents.has(comp)) continue;
       const r = componentResource(comp);
       const finalName = nextAvailableName2(
-        (n) => r.filePath(n),
+        (n) => r.existingPath(n) !== null,
         originalName
       );
       if (finalName !== originalName) {
@@ -1568,7 +1573,7 @@ ${lines.join("\n")}
     if (!rewrittenManifest.createdAt) rewrittenManifest.createdAt = now;
     const originalManifestName = sanitizeFileName(bundle.manifest.name || "imported");
     const finalManifestName = nextAvailableName2(
-      (n) => manifestsResource.filePath(n),
+      (n) => manifestsResource.existingPath(n) !== null,
       originalManifestName
     );
     if (finalManifestName !== originalManifestName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.25.1",
+  "version": "0.28.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -23,6 +23,8 @@
     "src/system",
     "src/app/site.css",
     "src/live-tokens/data/tokens.generated.css",
+    "src/live-tokens/data/themes/default.json",
+    "src/live-tokens/data/manifests/default.json",
     "dist-plugin",
     ".claude/skills",
     "bin",
@@ -63,6 +65,11 @@
       "svelte": "./src/editor/pages/ComponentEditorPage.svelte",
       "default": "./src/editor/pages/ComponentEditorPage.svelte"
     },
+    "./docs": {
+      "types": "./src/editor/docs/Docs.svelte.d.ts",
+      "svelte": "./src/editor/docs/Docs.svelte",
+      "default": "./src/editor/docs/Docs.svelte"
+    },
     "./components/*": {
       "svelte": "./src/system/components/*",
       "default": "./src/system/components/*"
@@ -91,10 +98,12 @@
     "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
     "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
     "check:component-defaults": "node scripts/sync-component-defaults.mjs --check",
+    "check:production-is-default": "node scripts/check-production-is-default.mjs",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
+    "collapse:manifest": "node scripts/collapse-manifest-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run check:component-defaults && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",
@@ -106,8 +115,6 @@
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/node": "^25.9.1",
     "happy-dom": "^20.9.0",
-    "highlight.js": "^11.11.1",
-    "marked": "^18.0.4",
     "sass": "^1.98.0",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",
@@ -117,6 +124,8 @@
     "vitest": "^4.1.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^7.2.0"
+    "@fortawesome/fontawesome-free": "^7.2.0",
+    "highlight.js": "^11.11.1",
+    "marked": "^18.0.4"
   }
 }

package/src/editor/core/store/editorPersistence.ts

@@ -65,6 +65,28 @@ function migrateGradients(state: EditorState): EditorState {
   return { ...state, gradients: { tokens: makeDefaultGradients() } };
 }
 
+// `hydrate` shallow-merges the persisted `components` bag over the default, so
+// a slice serialized by an older build can lack fields added since (e.g.
+// `config`, added with the two-field alias/config split). `componentsToVars`
+// calls `Object.entries(slice.config)` unconditionally, so backfill the
+// required fields and drop any non-object slice before the state reaches the
+// renderer. Spread preserves optional fields like `unlinked`.
+export function normalizeComponents(state: EditorState): EditorState {
+  const raw = state.components;
+  if (!raw || typeof raw !== 'object') return { ...state, components: {} };
+  const components: EditorState['components'] = {};
+  for (const [name, slice] of Object.entries(raw)) {
+    if (!slice || typeof slice !== 'object') continue;
+    components[name] = {
+      ...slice,
+      activeFile: typeof slice.activeFile === 'string' ? slice.activeFile : 'default',
+      aliases: slice.aliases && typeof slice.aliases === 'object' ? slice.aliases : {},
+      config: slice.config && typeof slice.config === 'object' ? slice.config : {},
+    };
+  }
+  return { ...state, components };
+}
+
 export function hydrate(): void {
   // Corrupt state, missing key, or unavailable storage all return null;
   // the editor falls through to the empty default in that case.
@@ -73,7 +95,7 @@ export function hydrate(): void {
     // Shallow-merge onto default shape so older persisted state missing
     // newly-added domain fields still loads.
     const merged = { ...emptyStateFactory(), ...(parsed as object) } as EditorState;
-    store.set(migrateGradients(merged));
+    store.set(normalizeComponents(migrateGradients(merged)));
   }
   // m13 fix: seed shadows from the DOM at hydrate time so the editor
   // captures the tokens.css baseline regardless of whether the user opens