@motion-proto/live-tokens 0.16.1 → 0.17.0

package/dist-plugin/index.js

@@ -1,17 +1,14 @@
-// vite-plugin/themeFileApi.ts
-import fs3 from "fs";
-import path3 from "path";
+import {
+  TOKENS_CSS_MIGRATIONS,
+  extractGlobalRootBody,
+  resolveDataDirs,
+  runTokensCssMigrations,
+  validateTokensCss
+} from "./chunk-UBS57IYV.js";
 
-// src/editor/core/themes/parsers/globalRootBlock.ts
-function extractGlobalRootBody(source) {
-  const re = /:global\(:root\)\s*\{([^}]*)\}/g;
-  const bodies = [];
-  let m;
-  while ((m = re.exec(source)) !== null) {
-    bodies.push(m[1]);
-  }
-  return bodies.join("\n");
-}
+// vite-plugin/themeFileApi.ts
+import fs2 from "fs";
+import path2 from "path";
 
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
@@ -520,63 +517,18 @@ 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 = path3.dirname(fileURLToPath(import.meta.url));
+    let dir = path2.dirname(fileURLToPath(import.meta.url));
     for (let i = 0; i < 4; i++) {
-      const p = path3.join(dir, "package.json");
-      if (fs3.existsSync(p)) {
-        const json = JSON.parse(fs3.readFileSync(p, "utf-8"));
+      const p = path2.join(dir, "package.json");
+      if (fs2.existsSync(p)) {
+        const json = JSON.parse(fs2.readFileSync(p, "utf-8"));
         if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
       }
-      const up = path3.dirname(dir);
+      const up = path2.dirname(dir);
       if (up === dir) break;
       dir = up;
     }
@@ -594,23 +546,23 @@ function themeFileApi(opts) {
   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(dataDirs.dataDir, "tokens.generated.css");
-  const FONTS_CSS_PATH = opts.fontsCssPath ? path3.resolve(opts.fontsCssPath) : path3.join(path3.dirname(CSS_PATH), "fonts.css");
+  const CSS_PATH = path2.resolve(opts.tokensCssPath);
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path2.resolve(opts.tokensGeneratedCssPath) : path2.join(dataDirs.dataDir, "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/live-tokens";
-  const consumerComponentDirs = opts.componentsSrcDir ? [path3.resolve(opts.componentsSrcDir)] : [path3.resolve("src/components"), path3.resolve("src/system/components")];
-  const packageComponentsDir = path3.resolve(
-    path3.dirname(fileURLToPath(import.meta.url)),
+  const consumerComponentDirs = opts.componentsSrcDir ? [path2.resolve(opts.componentsSrcDir)] : [path2.resolve("src/components"), path2.resolve("src/system/components")];
+  const packageComponentsDir = path2.resolve(
+    path2.dirname(fileURLToPath(import.meta.url)),
     "..",
     "src",
     "system",
     "components"
   );
   const COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
-  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && fs3.existsSync(packageComponentsDir)) {
+  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && fs2.existsSync(packageComponentsDir)) {
     COMPONENTS_SCAN_DIRS.push(packageComponentsDir);
   }
-  const LEGACY_PRESETS_DIR = path3.resolve("presets");
+  const LEGACY_PRESETS_DIR = path2.resolve("presets");
   const themesResource = versionedFileResourceServer({
     dir: THEMES_DIR
   });
@@ -618,7 +570,7 @@ function themeFileApi(opts) {
   function componentResource(comp) {
     let r = componentResourceCache.get(comp);
     if (!r) {
-      r = versionedFileResourceServer({ dir: path3.join(COMPONENT_CONFIGS_DIR, comp) });
+      r = versionedFileResourceServer({ dir: path2.join(COMPONENT_CONFIGS_DIR, comp) });
       componentResourceCache.set(comp, r);
     }
     return r;
@@ -626,7 +578,7 @@ function themeFileApi(opts) {
   const manifestsResource = versionedFileResourceServer({ dir: MANIFESTS_DIR });
   function ensureThemesDir() {
     themesResource.ensureDir();
-    if (!fs3.existsSync(path3.join(THEMES_DIR, "default.json"))) {
+    if (!fs2.existsSync(path2.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
         name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -634,7 +586,7 @@ function themeFileApi(opts) {
         editorConfigs: {},
         cssVariables: {}
       };
-      fs3.writeFileSync(path3.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
+      fs2.writeFileSync(path2.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
     }
     themesResource.ensureMeta();
   }
@@ -699,10 +651,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 = path3.join(THEMES_DIR, `${productionThemeName}.json`);
+    const themePath = path2.join(THEMES_DIR, `${productionThemeName}.json`);
     let themeVarCount = 0;
-    if (fs3.existsSync(themePath)) {
-      const themeData = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
+    if (fs2.existsSync(themePath)) {
+      const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
       const cssVars = { ...themeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
       const resolvedFontVars = resolveFontStacks(themeData);
@@ -721,7 +673,7 @@ function themeFileApi(opts) {
       }
     }
     let componentOverrideCount = 0;
-    if (fs3.existsSync(COMPONENT_CONFIGS_DIR)) {
+    if (fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];
       for (const comp of listComponentNames()) {
         const prod = componentResource(comp).getProductionName();
@@ -755,21 +707,21 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
-    if (!fs3.existsSync(path3.dirname(GENERATED_CSS_PATH))) {
-      fs3.mkdirSync(path3.dirname(GENERATED_CSS_PATH), { recursive: true });
+    if (!fs2.existsSync(path2.dirname(GENERATED_CSS_PATH))) {
+      fs2.mkdirSync(path2.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    fs3.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    fs2.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
     console.log(
-      `[regenerateTokensCss] Wrote ${path3.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+      `[regenerateTokensCss] Wrote ${path2.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
   function syncTokensToCss(_fileName) {
     regenerateTokensCss();
   }
   function syncFontsToCss(fileName) {
-    const themePath = path3.join(THEMES_DIR, `${fileName}.json`);
-    if (!fs3.existsSync(themePath)) return;
-    const themeData = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
+    const themePath = path2.join(THEMES_DIR, `${fileName}.json`);
+    if (!fs2.existsSync(themePath)) return;
+    const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
     const sources = themeData.fontSources;
     if (!sources) return;
     const lines = [];
@@ -793,11 +745,11 @@ function themeFileApi(opts) {
       lines.push("");
     }
     const content = lines.join("\n");
-    if (!fs3.existsSync(path3.dirname(FONTS_CSS_PATH))) {
-      fs3.mkdirSync(path3.dirname(FONTS_CSS_PATH), { recursive: true });
+    if (!fs2.existsSync(path2.dirname(FONTS_CSS_PATH))) {
+      fs2.mkdirSync(path2.dirname(FONTS_CSS_PATH), { recursive: true });
     }
-    fs3.writeFileSync(FONTS_CSS_PATH, content);
-    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path3.basename(FONTS_CSS_PATH)}`);
+    fs2.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path2.basename(FONTS_CSS_PATH)}`);
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
@@ -807,11 +759,11 @@ function themeFileApi(opts) {
     return aliases;
   }
   function componentNameFromFile(filePath) {
-    return path3.basename(filePath, ".svelte").toLowerCase();
+    return path2.basename(filePath, ".svelte").toLowerCase();
   }
   function isThemeAwareComponent(filePath) {
     try {
-      const source = fs3.readFileSync(filePath, "utf-8");
+      const source = fs2.readFileSync(filePath, "utf-8");
       return /:global\(:root\)\s*\{/.test(source);
     } catch {
       return false;
@@ -820,10 +772,10 @@ function themeFileApi(opts) {
   function listComponentSourcePaths() {
     const byName = /* @__PURE__ */ new Map();
     for (const dir of COMPONENTS_SCAN_DIRS) {
-      if (!fs3.existsSync(dir)) continue;
-      for (const f of fs3.readdirSync(dir)) {
+      if (!fs2.existsSync(dir)) continue;
+      for (const f of fs2.readdirSync(dir)) {
         if (!f.endsWith(".svelte")) continue;
-        const full = path3.join(dir, f);
+        const full = path2.join(dir, f);
         if (!isThemeAwareComponent(full)) continue;
         const name = componentNameFromFile(f);
         if (!byName.has(name)) byName.set(name, full);
@@ -834,26 +786,53 @@ function themeFileApi(opts) {
   function listComponentNames() {
     return listComponentSourcePaths().map(componentNameFromFile);
   }
+  function warnOnTokenDrift(log) {
+    let tokensCss = "";
+    try {
+      tokensCss = fs2.readFileSync(CSS_PATH, "utf-8");
+    } catch {
+      return;
+    }
+    let generatedCss = "";
+    try {
+      generatedCss = fs2.readFileSync(GENERATED_CSS_PATH, "utf-8");
+    } catch {
+    }
+    const componentSources = listComponentSourcePaths().map((p) => ({
+      name: componentNameFromFile(p),
+      source: fs2.readFileSync(p, "utf-8")
+    }));
+    const missing = validateTokensCss({ tokensCss, generatedCss, componentSources });
+    if (missing.length === 0) return;
+    const lines = missing.map(
+      (m) => `  ${m.token}  (referenced by ${m.referencedBy.join(", ")})`
+    );
+    log(
+      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${path2.relative(process.cwd(), CSS_PATH)}:
+${lines.join("\n")}
+  These render as blank/empty editor slots. Run \`npx live-tokens migrate\` to reconcile.`
+    );
+  }
   function generateDefaultConfig(comp, sourcePath) {
-    if (!fs3.existsSync(sourcePath)) return;
+    if (!fs2.existsSync(sourcePath)) return;
     const r = componentResource(comp);
     r.ensureDir();
     const defaultPath = r.filePath("default");
-    const sourceStat = fs3.statSync(sourcePath);
-    if (fs3.existsSync(defaultPath)) {
-      const defaultStat = fs3.statSync(defaultPath);
+    const sourceStat = fs2.statSync(sourcePath);
+    if (fs2.existsSync(defaultPath)) {
+      const defaultStat = fs2.statSync(defaultPath);
       if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
     }
-    const source = fs3.readFileSync(sourcePath, "utf-8");
+    const source = fs2.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 (fs3.existsSync(defaultPath)) {
+    if (fs2.existsSync(defaultPath)) {
       try {
-        const existing = JSON.parse(fs3.readFileSync(defaultPath, "utf-8"));
+        const existing = JSON.parse(fs2.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") {
@@ -872,14 +851,14 @@ function themeFileApi(opts) {
     };
     if (aliasesUnchanged && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
-      fs3.utimesSync(defaultPath, t, t);
+      fs2.utimesSync(defaultPath, t, t);
       return;
     }
-    fs3.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+    fs2.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
   }
   function ensureComponentConfigsDir() {
-    if (!fs3.existsSync(COMPONENT_CONFIGS_DIR)) {
-      fs3.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
+    if (!fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
+      fs2.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
     }
     for (const sourcePath of listComponentSourcePaths()) {
       const comp = componentNameFromFile(sourcePath);
@@ -890,14 +869,14 @@ function themeFileApi(opts) {
     }
   }
   function ensureManifestsDir() {
-    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);
+    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 = path3.join(MANIFESTS_DIR, "default.json");
-    if (!fs3.existsSync(defaultPath)) {
+    const defaultPath = path2.join(MANIFESTS_DIR, "default.json");
+    if (!fs2.existsSync(defaultPath)) {
       const componentConfigs = {};
       for (const comp of listComponentNames()) {
         componentConfigs[comp] = componentResource(comp).getActiveName();
@@ -910,30 +889,30 @@ function themeFileApi(opts) {
         theme: themesResource.getActiveName(),
         componentConfigs
       };
-      fs3.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
+      fs2.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
     }
-    if (!fs3.existsSync(manifestsResource.activePath)) {
-      fs3.writeFileSync(
+    if (!fs2.existsSync(manifestsResource.activePath)) {
+      fs2.writeFileSync(
         manifestsResource.activePath,
         JSON.stringify({ activeFile: "default" })
       );
     } else {
       const activeName = manifestsResource.getActiveName();
-      if (!fs3.existsSync(manifestsResource.filePath(activeName))) {
+      if (!fs2.existsSync(manifestsResource.filePath(activeName))) {
         manifestsResource.setActiveName("default");
       }
     }
-    const stragglerProd = path3.join(MANIFESTS_DIR, "_production.json");
-    if (fs3.existsSync(stragglerProd)) fs3.unlinkSync(stragglerProd);
+    const stragglerProd = path2.join(MANIFESTS_DIR, "_production.json");
+    if (fs2.existsSync(stragglerProd)) fs2.unlinkSync(stragglerProd);
   }
   function patchActiveManifest(field, comp, fileName) {
     const activeFile = manifestsResource.getActiveName();
     if (activeFile === "default") return false;
     const manifestPath = manifestsResource.filePath(activeFile);
-    if (!fs3.existsSync(manifestPath)) return false;
+    if (!fs2.existsSync(manifestPath)) return false;
     let manifest;
     try {
-      manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
+      manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
     } catch {
       return false;
     }
@@ -944,7 +923,7 @@ function themeFileApi(opts) {
       manifest.componentConfigs[comp] = fileName;
     }
     manifest.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    fs3.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
     return true;
   }
   function formatAliasGradient(v) {
@@ -976,9 +955,9 @@ function themeFileApi(opts) {
   }
   function readComponentConfig(comp, name) {
     const filePath = componentResource(comp).filePath(name);
-    if (!fs3.existsSync(filePath)) return null;
+    if (!fs2.existsSync(filePath)) return null;
     try {
-      return JSON.parse(fs3.readFileSync(filePath, "utf-8"));
+      return JSON.parse(fs2.readFileSync(filePath, "utf-8"));
     } catch {
       return null;
     }
@@ -1004,9 +983,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 = 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 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", "");
       return {
         name: data.name || fileName,
@@ -1020,18 +999,18 @@ function themeFileApi(opts) {
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();
     const filePath = themesResource.filePath(activeFile);
-    if (!fs3.existsSync(filePath)) {
+    if (!fs2.existsSync(filePath)) {
       jsonResponse(res, 404, { error: "Active theme not found" });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(JSON.parse(fs2.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 (!fs3.existsSync(themesResource.filePath(fileName))) {
+    if (!fs2.existsSync(themesResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1041,11 +1020,11 @@ function themeFileApi(opts) {
   async function handleGetProductionTheme({ res }) {
     const prodFile = themesResource.getProductionName();
     const filePath = themesResource.filePath(prodFile);
-    if (!fs3.existsSync(filePath)) {
+    if (!fs2.existsSync(filePath)) {
       jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
       return;
     }
-    const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
     jsonResponse(res, 200, {
       fileName: prodFile,
       name: data.name || prodFile,
@@ -1056,7 +1035,7 @@ function themeFileApi(opts) {
   async function handleSetProductionTheme({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!fs3.existsSync(themesResource.filePath(fileName))) {
+    if (!fs2.existsSync(themesResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1072,7 +1051,7 @@ function themeFileApi(opts) {
     syncFontsToCss(fileName);
     syncComponentsToCss();
     patchActiveManifest("theme", null, fileName);
-    const data = JSON.parse(fs3.readFileSync(themesResource.filePath(fileName), "utf-8"));
+    const data = JSON.parse(fs2.readFileSync(themesResource.filePath(fileName), "utf-8"));
     jsonResponse(res, 200, {
       ok: true,
       fileName,
@@ -1084,11 +1063,11 @@ function themeFileApi(opts) {
     const [fileName] = params;
     const filePath = themesResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs3.existsSync(filePath)) {
+      if (!fs2.existsSync(filePath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = normalizeTheme(JSON.parse(fs3.readFileSync(filePath, "utf-8")));
+      const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1096,15 +1075,15 @@ function themeFileApi(opts) {
     if (req.method === "PUT") {
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs3.existsSync(filePath)) {
+      if (fs2.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs3.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
       if (fileName === themesResource.getProductionName()) {
         syncTokensToCss(fileName);
         syncFontsToCss(fileName);
@@ -1125,8 +1104,8 @@ function themeFileApi(opts) {
         });
         return;
       }
-      if (fs3.existsSync(filePath)) {
-        fs3.unlinkSync(filePath);
+      if (fs2.existsSync(filePath)) {
+        fs2.unlinkSync(filePath);
         if (themesResource.getActiveName() === fileName) {
           themesResource.setActiveName("default");
         }
@@ -1163,7 +1142,7 @@ function themeFileApi(opts) {
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
     const configPath = r.filePath(fileName);
-    if (!fs3.existsSync(configPath)) {
+    if (!fs2.existsSync(configPath)) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1188,7 +1167,7 @@ function themeFileApi(opts) {
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
     const configPath = r.filePath(fileName);
-    if (!fs3.existsSync(configPath)) {
+    if (!fs2.existsSync(configPath)) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1216,11 +1195,11 @@ function themeFileApi(opts) {
     const r = componentResource(comp);
     const configPath = r.filePath(name);
     if (req.method === "GET") {
-      if (!fs3.existsSync(configPath)) {
+      if (!fs2.existsSync(configPath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
+      const data = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
       data._fileName = name;
       jsonResponse(res, 200, data);
       return;
@@ -1234,16 +1213,16 @@ function themeFileApi(opts) {
       body.component = comp;
       body.name = body.name || name;
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs3.existsSync(configPath)) {
+      if (fs2.existsSync(configPath)) {
         try {
-          const existing = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
+          const existing = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       r.ensureDir();
-      fs3.writeFileSync(configPath, JSON.stringify(body, null, 2));
+      fs2.writeFileSync(configPath, JSON.stringify(body, null, 2));
       if (r.getProductionName() === name) {
         syncComponentsToCss();
       }
@@ -1255,8 +1234,8 @@ function themeFileApi(opts) {
         jsonResponse(res, 403, { error: "Cannot delete default config" });
         return;
       }
-      if (fs3.existsSync(configPath)) {
-        fs3.unlinkSync(configPath);
+      if (fs2.existsSync(configPath)) {
+        fs2.unlinkSync(configPath);
         if (r.getActiveName() === name) {
           r.setActiveName("default");
         }
@@ -1272,15 +1251,15 @@ function themeFileApi(opts) {
   async function handleListComponentConfigs({ params, res }) {
     const [comp] = params;
     const r = componentResource(comp);
-    if (!fs3.existsSync(r.dir)) {
+    if (!fs2.existsSync(r.dir)) {
       jsonResponse(res, 404, { error: "Component not found" });
       return;
     }
     const activeFile = r.getActiveName();
     const productionFile = r.getProductionName();
-    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 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", "");
       return {
         name: data.name || fileName,
@@ -1294,9 +1273,9 @@ function themeFileApi(opts) {
   }
   async function handleListManifests({ res }) {
     const activeFile = manifestsResource.getActiveName();
-    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 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", "");
       return {
         name: data.name || fileName,
@@ -1311,18 +1290,18 @@ function themeFileApi(opts) {
   async function handleGetActiveManifest({ res }) {
     const activeFile = manifestsResource.getActiveName();
     const filePath = manifestsResource.filePath(activeFile);
-    if (!fs3.existsSync(filePath)) {
+    if (!fs2.existsSync(filePath)) {
       jsonResponse(res, 404, { error: "Active manifest not found" });
       return;
     }
-    const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
+    const data = JSON.parse(fs2.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 (!fs3.existsSync(manifestsResource.filePath(fileName))) {
+    if (!fs2.existsSync(manifestsResource.filePath(fileName))) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
@@ -1333,11 +1312,11 @@ function themeFileApi(opts) {
     const [fileName] = params;
     const filePath = manifestsResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!fs3.existsSync(filePath)) {
+      if (!fs2.existsSync(filePath)) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
+      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1349,15 +1328,15 @@ function themeFileApi(opts) {
       }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs3.existsSync(filePath)) {
+      if (fs2.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs3.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs3.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
@@ -1366,8 +1345,8 @@ function themeFileApi(opts) {
         jsonResponse(res, 403, { error: "Cannot delete the default manifest" });
         return;
       }
-      if (fs3.existsSync(filePath)) {
-        fs3.unlinkSync(filePath);
+      if (fs2.existsSync(filePath)) {
+        fs2.unlinkSync(filePath);
         if (manifestsResource.getActiveName() === fileName) {
           manifestsResource.setActiveName("default");
         }
@@ -1379,14 +1358,14 @@ function themeFileApi(opts) {
   async function handleApplyManifest({ params, res }) {
     const [fileName] = params;
     const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs3.existsSync(manifestPath)) {
+    if (!fs2.existsSync(manifestPath)) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
+    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
     const themePath = themesResource.filePath(themeName);
-    if (!fs3.existsSync(themePath)) {
+    if (!fs2.existsSync(themePath)) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
@@ -1399,7 +1378,7 @@ function themeFileApi(opts) {
       const sanitized = sanitizeFileName(String(configFile) || "default");
       const r = componentResource(comp);
       const cfgPath = r.filePath(sanitized);
-      if (!fs3.existsSync(cfgPath)) {
+      if (!fs2.existsSync(cfgPath)) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
@@ -1411,7 +1390,7 @@ function themeFileApi(opts) {
     themesResource.setProductionName(themeName);
     syncTokensToCss(themeName);
     syncFontsToCss(themeName);
-    const themeData = normalizeTheme(JSON.parse(fs3.readFileSync(themePath, "utf-8")));
+    const themeData = normalizeTheme(JSON.parse(fs2.readFileSync(themePath, "utf-8")));
     themeData._fileName = themeName;
     for (const [comp, configFile] of apply) {
       const r = componentResource(comp);
@@ -1438,18 +1417,18 @@ function themeFileApi(opts) {
   async function handleExportManifest({ params, res }) {
     const [fileName] = params;
     const manifestPath = manifestsResource.filePath(fileName);
-    if (!fs3.existsSync(manifestPath)) {
+    if (!fs2.existsSync(manifestPath)) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
+    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
     const themePath = themesResource.filePath(themeName);
-    if (!fs3.existsSync(themePath)) {
+    if (!fs2.existsSync(themePath)) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
-    const theme = JSON.parse(fs3.readFileSync(themePath, "utf-8"));
+    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 ?? {})) {
@@ -1457,13 +1436,13 @@ function themeFileApi(opts) {
       const sanitized = sanitizeFileName(String(configFile) || "default");
       if (sanitized === "default") continue;
       const cfgPath = componentResource(comp).filePath(sanitized);
-      if (!fs3.existsSync(cfgPath)) {
+      if (!fs2.existsSync(cfgPath)) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
         return;
       }
-      const cfg = JSON.parse(fs3.readFileSync(cfgPath, "utf-8"));
+      const cfg = JSON.parse(fs2.readFileSync(cfgPath, "utf-8"));
       componentConfigs[`${comp}/${sanitized}`] = cfg;
     }
     const bundle = {
@@ -1485,7 +1464,7 @@ function themeFileApi(opts) {
   }
   function nextAvailableName2(resourceFilePath, baseName) {
     return nextAvailableName(
-      (n) => fs3.existsSync(resourceFilePath(n)),
+      (n) => fs2.existsSync(resourceFilePath(n)),
       sanitizeFileName(baseName)
     );
   }
@@ -1527,7 +1506,7 @@ function themeFileApi(opts) {
     themeBody.updatedAt = now;
     if (!themeBody.createdAt) themeBody.createdAt = now;
     themesResource.ensureDir();
-    fs3.writeFileSync(themesResource.filePath(finalThemeName), JSON.stringify(themeBody, null, 2));
+    fs2.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)) {
@@ -1549,7 +1528,7 @@ function themeFileApi(opts) {
       cfgBody.updatedAt = now;
       if (!cfgBody.createdAt) cfgBody.createdAt = now;
       r.ensureDir();
-      fs3.writeFileSync(r.filePath(finalName), JSON.stringify(cfgBody, null, 2));
+      fs2.writeFileSync(r.filePath(finalName), JSON.stringify(cfgBody, null, 2));
     }
     const rewrittenManifest = {
       ...bundle.manifest,
@@ -1576,7 +1555,7 @@ function themeFileApi(opts) {
       renames[`manifest:${originalManifestName}`] = finalManifestName;
     }
     manifestsResource.ensureDir();
-    fs3.writeFileSync(
+    fs2.writeFileSync(
       manifestsResource.filePath(finalManifestName),
       JSON.stringify(rewrittenManifest, null, 2)
     );
@@ -1659,13 +1638,14 @@ function themeFileApi(opts) {
       ensureComponentConfigsDir();
       ensureManifestsDir();
       regenerateTokensCss();
+      warnOnTokenDrift((msg) => server.config.logger.warn(msg));
       server.middlewares.use(async (req, res, next) => {
         const handled = await dispatch(req, res, routes);
         if (!handled) next();
       });
     },
     handleHotUpdate(ctx) {
-      const normalized = path3.resolve(ctx.file);
+      const normalized = path2.resolve(ctx.file);
       if (!COMPONENTS_SCAN_DIRS.some((d) => normalized.startsWith(d))) return;
       if (!normalized.endsWith(".svelte")) return;
       if (!isThemeAwareComponent(normalized)) return;
@@ -1675,5 +1655,8 @@ function themeFileApi(opts) {
   };
 }
 export {
-  themeFileApi
+  TOKENS_CSS_MIGRATIONS,
+  runTokensCssMigrations,
+  themeFileApi,
+  validateTokensCss
 };