@motion-proto/live-tokens 0.8.0 → 0.10.0

package/dist-plugin/index.js

@@ -1,6 +1,6 @@
 // vite-plugin/themeFileApi.ts
-import fs2 from "fs";
-import path2 from "path";
+import fs3 from "fs";
+import path3 from "path";
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -520,18 +520,63 @@ function nextAvailableName(exists, baseName, maxAttempts = 1e3) {
   throw new Error(`Could not allocate a non-colliding name for "${baseName}"`);
 }
 
+// vite-plugin/files/dataPaths.ts
+import fs2 from "fs";
+import path2 from "path";
+var DEFAULT_DATA_DIR = "src/live-tokens/data";
+var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
+  "dataDir",
+  "themesDir",
+  "componentConfigsDir",
+  "manifestsDir"
+]);
+var cached = null;
+function readLiveTokensConfig() {
+  if (cached) return cached;
+  try {
+    const configPath = path2.resolve("live-tokens.config.json");
+    if (!fs2.existsSync(configPath)) return cached = {};
+    const parsed = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+    if (!parsed || typeof parsed !== "object") return cached = {};
+    const unknown = Object.keys(parsed).filter(
+      (k) => k !== "$schema" && !KNOWN_CONFIG_KEYS.has(k)
+    );
+    if (unknown.length > 0) {
+      console.warn(
+        `[live-tokens] Unknown key(s) in live-tokens.config.json: ${unknown.join(", ")}. Known keys: ${Array.from(KNOWN_CONFIG_KEYS).join(", ")}.`
+      );
+    }
+    cached = parsed;
+    return cached;
+  } catch {
+    return cached = {};
+  }
+}
+function resolveDataDirs(opts = {}) {
+  const fileConfig = readLiveTokensConfig();
+  const dataDirRaw = opts.dataDir ?? fileConfig.dataDir ?? DEFAULT_DATA_DIR;
+  const dataDir = path2.resolve(dataDirRaw);
+  const sub = (name) => path2.resolve(dataDir, name);
+  return {
+    dataDir,
+    themesDir: opts.themesDir ? path2.resolve(opts.themesDir) : fileConfig.themesDir ? path2.resolve(fileConfig.themesDir) : sub("themes"),
+    componentConfigsDir: opts.componentConfigsDir ? path2.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? path2.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
+    manifestsDir: opts.manifestsDir ? path2.resolve(opts.manifestsDir) : fileConfig.manifestsDir ? path2.resolve(fileConfig.manifestsDir) : sub("manifests")
+  };
+}
+
 // vite-plugin/themeFileApi.ts
 import { fileURLToPath } from "url";
 var PKG_VERSION = (() => {
   try {
-    let dir = path2.dirname(fileURLToPath(import.meta.url));
+    let dir = path3.dirname(fileURLToPath(import.meta.url));
     for (let i = 0; i < 4; i++) {
-      const p = path2.join(dir, "package.json");
-      if (fs2.existsSync(p)) {
-        const json = JSON.parse(fs2.readFileSync(p, "utf-8"));
+      const p = path3.join(dir, "package.json");
+      if (fs3.existsSync(p)) {
+        const json = JSON.parse(fs3.readFileSync(p, "utf-8"));
         if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
       }
-      const up = path2.dirname(dir);
+      const up = path3.dirname(dir);
       if (up === dir) break;
       dir = up;
     }
@@ -540,15 +585,21 @@ var PKG_VERSION = (() => {
   return "";
 })();
 function themeFileApi(opts) {
-  const THEMES_DIR = path2.resolve(opts.themesDir);
-  const CSS_PATH = path2.resolve(opts.tokensCssPath);
-  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path2.resolve(opts.tokensGeneratedCssPath) : path2.join(path2.dirname(CSS_PATH), "tokens.generated.css");
-  const FONTS_CSS_PATH = opts.fontsCssPath ? path2.resolve(opts.fontsCssPath) : path2.join(path2.dirname(CSS_PATH), "fonts.css");
-  const API_BASE = opts.apiBase ?? "/api";
-  const COMPONENT_CONFIGS_DIR = opts.componentConfigsDir ? path2.resolve(opts.componentConfigsDir) : path2.resolve("component-configs");
-  const COMPONENTS_SRC_DIR = opts.componentsSrcDir ? path2.resolve(opts.componentsSrcDir) : path2.resolve("src/system/components");
-  const MANIFESTS_DIR = opts.manifestsDir ? path2.resolve(opts.manifestsDir) : path2.resolve("manifests");
-  const LEGACY_PRESETS_DIR = path2.resolve("presets");
+  const dataDirs = resolveDataDirs({
+    dataDir: opts.dataDir,
+    themesDir: opts.themesDir,
+    componentConfigsDir: opts.componentConfigsDir,
+    manifestsDir: opts.manifestsDir
+  });
+  const THEMES_DIR = dataDirs.themesDir;
+  const COMPONENT_CONFIGS_DIR = dataDirs.componentConfigsDir;
+  const MANIFESTS_DIR = dataDirs.manifestsDir;
+  const CSS_PATH = path3.resolve(opts.tokensCssPath);
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path3.resolve(opts.tokensGeneratedCssPath) : path3.join(path3.dirname(CSS_PATH), "tokens.generated.css");
+  const FONTS_CSS_PATH = opts.fontsCssPath ? path3.resolve(opts.fontsCssPath) : path3.join(path3.dirname(CSS_PATH), "fonts.css");
+  const API_BASE = opts.apiBase ?? "/api/live-tokens";
+  const COMPONENTS_SRC_DIR = opts.componentsSrcDir ? path3.resolve(opts.componentsSrcDir) : path3.resolve("src/system/components");
+  const LEGACY_PRESETS_DIR = path3.resolve("presets");
   const themesResource = versionedFileResourceServer({
     dir: THEMES_DIR
   });
@@ -556,7 +607,7 @@ function themeFileApi(opts) {
   function componentResource(comp) {
     let r = componentResourceCache.get(comp);
     if (!r) {
-      r = versionedFileResourceServer({ dir: path2.join(COMPONENT_CONFIGS_DIR, comp) });
+      r = versionedFileResourceServer({ dir: path3.join(COMPONENT_CONFIGS_DIR, comp) });
       componentResourceCache.set(comp, r);
     }
     return r;
@@ -564,7 +615,7 @@ function themeFileApi(opts) {
   const manifestsResource = versionedFileResourceServer({ dir: MANIFESTS_DIR });
   function ensureThemesDir() {
     themesResource.ensureDir();
-    if (!fs2.existsSync(path2.join(THEMES_DIR, "default.json"))) {
+    if (!fs3.existsSync(path3.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
         name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -572,7 +623,7 @@ function themeFileApi(opts) {
         editorConfigs: {},
         cssVariables: {}
       };
-      fs2.writeFileSync(path2.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
+      fs3.writeFileSync(path3.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
     }
     themesResource.ensureMeta();
   }
@@ -637,10 +688,10 @@ 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 themePath = path3.join(THEMES_DIR, `${productionThemeName}.json`);
     let themeVarCount = 0;
-    if (fs2.existsSync(themePath)) {
-      const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    if (fs3.existsSync(themePath)) {
+      const themeData = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
       const cssVars = { ...themeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
       const resolvedFontVars = resolveFontStacks(themeData);
@@ -659,7 +710,7 @@ function themeFileApi(opts) {
       }
     }
     let componentOverrideCount = 0;
-    if (fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
+    if (fs3.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];
       for (const comp of listComponentNames()) {
         const prod = componentResource(comp).getProductionName();
@@ -693,21 +744,21 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
-    if (!fs2.existsSync(path2.dirname(GENERATED_CSS_PATH))) {
-      fs2.mkdirSync(path2.dirname(GENERATED_CSS_PATH), { recursive: true });
+    if (!fs3.existsSync(path3.dirname(GENERATED_CSS_PATH))) {
+      fs3.mkdirSync(path3.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    fs2.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    fs3.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
     console.log(
-      `[regenerateTokensCss] Wrote ${path2.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+      `[regenerateTokensCss] Wrote ${path3.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
   function syncTokensToCss(_fileName) {
     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 themePath = path3.join(THEMES_DIR, `${fileName}.json`);
+    if (!fs3.existsSync(themePath)) return;
+    const themeData = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
     const sources = themeData.fontSources;
     if (!sources) return;
     const lines = [];
@@ -731,11 +782,11 @@ function themeFileApi(opts) {
       lines.push("");
     }
     const content = lines.join("\n");
-    if (!fs2.existsSync(path2.dirname(FONTS_CSS_PATH))) {
-      fs2.mkdirSync(path2.dirname(FONTS_CSS_PATH), { recursive: true });
+    if (!fs3.existsSync(path3.dirname(FONTS_CSS_PATH))) {
+      fs3.mkdirSync(path3.dirname(FONTS_CSS_PATH), { recursive: true });
     }
-    fs2.writeFileSync(FONTS_CSS_PATH, content);
-    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path2.basename(FONTS_CSS_PATH)}`);
+    fs3.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path3.basename(FONTS_CSS_PATH)}`);
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
@@ -745,35 +796,35 @@ function themeFileApi(opts) {
     return aliases;
   }
   function componentNameFromFile(filePath) {
-    return path2.basename(filePath, ".svelte").toLowerCase();
+    return path3.basename(filePath, ".svelte").toLowerCase();
   }
   function listComponentSourcePaths() {
-    if (!fs2.existsSync(COMPONENTS_SRC_DIR)) return [];
-    return fs2.readdirSync(COMPONENTS_SRC_DIR).filter((f) => f.endsWith(".svelte")).map((f) => path2.join(COMPONENTS_SRC_DIR, f));
+    if (!fs3.existsSync(COMPONENTS_SRC_DIR)) return [];
+    return fs3.readdirSync(COMPONENTS_SRC_DIR).filter((f) => f.endsWith(".svelte")).map((f) => path3.join(COMPONENTS_SRC_DIR, f));
   }
   function listComponentNames() {
     return listComponentSourcePaths().map(componentNameFromFile);
   }
   function generateDefaultConfig(comp, sourcePath) {
-    if (!fs2.existsSync(sourcePath)) return;
+    if (!fs3.existsSync(sourcePath)) return;
     const r = componentResource(comp);
     r.ensureDir();
     const defaultPath = r.filePath("default");
-    const sourceStat = fs2.statSync(sourcePath);
-    if (fs2.existsSync(defaultPath)) {
-      const defaultStat = fs2.statSync(defaultPath);
+    const sourceStat = fs3.statSync(sourcePath);
+    if (fs3.existsSync(defaultPath)) {
+      const defaultStat = fs3.statSync(defaultPath);
       if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
     }
-    const source = fs2.readFileSync(sourcePath, "utf-8");
+    const source = fs3.readFileSync(sourcePath, "utf-8");
     const body = extractGlobalRootBody(source);
     const aliases = extractAliasDeclarations(body);
     const now = (/* @__PURE__ */ new Date()).toISOString();
     let createdAt = now;
     let existingUpdatedAt;
     let existingAliases;
-    if (fs2.existsSync(defaultPath)) {
+    if (fs3.existsSync(defaultPath)) {
       try {
-        const existing = JSON.parse(fs2.readFileSync(defaultPath, "utf-8"));
+        const existing = JSON.parse(fs3.readFileSync(defaultPath, "utf-8"));
         if (existing.createdAt) createdAt = existing.createdAt;
         if (typeof existing.updatedAt === "string") existingUpdatedAt = existing.updatedAt;
         if (existing.aliases && typeof existing.aliases === "object") {
@@ -792,14 +843,14 @@ function themeFileApi(opts) {
     };
     if (aliasesUnchanged && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
-      fs2.utimesSync(defaultPath, t, t);
+      fs3.utimesSync(defaultPath, t, t);
       return;
     }
-    fs2.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+    fs3.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
   }
   function ensureComponentConfigsDir() {
-    if (!fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
-      fs2.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
+    if (!fs3.existsSync(COMPONENT_CONFIGS_DIR)) {
+      fs3.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
     }
     for (const sourcePath of listComponentSourcePaths()) {
       const comp = componentNameFromFile(sourcePath);
@@ -810,14 +861,14 @@ function themeFileApi(opts) {
     }
   }
   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);
+    if (!fs3.existsSync(MANIFESTS_DIR) && fs3.existsSync(LEGACY_PRESETS_DIR)) {
+      fs3.renameSync(LEGACY_PRESETS_DIR, MANIFESTS_DIR);
+      const legacyProd = path3.join(MANIFESTS_DIR, "_production.json");
+      if (fs3.existsSync(legacyProd)) fs3.unlinkSync(legacyProd);
     }
     manifestsResource.ensureDir();
-    const defaultPath = path2.join(MANIFESTS_DIR, "default.json");
-    if (!fs2.existsSync(defaultPath)) {
+    const defaultPath = path3.join(MANIFESTS_DIR, "default.json");
+    if (!fs3.existsSync(defaultPath)) {
       const componentConfigs = {};
       for (const comp of listComponentNames()) {
         componentConfigs[comp] = componentResource(comp).getActiveName();
@@ -830,30 +881,30 @@ function themeFileApi(opts) {
         theme: themesResource.getActiveName(),
         componentConfigs
       };
-      fs2.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
+      fs3.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
     }
-    if (!fs2.existsSync(manifestsResource.activePath)) {
-      fs2.writeFileSync(
+    if (!fs3.existsSync(manifestsResource.activePath)) {
+      fs3.writeFileSync(
         manifestsResource.activePath,
         JSON.stringify({ activeFile: "default" })
       );
     } else {
       const activeName = manifestsResource.getActiveName();
-      if (!fs2.existsSync(manifestsResource.filePath(activeName))) {
+      if (!fs3.existsSync(manifestsResource.filePath(activeName))) {
         manifestsResource.setActiveName("default");
       }
     }
-    const stragglerProd = path2.join(MANIFESTS_DIR, "_production.json");
-    if (fs2.existsSync(stragglerProd)) fs2.unlinkSync(stragglerProd);
+    const stragglerProd = path3.join(MANIFESTS_DIR, "_production.json");
+    if (fs3.existsSync(stragglerProd)) fs3.unlinkSync(stragglerProd);
   }
   function patchActiveManifest(field, comp, fileName) {
     const activeFile = manifestsResource.getActiveName();
     if (activeFile === "default") return false;
     const manifestPath = manifestsResource.filePath(activeFile);
-    if (!fs2.existsSync(manifestPath)) return false;
+    if (!fs3.existsSync(manifestPath)) return false;
     let manifest;
     try {
-      manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+      manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
     } catch {
       return false;
     }
@@ -864,7 +915,7 @@ function themeFileApi(opts) {
       manifest.componentConfigs[comp] = fileName;
     }
     manifest.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    fs3.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
     return true;
   }
   function formatAliasGradient(v) {
@@ -896,9 +947,9 @@ function themeFileApi(opts) {
   }
   function readComponentConfig(comp, name) {
     const filePath = componentResource(comp).filePath(name);
-    if (!fs2.existsSync(filePath)) return null;
+    if (!fs3.existsSync(filePath)) return null;
     try {
-      return JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+      return JSON.parse(fs3.readFileSync(filePath, "utf-8"));
     } catch {
       return null;
     }
@@ -924,9 +975,9 @@ function themeFileApi(opts) {
   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 files = fs3.readdirSync(THEMES_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = path3.join(THEMES_DIR, f);
+      const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
       const fileName = f.replace(".json", "");
       return {
         name: data.name || fileName,
@@ -940,18 +991,18 @@ function themeFileApi(opts) {
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();
     const filePath = themesResource.filePath(activeFile);
-    if (!fs2.existsSync(filePath)) {
+    if (!fs3.existsSync(filePath)) {
       jsonResponse(res, 404, { error: "Active theme not found" });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
     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 (!fs3.existsSync(themesResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -961,11 +1012,11 @@ function themeFileApi(opts) {
   async function handleGetProductionTheme({ res }) {
     const prodFile = themesResource.getProductionName();
     const filePath = themesResource.filePath(prodFile);
-    if (!fs2.existsSync(filePath)) {
+    if (!fs3.existsSync(filePath)) {
       jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
     jsonResponse(res, 200, {
       fileName: prodFile,
       name: data.name || prodFile,
@@ -976,7 +1027,7 @@ function themeFileApi(opts) {
   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 (!fs3.existsSync(themesResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -992,7 +1043,7 @@ function themeFileApi(opts) {
     syncFontsToCss(fileName);
     syncComponentsToCss();
     patchActiveManifest("theme", null, fileName);
-    const data = JSON.parse(fs2.readFileSync(themesResource.filePath(fileName), "utf-8"));
+    const data = JSON.parse(fs3.readFileSync(themesResource.filePath(fileName), "utf-8"));
     jsonResponse(res, 200, {
       ok: true,
       fileName,
@@ -1004,11 +1055,11 @@ function themeFileApi(opts) {
     const [fileName] = params;
     const filePath = themesResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs2.existsSync(filePath)) {
+      if (!fs3.existsSync(filePath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
+      const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1016,15 +1067,15 @@ function themeFileApi(opts) {
     if (req.method === "PUT") {
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(filePath)) {
+      if (fs3.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      fs3.writeFileSync(filePath, JSON.stringify(body, null, 2));
       if (fileName === themesResource.getProductionName()) {
         syncTokensToCss(fileName);
         syncFontsToCss(fileName);
@@ -1045,8 +1096,8 @@ function themeFileApi(opts) {
         });
         return;
       }
-      if (fs2.existsSync(filePath)) {
-        fs2.unlinkSync(filePath);
+      if (fs3.existsSync(filePath)) {
+        fs3.unlinkSync(filePath);
         if (themesResource.getActiveName() === fileName) {
           themesResource.setActiveName("default");
         }
@@ -1083,7 +1134,7 @@ function themeFileApi(opts) {
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
     const configPath = r.filePath(fileName);
-    if (!fs2.existsSync(configPath)) {
+    if (!fs3.existsSync(configPath)) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1108,7 +1159,7 @@ function themeFileApi(opts) {
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
     const configPath = r.filePath(fileName);
-    if (!fs2.existsSync(configPath)) {
+    if (!fs3.existsSync(configPath)) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1136,11 +1187,11 @@ function themeFileApi(opts) {
     const r = componentResource(comp);
     const configPath = r.filePath(name);
     if (req.method === "GET") {
-      if (!fs2.existsSync(configPath)) {
+      if (!fs3.existsSync(configPath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+      const data = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
       data._fileName = name;
       jsonResponse(res, 200, data);
       return;
@@ -1154,16 +1205,16 @@ function themeFileApi(opts) {
       body.component = comp;
       body.name = body.name || name;
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(configPath)) {
+      if (fs3.existsSync(configPath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+          const existing = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       r.ensureDir();
-      fs2.writeFileSync(configPath, JSON.stringify(body, null, 2));
+      fs3.writeFileSync(configPath, JSON.stringify(body, null, 2));
       if (r.getProductionName() === name) {
         syncComponentsToCss();
       }
@@ -1175,8 +1226,8 @@ function themeFileApi(opts) {
         jsonResponse(res, 403, { error: "Cannot delete default config" });
         return;
       }
-      if (fs2.existsSync(configPath)) {
-        fs2.unlinkSync(configPath);
+      if (fs3.existsSync(configPath)) {
+        fs3.unlinkSync(configPath);
         if (r.getActiveName() === name) {
           r.setActiveName("default");
         }
@@ -1192,15 +1243,15 @@ function themeFileApi(opts) {
   async function handleListComponentConfigs({ params, res }) {
     const [comp] = params;
     const r = componentResource(comp);
-    if (!fs2.existsSync(r.dir)) {
+    if (!fs3.existsSync(r.dir)) {
       jsonResponse(res, 404, { error: "Component not found" });
       return;
     }
     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 files = fs3.readdirSync(r.dir).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = path3.join(r.dir, f);
+      const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
       const fileName = f.replace(".json", "");
       return {
         name: data.name || fileName,
@@ -1214,9 +1265,9 @@ function themeFileApi(opts) {
   }
   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 files = fs3.readdirSync(MANIFESTS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = path3.join(MANIFESTS_DIR, f);
+      const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
       const fileName = f.replace(".json", "");
       return {
         name: data.name || fileName,
@@ -1231,18 +1282,18 @@ function themeFileApi(opts) {
   async function handleGetActiveManifest({ res }) {
     const activeFile = manifestsResource.getActiveName();
     const filePath = manifestsResource.filePath(activeFile);
-    if (!fs2.existsSync(filePath)) {
+    if (!fs3.existsSync(filePath)) {
       jsonResponse(res, 404, { error: "Active manifest not found" });
       return;
     }
-    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
     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 (!fs3.existsSync(manifestsResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
@@ -1253,11 +1304,11 @@ function themeFileApi(opts) {
     const [fileName] = params;
     const filePath = manifestsResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs2.existsSync(filePath)) {
+      if (!fs3.existsSync(filePath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+      const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1269,15 +1320,15 @@ function themeFileApi(opts) {
       }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(filePath)) {
+      if (fs3.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      fs3.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
@@ -1286,8 +1337,8 @@ function themeFileApi(opts) {
         jsonResponse(res, 403, { error: "Cannot delete the default manifest" });
         return;
       }
-      if (fs2.existsSync(filePath)) {
-        fs2.unlinkSync(filePath);
+      if (fs3.existsSync(filePath)) {
+        fs3.unlinkSync(filePath);
         if (manifestsResource.getActiveName() === fileName) {
           manifestsResource.setActiveName("default");
         }
@@ -1299,14 +1350,14 @@ function themeFileApi(opts) {
   async function handleApplyManifest({ params, res }) {
     const [fileName] = params;
     const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs2.existsSync(manifestPath)) {
+    if (!fs3.existsSync(manifestPath)) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+    const manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
     const themePath = themesResource.filePath(themeName);
-    if (!fs2.existsSync(themePath)) {
+    if (!fs3.existsSync(themePath)) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
@@ -1319,7 +1370,7 @@ function themeFileApi(opts) {
       const sanitized = sanitizeFileName(String(configFile) || "default");
       const r = componentResource(comp);
       const cfgPath = r.filePath(sanitized);
-      if (!fs2.existsSync(cfgPath)) {
+      if (!fs3.existsSync(cfgPath)) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
@@ -1331,7 +1382,7 @@ function themeFileApi(opts) {
     themesResource.setProductionName(themeName);
     syncTokensToCss(themeName);
     syncFontsToCss(themeName);
-    const themeData = normalizeTheme(JSON.parse(fs2.readFileSync(themePath, "utf-8")));
+    const themeData = normalizeTheme(JSON.parse(fs3.readFileSync(themePath, "utf-8")));
     themeData._fileName = themeName;
     for (const [comp, configFile] of apply) {
       const r = componentResource(comp);
@@ -1358,18 +1409,18 @@ function themeFileApi(opts) {
   async function handleExportManifest({ params, res }) {
     const [fileName] = params;
     const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs2.existsSync(manifestPath)) {
+    if (!fs3.existsSync(manifestPath)) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+    const manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
     const themePath = themesResource.filePath(themeName);
-    if (!fs2.existsSync(themePath)) {
+    if (!fs3.existsSync(themePath)) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
-    const theme = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    const theme = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
     const knownComponents = new Set(listComponentNames());
     const componentConfigs = {};
     for (const [comp, configFile] of Object.entries(manifest.componentConfigs ?? {})) {
@@ -1377,13 +1428,13 @@ function themeFileApi(opts) {
       const sanitized = sanitizeFileName(String(configFile) || "default");
       if (sanitized === "default") continue;
       const cfgPath = componentResource(comp).filePath(sanitized);
-      if (!fs2.existsSync(cfgPath)) {
+      if (!fs3.existsSync(cfgPath)) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
         return;
       }
-      const cfg = JSON.parse(fs2.readFileSync(cfgPath, "utf-8"));
+      const cfg = JSON.parse(fs3.readFileSync(cfgPath, "utf-8"));
       componentConfigs[`${comp}/${sanitized}`] = cfg;
     }
     const bundle = {
@@ -1405,7 +1456,7 @@ function themeFileApi(opts) {
   }
   function nextAvailableName2(resourceFilePath, baseName) {
     return nextAvailableName(
-      (n) => fs2.existsSync(resourceFilePath(n)),
+      (n) => fs3.existsSync(resourceFilePath(n)),
       sanitizeFileName(baseName)
     );
   }
@@ -1447,7 +1498,7 @@ function themeFileApi(opts) {
     themeBody.updatedAt = now;
     if (!themeBody.createdAt) themeBody.createdAt = now;
     themesResource.ensureDir();
-    fs2.writeFileSync(themesResource.filePath(finalThemeName), JSON.stringify(themeBody, null, 2));
+    fs3.writeFileSync(themesResource.filePath(finalThemeName), JSON.stringify(themeBody, null, 2));
     const knownComponents = new Set(listComponentNames());
     const componentRenames = {};
     for (const [key, cfgValue] of Object.entries(bundle.componentConfigs)) {
@@ -1469,7 +1520,7 @@ function themeFileApi(opts) {
       cfgBody.updatedAt = now;
       if (!cfgBody.createdAt) cfgBody.createdAt = now;
       r.ensureDir();
-      fs2.writeFileSync(r.filePath(finalName), JSON.stringify(cfgBody, null, 2));
+      fs3.writeFileSync(r.filePath(finalName), JSON.stringify(cfgBody, null, 2));
     }
     const rewrittenManifest = {
       ...bundle.manifest,
@@ -1496,7 +1547,7 @@ function themeFileApi(opts) {
       renames[`manifest:${originalManifestName}`] = finalManifestName;
     }
     manifestsResource.ensureDir();
-    fs2.writeFileSync(
+    fs3.writeFileSync(
       manifestsResource.filePath(finalManifestName),
       JSON.stringify(rewrittenManifest, null, 2)
     );
@@ -1569,7 +1620,8 @@ function themeFileApi(opts) {
       return {
         define: {
           __PROJECT_ROOT__: JSON.stringify(process.cwd()),
-          __APP_VERSION__: JSON.stringify(PKG_VERSION)
+          __APP_VERSION__: JSON.stringify(PKG_VERSION),
+          __LIVE_TOKENS_API_BASE__: JSON.stringify(API_BASE)
         }
       };
     },
@@ -1584,7 +1636,7 @@ function themeFileApi(opts) {
       });
     },
     handleHotUpdate(ctx) {
-      const normalized = path2.resolve(ctx.file);
+      const normalized = path3.resolve(ctx.file);
       if (!normalized.startsWith(COMPONENTS_SRC_DIR)) return;
       if (!normalized.endsWith(".svelte")) return;
       const comp = componentNameFromFile(normalized);