@motion-proto/live-tokens 0.74.0 → 0.76.0

package/dist-plugin/index.cjs

@@ -38,8 +38,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // vite-plugin/themeFileApi.ts
-var import_fs4 = __toESM(require("fs"), 1);
-var import_path4 = __toESM(require("path"), 1);
+var import_fs5 = __toESM(require("fs"), 1);
+var import_path5 = __toESM(require("path"), 1);
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -1664,6 +1664,47 @@ var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-07-stroke-role-renames.ts
+var RENAMES2 = {
+  tabbar: Object.fromEntries(
+    ["default", "hover", "active", "disabled"].map((s) => [
+      `--tabbar-${s}-indicator-border-width`,
+      `--tabbar-${s}-indicator-width`
+    ])
+  ),
+  collapsiblesection: Object.fromEntries(
+    ["default", "hover"].flatMap((s) => [
+      [`--collapsiblesection-divider-${s}-border`, `--collapsiblesection-divider-${s}-hairline-color`],
+      [`--collapsiblesection-divider-${s}-border-width`, `--collapsiblesection-divider-${s}-hairline-thickness`]
+    ])
+  ),
+  dialog: Object.fromEntries(
+    ["header", "footer"].flatMap((part) => [
+      [`--dialog-${part}-border`, `--dialog-${part}-divider`],
+      [`--dialog-${part}-border-width`, `--dialog-${part}-divider-width`]
+    ])
+  ),
+  table: {
+    "--table-default-header-border": "--table-default-header-divider",
+    "--table-default-header-border-width": "--table-default-header-divider-width"
+  }
+};
+var componentMigration_2026_09_07_strokeRoleRenames = {
+  id: "2026-09-07-stroke-role-renames",
+  fromVersion: 26,
+  toVersion: 27,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES2[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1699,7 +1740,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
   componentMigration_2026_09_02_sectiondividerDropTitleOutline,
-  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
+  componentMigration_2026_09_07_strokeRoleRenames
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -1815,9 +1857,11 @@ function versionedFileResourceServer(opts) {
   function ensureMeta() {
     if (!import_fs.default.existsSync(activePath)) {
       import_fs.default.writeFileSync(activePath, JSON.stringify({ activeFile: defaultName }));
+      opts.onWrite?.(activePath);
     }
     if (!import_fs.default.existsSync(productionPath)) {
       import_fs.default.writeFileSync(productionPath, JSON.stringify({ productionFile: defaultName }));
+      opts.onWrite?.(productionPath);
     }
   }
   function filePath(name) {
@@ -1882,9 +1926,11 @@ function versionedFileResourceServer(opts) {
   }
   function setActiveName(name) {
     import_fs.default.writeFileSync(activePath, JSON.stringify({ activeFile: name }));
+    opts.onWrite?.(activePath);
   }
   function setProductionName(name) {
     import_fs.default.writeFileSync(productionPath, JSON.stringify({ productionFile: name }));
+    opts.onWrite?.(productionPath);
   }
   function hasWorking() {
     return import_fs.default.existsSync(workingPath);
@@ -1900,9 +1946,12 @@ function versionedFileResourceServer(opts) {
   function writeWorking(data) {
     ensureDir();
     import_fs.default.writeFileSync(workingPath, JSON.stringify(data, null, 2));
+    opts.onWrite?.(workingPath);
   }
   function clearWorking() {
-    if (import_fs.default.existsSync(workingPath)) import_fs.default.unlinkSync(workingPath);
+    if (!import_fs.default.existsSync(workingPath)) return;
+    import_fs.default.unlinkSync(workingPath);
+    opts.onWrite?.(workingPath);
   }
   return {
     dir,
@@ -1955,6 +2004,67 @@ async function dispatch(req, res, routes) {
   return false;
 }
 
+// vite-plugin/files/dataTreeWatch.ts
+var import_fs2 = __toESM(require("fs"), 1);
+var import_path2 = __toESM(require("path"), 1);
+function fingerprint(file) {
+  try {
+    return import_fs2.default.readFileSync(file, "utf-8");
+  } catch {
+    return null;
+  }
+}
+function dataTreeWatch(opts) {
+  const debounceMs = opts.debounceMs ?? 100;
+  const ownWrites = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let watchers = [];
+  let timer = null;
+  function noteOwnWrite(file) {
+    const resolved = import_path2.default.resolve(file);
+    ownWrites.set(resolved, fingerprint(resolved));
+  }
+  function onEvent(dir, filename) {
+    if (!filename) return;
+    const file = import_path2.default.resolve(dir, filename.toString());
+    if (!opts.isLive(file)) return;
+    if (ownWrites.has(file) && ownWrites.get(file) === fingerprint(file)) return;
+    ownWrites.delete(file);
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      for (const listener of listeners) listener();
+    }, debounceMs);
+  }
+  function start() {
+    for (const dir of opts.dirs) {
+      if (!import_fs2.default.existsSync(dir)) continue;
+      const watcher = import_fs2.default.watch(
+        dir,
+        { recursive: true, persistent: false },
+        (_event, filename) => onEvent(dir, filename)
+      );
+      watcher.on("error", () => watcher.close());
+      watchers.push(watcher);
+    }
+  }
+  function stop() {
+    for (const watcher of watchers) watcher.close();
+    watchers = [];
+    if (timer) clearTimeout(timer);
+    timer = null;
+  }
+  function subscribe(listener) {
+    if (listeners.size === 0) start();
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) stop();
+    };
+  }
+  return { noteOwnWrite, subscribe };
+}
+
 // src/editor/core/themes/migrateComponentConfig.ts
 function migrateComponentConfig(component, aliasesIn, rawConfig, fileVersion) {
   const stringPart = {};
@@ -2671,9 +2781,19 @@ function nextAvailableName(exists, baseName, maxAttempts = 1e3) {
 }
 
 // vite-plugin/files/dataPaths.ts
-var import_fs2 = __toESM(require("fs"), 1);
-var import_path2 = __toESM(require("path"), 1);
+var import_fs3 = __toESM(require("fs"), 1);
+var import_path3 = __toESM(require("path"), 1);
 var DEFAULT_DATA_DIR = "src/live-tokens/data";
+var TEST_DATA_DIR_ENV = "LIVE_TOKENS_TEST_DATA_DIR";
+function testDataDir() {
+  const raw = process.env[TEST_DATA_DIR_ENV];
+  return raw && raw.trim() !== "" ? import_path3.default.resolve(raw.trim()) : void 0;
+}
+var TEST_PACKAGE_DATA_DIR_ENV = "LIVE_TOKENS_TEST_PACKAGE_DATA_DIR";
+function testPackageDataDir() {
+  const raw = process.env[TEST_PACKAGE_DATA_DIR_ENV];
+  return raw && raw.trim() !== "" ? import_path3.default.resolve(raw.trim()) : void 0;
+}
 var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "dataDir",
   "colorsAndTypeDir",
@@ -2688,9 +2808,9 @@ var cached = null;
 function readLiveTokensConfig() {
   if (cached) return cached;
   try {
-    const configPath = import_path2.default.resolve("live-tokens.config.json");
-    if (!import_fs2.default.existsSync(configPath)) return cached = {};
-    const parsed = JSON.parse(import_fs2.default.readFileSync(configPath, "utf-8"));
+    const configPath = import_path3.default.resolve("live-tokens.config.json");
+    if (!import_fs3.default.existsSync(configPath)) return cached = {};
+    const parsed = JSON.parse(import_fs3.default.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)
@@ -2707,71 +2827,81 @@ function readLiveTokensConfig() {
   }
 }
 function resolveDataDirs(opts = {}) {
+  const isolated = testDataDir();
+  if (isolated) {
+    return {
+      dataDir: isolated,
+      colorsAndTypeDir: import_path3.default.join(isolated, "colors-and-type"),
+      componentConfigsDir: import_path3.default.join(isolated, "component-configs"),
+      themesDir: import_path3.default.join(isolated, "themes"),
+      sketchStylesDir: import_path3.default.join(isolated, "sketch-styles")
+    };
+  }
   const fileConfig = readLiveTokensConfig();
   const dataDirRaw = opts.dataDir ?? fileConfig.dataDir ?? DEFAULT_DATA_DIR;
-  const dataDir = import_path2.default.resolve(dataDirRaw);
-  const sub = (name) => import_path2.default.resolve(dataDir, name);
+  const dataDir = import_path3.default.resolve(dataDirRaw);
+  const sub = (name) => import_path3.default.resolve(dataDir, name);
   return {
     dataDir,
-    colorsAndTypeDir: opts.colorsAndTypeDir ? import_path2.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path2.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
-    componentConfigsDir: opts.componentConfigsDir ? import_path2.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path2.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
-    themesDir: opts.themesDir ? import_path2.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path2.default.resolve(fileConfig.themesDir) : sub("themes"),
+    colorsAndTypeDir: opts.colorsAndTypeDir ? import_path3.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path3.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
+    componentConfigsDir: opts.componentConfigsDir ? import_path3.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path3.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
+    themesDir: opts.themesDir ? import_path3.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path3.default.resolve(fileConfig.themesDir) : sub("themes"),
     sketchStylesDir: sub("sketch-styles"),
-    legacyManifestsDir: fileConfig.manifestsDir ? import_path2.default.resolve(fileConfig.manifestsDir) : void 0
+    legacyManifestsDir: fileConfig.manifestsDir ? import_path3.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }
 
 // vite-plugin/files/legacyLayout.ts
-var import_fs3 = __toESM(require("fs"), 1);
-var import_path3 = __toESM(require("path"), 1);
+var import_fs4 = __toESM(require("fs"), 1);
+var import_path4 = __toESM(require("path"), 1);
 function jsonFiles(dir) {
-  if (!import_fs3.default.existsSync(dir)) return [];
+  if (!import_fs4.default.existsSync(dir)) return [];
   try {
-    return import_fs3.default.readdirSync(dir).filter((f) => f.endsWith(".json")).map((f) => import_path3.default.join(dir, f));
+    return import_fs4.default.readdirSync(dir).filter((f) => f.endsWith(".json")).map((f) => import_path4.default.join(dir, f));
   } catch {
     return [];
   }
 }
 function isDirectory(dir) {
   try {
-    return import_fs3.default.statSync(dir).isDirectory();
+    return import_fs4.default.statSync(dir).isDirectory();
   } catch {
     return false;
   }
 }
 function parseJsonFile(file) {
   try {
-    return JSON.parse(import_fs3.default.readFileSync(file, "utf-8"));
+    return JSON.parse(import_fs4.default.readFileSync(file, "utf-8"));
   } catch {
     return null;
   }
 }
 function holdsATheme(themesDir) {
   return jsonFiles(themesDir).some((file) => {
-    if (import_path3.default.basename(file).startsWith("_")) return false;
+    if (import_path4.default.basename(file).startsWith("_")) return false;
     const raw = parseJsonFile(file);
     if (!raw || typeof raw !== "object") return false;
     return "colorsAndType" in raw || "theme" in raw;
   });
 }
 function detectLegacyLayout(input) {
-  const manifestsDir = input.configuredManifestsDir ?? import_path3.default.join(input.dataDir, "manifests");
+  const manifestsDir = input.configuredManifestsDir ?? import_path4.default.join(input.dataDir, "manifests");
   const themesHoldAThemeFile = holdsATheme(input.themesDir);
   if (isDirectory(manifestsDir) && !themesHoldAThemeFile) {
     return { manifestsDir, evidence: `${manifestsDir} is the pre-0.48 whole-theme directory` };
   }
   if (jsonFiles(input.colorsAndTypeDir).length > 0) return null;
   for (const file of jsonFiles(input.themesDir)) {
-    if (import_path3.default.basename(file).startsWith("_")) continue;
+    if (import_path4.default.basename(file).startsWith("_")) continue;
     if (isColorsAndTypeShaped(parseJsonFile(file))) {
       return { manifestsDir, evidence: `${file} is a colors-and-type file, not a theme` };
     }
   }
-  const pointer = ["_active.json", "_production.json"].map((name) => import_path3.default.join(input.themesDir, name)).find((p) => import_fs3.default.existsSync(p));
-  if (pointer && !themesHoldAThemeFile && !import_fs3.default.existsSync(input.colorsAndTypeDir)) {
+  const pointer = ["_active.json", "_production.json"].map((name) => import_path4.default.join(input.themesDir, name)).find((p) => import_fs4.default.existsSync(p));
+  if (pointer && !themesHoldAThemeFile && !import_fs4.default.existsSync(input.colorsAndTypeDir)) {
     return {
       manifestsDir,
-      evidence: `${pointer} points at colors and type, and there is no ${import_path3.default.basename(input.colorsAndTypeDir)} directory`
+      evidence: `${pointer} points at colors and type, and there is no ${import_path4.default.basename(input.colorsAndTypeDir)} directory`
     };
   }
   return null;
@@ -3027,7 +3157,7 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
-var RENAMES2 = [
+var RENAMES3 = [
   ["--line-height-xs", "--line-height-none"],
   ["--line-height-sm", "--line-height-tighter"],
   ["--line-height-md", "--line-height-normal"],
@@ -3047,7 +3177,7 @@ var tokensCssMigration_2026_07_20_lineHeightRename = {
   description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
   apply(css) {
     let out = css;
-    for (const [oldName, newName] of RENAMES2) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES3) out = renameToken2(out, oldName, newName);
     out = removeToken(out, "--line-height-xl");
     out = ensureScale(out, {
       anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
@@ -3280,7 +3410,7 @@ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
-var RENAMES3 = [
+var RENAMES4 = [
   ["--overlay-low", "--scrim-low"],
   ["--overlay-high", "--scrim-high"],
   ["--overlay", "--scrim"]
@@ -3291,7 +3421,7 @@ var tokensCssMigration_2026_09_01_scrimRename = {
   description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
   apply(css) {
     let out = css;
-    for (const [oldName, newName] of RENAMES3) out = renameToken2(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES4) out = renameToken2(out, oldName, newName);
     return out;
   }
 };
@@ -3382,14 +3512,14 @@ var import_node_url = require("url");
 var import_meta = {};
 var PKG_VERSION = (() => {
   try {
-    let dir = import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
+    let dir = import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
     for (let i = 0; i < 4; i++) {
-      const p = import_path4.default.join(dir, "package.json");
-      if (import_fs4.default.existsSync(p)) {
-        const json = JSON.parse(import_fs4.default.readFileSync(p, "utf-8"));
+      const p = import_path5.default.join(dir, "package.json");
+      if (import_fs5.default.existsSync(p)) {
+        const json = JSON.parse(import_fs5.default.readFileSync(p, "utf-8"));
         if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
       }
-      const up = import_path4.default.dirname(dir);
+      const up = import_path5.default.dirname(dir);
       if (up === dir) break;
       dir = up;
     }
@@ -3433,56 +3563,64 @@ function themeFileApi(opts) {
   const COMPONENT_CONFIGS_DIR = dataDirs.componentConfigsDir;
   const THEMES_DIR = dataDirs.themesDir;
   const SKETCH_STYLES_DIR = dataDirs.sketchStylesDir;
-  const CSS_PATH = import_path4.default.resolve(opts.tokensCssPath);
-  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path4.default.resolve(opts.tokensGeneratedCssPath) : import_path4.default.join(dataDirs.dataDir, "tokens.generated.css");
-  const FONTS_CSS_PATH = opts.fontsCssPath ? import_path4.default.resolve(opts.fontsCssPath) : import_path4.default.join(import_path4.default.dirname(CSS_PATH), "fonts.css");
+  const CSS_PATH = import_path5.default.resolve(opts.tokensCssPath);
+  const ISOLATED_DATA_DIR = testDataDir();
+  const GENERATED_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "tokens.generated.css") : opts.tokensGeneratedCssPath ? import_path5.default.resolve(opts.tokensGeneratedCssPath) : import_path5.default.join(dataDirs.dataDir, "tokens.generated.css");
+  const FONTS_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "fonts.css") : opts.fontsCssPath ? import_path5.default.resolve(opts.fontsCssPath) : import_path5.default.join(import_path5.default.dirname(CSS_PATH), "fonts.css");
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
-  const consumerComponentDirs = opts.componentsSrcDir ? [import_path4.default.resolve(opts.componentsSrcDir)] : [import_path4.default.resolve("src/components"), import_path4.default.resolve("src/system/components")];
-  const packageComponentsDir = import_path4.default.resolve(
-    import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
+  const consumerComponentDirs = opts.componentsSrcDir ? [import_path5.default.resolve(opts.componentsSrcDir)] : [import_path5.default.resolve("src/components"), import_path5.default.resolve("src/system/components")];
+  const packageComponentsDir = import_path5.default.resolve(
+    import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
     "..",
     "src",
     "system",
     "components"
   );
-  const packageDataDir = import_path4.default.resolve(
-    import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
+  const packageDataDir = testPackageDataDir() ?? import_path5.default.resolve(
+    import_path5.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
     "..",
     "src",
     "live-tokens",
     "data"
   );
-  const packageColorsAndTypeDir = import_path4.default.join(packageDataDir, "colors-and-type");
-  const packageThemesDir = import_path4.default.join(packageDataDir, "themes");
-  const packageComponentConfigsDir = import_path4.default.join(packageDataDir, "component-configs");
-  const packageSketchStylesDir = import_path4.default.join(packageDataDir, "sketch-styles");
+  const packageColorsAndTypeDir = import_path5.default.join(packageDataDir, "colors-and-type");
+  const packageThemesDir = import_path5.default.join(packageDataDir, "themes");
+  const packageComponentConfigsDir = import_path5.default.join(packageDataDir, "component-configs");
+  const packageSketchStylesDir = import_path5.default.join(packageDataDir, "sketch-styles");
   function shippedNames(dataDir, subdir) {
     try {
-      const pkgRoot = import_path4.default.resolve(dataDir, "..", "..", "..");
-      const pkg = JSON.parse(import_fs4.default.readFileSync(import_path4.default.join(pkgRoot, "package.json"), "utf-8"));
+      const pkgRoot = import_path5.default.resolve(dataDir, "..", "..", "..");
+      const pkg = JSON.parse(import_fs5.default.readFileSync(import_path5.default.join(pkgRoot, "package.json"), "utf-8"));
       const files = Array.isArray(pkg.files) ? pkg.files : [];
       const owned = new RegExp(`^src/live-tokens/data/${subdir}/[^/]+\\.json$`);
-      return files.filter((f) => owned.test(f)).map((f) => import_path4.default.basename(f, ".json"));
+      return files.filter((f) => owned.test(f)).map((f) => import_path5.default.basename(f, ".json"));
     } catch {
       return [];
     }
   }
   const COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
-  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && import_fs4.default.existsSync(packageComponentsDir)) {
+  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && import_fs5.default.existsSync(packageComponentsDir)) {
     COMPONENTS_SCAN_DIRS.push(packageComponentsDir);
   }
+  const isLiveStateFile = (file) => file === import_path5.default.join(THEMES_DIR, "_active.json") || import_path5.default.basename(file) === "_working.json" && (file.startsWith(COLORS_AND_TYPE_DIR + import_path5.default.sep) || file.startsWith(COMPONENT_CONFIGS_DIR + import_path5.default.sep));
+  const liveWatch = dataTreeWatch({
+    dirs: [COLORS_AND_TYPE_DIR, COMPONENT_CONFIGS_DIR, THEMES_DIR],
+    isLive: isLiveStateFile
+  });
   const colorsAndTypeResource = versionedFileResourceServer({
     dir: COLORS_AND_TYPE_DIR,
     packageDir: packageColorsAndTypeDir,
-    packageOwnedNames: shippedNames(packageDataDir, "colors-and-type")
+    packageOwnedNames: shippedNames(packageDataDir, "colors-and-type"),
+    onWrite: liveWatch.noteOwnWrite
   });
   const componentResourceCache = /* @__PURE__ */ new Map();
   function componentResource(comp) {
     let r = componentResourceCache.get(comp);
     if (!r) {
       r = versionedFileResourceServer({
-        dir: import_path4.default.join(COMPONENT_CONFIGS_DIR, comp),
-        packageDir: import_path4.default.join(packageComponentConfigsDir, comp)
+        dir: import_path5.default.join(COMPONENT_CONFIGS_DIR, comp),
+        packageDir: import_path5.default.join(packageComponentConfigsDir, comp),
+        onWrite: liveWatch.noteOwnWrite
       });
       componentResourceCache.set(comp, r);
     }
@@ -3490,7 +3628,8 @@ function themeFileApi(opts) {
   }
   const themesResource = versionedFileResourceServer({
     dir: THEMES_DIR,
-    packageDir: packageThemesDir
+    packageDir: packageThemesDir,
+    onWrite: liveWatch.noteOwnWrite
   });
   const sketchStylesResource = versionedFileResourceServer({
     dir: SKETCH_STYLES_DIR,
@@ -3571,7 +3710,7 @@ function themeFileApi(opts) {
     const productionThemeName = themesResource.getProductionName();
     const productionTheme = readTheme(productionThemeName)?.theme ?? null;
     if (themesResource.existingPath(productionThemeName) !== null && !productionTheme?.colorsAndType) {
-      const tail = `${import_path4.default.basename(GENERATED_CSS_PATH)} was left as it was.`;
+      const tail = `${import_path5.default.basename(GENERATED_CSS_PATH)} was left as it was.`;
       throw new Error(
         unreadableThemeReason(productionThemeName) === "colors-and-type" ? `[live-tokens] ${notAThemeError(productionThemeName)} ${tail}` : `[live-tokens] Production theme "${productionThemeName}" is unreadable, so ${tail} Repair the theme file or adopt another theme.`
       );
@@ -3609,7 +3748,7 @@ function themeFileApi(opts) {
       }
     }
     let componentOverrideCount = 0;
-    if (import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+    if (import_fs5.default.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];
       for (const comp of listComponentNames()) {
         const prodCfg = productionTheme?.componentConfigs[comp];
@@ -3642,12 +3781,12 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
-    if (!import_fs4.default.existsSync(import_path4.default.dirname(GENERATED_CSS_PATH))) {
-      import_fs4.default.mkdirSync(import_path4.default.dirname(GENERATED_CSS_PATH), { recursive: true });
+    if (!import_fs5.default.existsSync(import_path5.default.dirname(GENERATED_CSS_PATH))) {
+      import_fs5.default.mkdirSync(import_path5.default.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    import_fs4.default.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    import_fs5.default.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
     console.log(
-      `[regenerateTokensCss] Wrote ${import_path4.default.basename(GENERATED_CSS_PATH)} (${colorsAndTypeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+      `[regenerateTokensCss] Wrote ${import_path5.default.basename(GENERATED_CSS_PATH)} (${colorsAndTypeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
   function syncFontsToCss(colorsAndTypeData) {
@@ -3675,18 +3814,18 @@ function themeFileApi(opts) {
       lines.push("");
     }
     const content = lines.join("\n");
-    if (!import_fs4.default.existsSync(import_path4.default.dirname(FONTS_CSS_PATH))) {
-      import_fs4.default.mkdirSync(import_path4.default.dirname(FONTS_CSS_PATH), { recursive: true });
+    if (!import_fs5.default.existsSync(import_path5.default.dirname(FONTS_CSS_PATH))) {
+      import_fs5.default.mkdirSync(import_path5.default.dirname(FONTS_CSS_PATH), { recursive: true });
     }
-    import_fs4.default.writeFileSync(FONTS_CSS_PATH, content);
-    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path4.default.basename(FONTS_CSS_PATH)}`);
+    import_fs5.default.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path5.default.basename(FONTS_CSS_PATH)}`);
   }
   function componentNameFromFile(filePath) {
-    return import_path4.default.basename(filePath, ".svelte").toLowerCase();
+    return import_path5.default.basename(filePath, ".svelte").toLowerCase();
   }
   function isThemeAwareComponent(filePath) {
     try {
-      const source = import_fs4.default.readFileSync(filePath, "utf-8");
+      const source = import_fs5.default.readFileSync(filePath, "utf-8");
       return /:global\(:root\)\s*\{/.test(source);
     } catch {
       return false;
@@ -3695,10 +3834,10 @@ function themeFileApi(opts) {
   function listComponentSourcePaths() {
     const byName = /* @__PURE__ */ new Map();
     for (const dir of COMPONENTS_SCAN_DIRS) {
-      if (!import_fs4.default.existsSync(dir)) continue;
-      for (const f of import_fs4.default.readdirSync(dir)) {
+      if (!import_fs5.default.existsSync(dir)) continue;
+      for (const f of import_fs5.default.readdirSync(dir)) {
         if (!f.endsWith(".svelte")) continue;
-        const full = import_path4.default.join(dir, f);
+        const full = import_path5.default.join(dir, f);
         if (!isThemeAwareComponent(full)) continue;
         const name = componentNameFromFile(f);
         if (!byName.has(name)) byName.set(name, full);
@@ -3712,18 +3851,18 @@ function themeFileApi(opts) {
   function warnOnTokenDrift(log) {
     let tokensCss = "";
     try {
-      tokensCss = import_fs4.default.readFileSync(CSS_PATH, "utf-8");
+      tokensCss = import_fs5.default.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     let generatedCss = "";
     try {
-      generatedCss = import_fs4.default.readFileSync(GENERATED_CSS_PATH, "utf-8");
+      generatedCss = import_fs5.default.readFileSync(GENERATED_CSS_PATH, "utf-8");
     } catch {
     }
     const componentSources = listComponentSourcePaths().map((p) => ({
       name: componentNameFromFile(p),
-      source: import_fs4.default.readFileSync(p, "utf-8")
+      source: import_fs5.default.readFileSync(p, "utf-8")
     }));
     const missing = validateTokensCss({ tokensCss, generatedCss, componentSources });
     if (missing.length === 0) return;
@@ -3731,7 +3870,7 @@ function themeFileApi(opts) {
       (m) => `  ${m.token}  (referenced by ${m.referencedBy.join(", ")})`
     );
     log(
-      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${import_path4.default.relative(process.cwd(), CSS_PATH)}:
+      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${import_path5.default.relative(process.cwd(), CSS_PATH)}:
 ${lines.join("\n")}
   These render as blank/empty editor slots. Run \`npx live-tokens migrate\` to reconcile.`
     );
@@ -3739,30 +3878,30 @@ ${lines.join("\n")}
   function autoMigrateAdditive(log) {
     let before = "";
     try {
-      before = import_fs4.default.readFileSync(CSS_PATH, "utf-8");
+      before = import_fs5.default.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     const { css, applied, changed } = runAdditiveTokensCssMigrations(before);
     if (!changed) return;
-    import_fs4.default.writeFileSync(CSS_PATH, css);
+    import_fs5.default.writeFileSync(CSS_PATH, css);
     log(
-      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${import_path4.default.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
+      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${import_path5.default.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
     );
   }
   function generateDefaultConfig(comp, sourcePath) {
-    if (!import_fs4.default.existsSync(sourcePath)) return;
+    if (!import_fs5.default.existsSync(sourcePath)) return;
     const r = componentResource(comp);
     r.ensureDir();
     const defaultPath = r.filePath("default");
-    const sourceStat = import_fs4.default.statSync(sourcePath);
+    const sourceStat = import_fs5.default.statSync(sourcePath);
     let createdAt = (/* @__PURE__ */ new Date()).toISOString();
     let existingUpdatedAt;
     let existingAliases;
     let existingSchemaVersion;
-    if (import_fs4.default.existsSync(defaultPath)) {
+    if (import_fs5.default.existsSync(defaultPath)) {
       try {
-        const existing = JSON.parse(import_fs4.default.readFileSync(defaultPath, "utf-8"));
+        const existing = JSON.parse(import_fs5.default.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") {
@@ -3771,13 +3910,13 @@ ${lines.join("\n")}
         if (typeof existing.schemaVersion === "number") existingSchemaVersion = existing.schemaVersion;
       } catch {
       }
-      const defaultStat = import_fs4.default.statSync(defaultPath);
+      const defaultStat = import_fs5.default.statSync(defaultPath);
       if (defaultStat.mtimeMs >= sourceStat.mtimeMs && existingSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION) {
         return;
       }
     }
     const now = (/* @__PURE__ */ new Date()).toISOString();
-    const source = import_fs4.default.readFileSync(sourcePath, "utf-8");
+    const source = import_fs5.default.readFileSync(sourcePath, "utf-8");
     const body = extractGlobalRootBody(source);
     const aliases = extractAliasDeclarations(body);
     const aliasesUnchanged = existingAliases !== void 0 && JSON.stringify(existingAliases) === JSON.stringify(aliases);
@@ -3792,14 +3931,14 @@ ${lines.join("\n")}
     };
     if (aliasesUnchanged && schemaStampCurrent && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
-      import_fs4.default.utimesSync(defaultPath, t, t);
+      import_fs5.default.utimesSync(defaultPath, t, t);
       return;
     }
-    import_fs4.default.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+    import_fs5.default.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
   }
   function ensureComponentConfigsDir() {
-    if (!import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
-      import_fs4.default.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
+    if (!import_fs5.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+      import_fs5.default.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
     }
     for (const sourcePath of listComponentSourcePaths()) {
       const comp = componentNameFromFile(sourcePath);
@@ -3812,14 +3951,14 @@ ${lines.join("\n")}
     const legacy = [];
     const check = (dir) => {
       for (const name of ["_active.json", "_production.json"]) {
-        const p = import_path4.default.join(dir, name);
-        if (import_fs4.default.existsSync(p)) legacy.push(import_path4.default.relative(process.cwd(), p));
+        const p = import_path5.default.join(dir, name);
+        if (import_fs5.default.existsSync(p)) legacy.push(import_path5.default.relative(process.cwd(), p));
       }
     };
     check(COLORS_AND_TYPE_DIR);
-    if (import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
-      for (const entry of import_fs4.default.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
-        if (entry.isDirectory()) check(import_path4.default.join(COMPONENT_CONFIGS_DIR, entry.name));
+    if (import_fs5.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+      for (const entry of import_fs5.default.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
+        if (entry.isDirectory()) check(import_path5.default.join(COMPONENT_CONFIGS_DIR, entry.name));
       }
     }
     return legacy;
@@ -3827,19 +3966,19 @@ ${lines.join("\n")}
   function warnOnLegacyPointers(legacy, bakeHeld, warn) {
     if (legacy.length === 0) return;
     warn(
-      `[live-tokens] ${legacy.length} legacy pointer file(s) left from the pre-working-set data model, starting with ${legacy[0]}. They are no longer read. Run \`npx live-tokens migrate\` to heal the tree.` + (bakeHeld ? ` Until then this tree has named no production theme, so ${import_path4.default.basename(GENERATED_CSS_PATH)} is left exactly as it is rather than rebuilt from the default.` : "")
+      `[live-tokens] ${legacy.length} legacy pointer file(s) left from the pre-working-set data model, starting with ${legacy[0]}. They are no longer read. Run \`npx live-tokens migrate\` to heal the tree.` + (bakeHeld ? ` Until then this tree has named no production theme, so ${import_path5.default.basename(GENERATED_CSS_PATH)} is left exactly as it is rather than rebuilt from the default.` : "")
     );
   }
   function warnOnLegacyLayout(evidence, warn) {
     warn(
-      `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-theme theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${import_path4.default.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
+      `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-theme theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${import_path5.default.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
     );
   }
   function warnOnUnmigratedSketchStyles(warn) {
-    const legacyDir = import_path4.default.join(dataDirs.dataDir, "sketch-presets");
-    if (!import_fs4.default.existsSync(legacyDir)) return;
+    const legacyDir = import_path5.default.join(dataDirs.dataDir, "sketch-presets");
+    if (!import_fs5.default.existsSync(legacyDir)) return;
     warn(
-      `[live-tokens] Saved sketchstyles still live under the retired ${import_path4.default.basename(legacyDir)}/ directory name. Run \`npx live-tokens migrate\` to rename it to ${import_path4.default.basename(SKETCH_STYLES_DIR)}/; until then they will not show up in the Sketchstyle view.`
+      `[live-tokens] Saved sketchstyles still live under the retired ${import_path5.default.basename(legacyDir)}/ directory name. Run \`npx live-tokens migrate\` to rename it to ${import_path5.default.basename(SKETCH_STYLES_DIR)}/; until then they will not show up in the Sketchstyle view.`
     );
   }
   const diskThemeResolvers = {
@@ -3863,7 +4002,7 @@ ${lines.join("\n")}
     const resolved = themesResource.existingPath(fileName);
     if (resolved === null) return "missing";
     try {
-      if (isColorsAndTypeShaped(JSON.parse(import_fs4.default.readFileSync(resolved, "utf-8")))) {
+      if (isColorsAndTypeShaped(JSON.parse(import_fs5.default.readFileSync(resolved, "utf-8")))) {
         return "colors-and-type";
       }
     } catch {
@@ -3871,7 +4010,7 @@ ${lines.join("\n")}
     return "corrupt";
   }
   function notAThemeError(fileName) {
-    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme skill "create-theme".`;
+    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path5.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme skill "create-theme".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -3890,18 +4029,18 @@ ${lines.join("\n")}
   }
   function writeTheme(fileName, theme) {
     themesResource.ensureDir();
-    import_fs4.default.writeFileSync(themesResource.filePath(fileName), JSON.stringify(theme, null, 2));
+    import_fs5.default.writeFileSync(themesResource.filePath(fileName), JSON.stringify(theme, null, 2));
   }
   function migrateLocalThemes(warn) {
-    if (import_path4.default.resolve(THEMES_DIR) === import_path4.default.resolve(packageThemesDir)) return;
-    if (!import_fs4.default.existsSync(THEMES_DIR)) return;
-    for (const file of import_fs4.default.readdirSync(THEMES_DIR)) {
+    if (import_path5.default.resolve(THEMES_DIR) === import_path5.default.resolve(packageThemesDir)) return;
+    if (!import_fs5.default.existsSync(THEMES_DIR)) return;
+    for (const file of import_fs5.default.readdirSync(THEMES_DIR)) {
       if (!file.endsWith(".json") || file.startsWith("_")) continue;
       const fileName = file.slice(0, -".json".length);
       if (fileName === "default") continue;
       let raw;
       try {
-        raw = JSON.parse(import_fs4.default.readFileSync(import_path4.default.join(THEMES_DIR, file), "utf-8"));
+        raw = JSON.parse(import_fs5.default.readFileSync(import_path5.default.join(THEMES_DIR, file), "utf-8"));
       } catch {
         continue;
       }
@@ -3922,7 +4061,7 @@ ${lines.join("\n")}
   function ensureDefaultTheme(warn) {
     let existing = null;
     try {
-      existing = JSON.parse(import_fs4.default.readFileSync(themesResource.filePath("default"), "utf-8"));
+      existing = JSON.parse(import_fs5.default.readFileSync(themesResource.filePath("default"), "utf-8"));
     } catch {
     }
     if (isColorsAndTypeShaped(existing)) {
@@ -3959,9 +4098,9 @@ ${lines.join("\n")}
     themesResource.ensureDir();
     ensureDefaultTheme(warn);
     migrateLocalThemes(warn);
-    const productionPointerHeld = !import_fs4.default.existsSync(themesResource.productionPath) && listLegacyPointers().length > 0;
+    const productionPointerHeld = !import_fs5.default.existsSync(themesResource.productionPath) && listLegacyPointers().length > 0;
     if (productionPointerHeld) {
-      if (!import_fs4.default.existsSync(themesResource.activePath)) themesResource.setActiveName("default");
+      if (!import_fs5.default.existsSync(themesResource.activePath)) themesResource.setActiveName("default");
     } else {
       themesResource.ensureMeta();
     }
@@ -4040,8 +4179,8 @@ ${lines.join("\n")}
   }
   function clearAllWorking() {
     colorsAndTypeResource.clearWorking();
-    if (!import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) return;
-    for (const entry of import_fs4.default.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
+    if (!import_fs5.default.existsSync(COMPONENT_CONFIGS_DIR)) return;
+    for (const entry of import_fs5.default.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
       if (entry.isDirectory()) componentResource(entry.name).clearWorking();
     }
   }
@@ -4084,6 +4223,7 @@ ${lines.join("\n")}
   const SKETCH_STYLES_ROUTE = `${API_BASE}/sketch-styles`;
   const SKETCH_STYLE_BY_NAME_REGEX = new RegExp(`^${escapedBase}/sketch-styles/([a-z0-9\\-_]+)$`);
   const PRODUCTION_ROUTE = `${API_BASE}/production`;
+  const EVENTS_ROUTE = `${API_BASE}/events`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
       const data = colorsAndTypeResource.readJson(fileName);
@@ -4168,15 +4308,15 @@ ${lines.join("\n")}
       }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (import_fs4.default.existsSync(filePath)) {
+      if (import_fs5.default.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(import_fs4.default.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(import_fs5.default.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      import_fs4.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      import_fs5.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
@@ -4185,8 +4325,8 @@ ${lines.join("\n")}
         jsonResponse(res, 403, { error: "Cannot delete the default colors and type" });
         return;
       }
-      if (import_fs4.default.existsSync(filePath)) {
-        import_fs4.default.unlinkSync(filePath);
+      if (import_fs5.default.existsSync(filePath)) {
+        import_fs5.default.unlinkSync(filePath);
       } else if (colorsAndTypeResource.existingPath(fileName)) {
         jsonResponse(res, 403, {
           error: "Cannot delete colors and type shipped with the package. Saving it creates a local copy; deleting that copy restores the shipped version.",
@@ -4273,16 +4413,16 @@ ${lines.join("\n")}
       body.component = comp;
       body.name = body.name || name;
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (import_fs4.default.existsSync(configPath)) {
+      if (import_fs5.default.existsSync(configPath)) {
         try {
-          const existing = JSON.parse(import_fs4.default.readFileSync(configPath, "utf-8"));
+          const existing = JSON.parse(import_fs5.default.readFileSync(configPath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       r.ensureDir();
-      import_fs4.default.writeFileSync(configPath, JSON.stringify(body, null, 2));
+      import_fs5.default.writeFileSync(configPath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName: name });
       return;
     }
@@ -4291,7 +4431,7 @@ ${lines.join("\n")}
         jsonResponse(res, 403, { error: "Cannot delete default config" });
         return;
       }
-      if (import_fs4.default.existsSync(configPath)) import_fs4.default.unlinkSync(configPath);
+      if (import_fs5.default.existsSync(configPath)) import_fs5.default.unlinkSync(configPath);
       jsonResponse(res, 200, { ok: true });
       return;
     }
@@ -4299,7 +4439,7 @@ ${lines.join("\n")}
   async function handleListComponentConfigs({ params, res }) {
     const [comp] = params;
     const r = componentResource(comp);
-    if (!import_fs4.default.existsSync(r.dir)) {
+    if (!import_fs5.default.existsSync(r.dir)) {
       jsonResponse(res, 404, { error: "Component not found" });
       return;
     }
@@ -4387,9 +4527,9 @@ ${lines.join("\n")}
       const body = JSON.parse(await readBody(req));
       const { theme } = normalizeTheme(body, diskThemeResolvers);
       theme.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (import_fs4.default.existsSync(filePath)) {
+      if (import_fs5.default.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(import_fs4.default.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(import_fs5.default.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) theme.createdAt = existing.createdAt;
         } catch {
         }
@@ -4411,7 +4551,7 @@ ${lines.join("\n")}
         });
         return;
       }
-      if (import_fs4.default.existsSync(filePath)) {
+      if (import_fs5.default.existsSync(filePath)) {
         const deletingActive = themesResource.getActiveName() === fileName;
         const liveColors = deletingActive ? resolveLiveColorsAndType(activeTheme()) : null;
         const liveComponents = {};
@@ -4421,7 +4561,7 @@ ${lines.join("\n")}
             if (resolved) liveComponents[comp] = resolved.data;
           }
         }
-        import_fs4.default.unlinkSync(filePath);
+        import_fs5.default.unlinkSync(filePath);
         if (themesResource.existingPath(fileName) === null && deletingActive) {
           themesResource.setActiveName("default");
         }
@@ -4468,30 +4608,50 @@ ${lines.join("\n")}
       return;
     }
     clearAllWorking();
-    const knownComponents = listComponentNames();
     themesResource.setActiveName(fileName);
-    const resolvedConfigs = {};
-    for (const comp of knownComponents) {
-      const resolved = resolveLiveComponentConfig(comp, theme);
-      if (resolved) resolvedConfigs[comp] = { ...resolved.data, _fileName: fileName, _source: resolved.source };
-    }
-    const resolvedColorsAndType = resolveLiveColorsAndType(theme);
+    const knownComponents = listComponentNames();
     const skippedComponents = Object.keys(theme.componentConfigs).filter(
       (comp) => !knownComponents.includes(comp)
     );
     jsonResponse(res, 200, {
       ok: true,
-      theme: { ...theme, _fileName: fileName },
-      colorsAndType: resolvedColorsAndType && {
-        ...resolvedColorsAndType.data,
-        _fileName: fileName,
-        _source: resolvedColorsAndType.source
-      },
-      componentConfigs: resolvedConfigs,
+      ...resolveLiveState(theme, fileName),
       skippedComponents,
       filled
     });
   }
+  function resolveLiveState(theme, fileName) {
+    const componentConfigs = {};
+    for (const comp of listComponentNames()) {
+      const resolved = resolveLiveComponentConfig(comp, theme);
+      if (resolved) componentConfigs[comp] = { ...resolved.data, _fileName: fileName, _source: resolved.source };
+    }
+    const colorsAndType = resolveLiveColorsAndType(theme);
+    return {
+      fileName,
+      theme: { ...theme, _fileName: fileName },
+      colorsAndType: colorsAndType && { ...colorsAndType.data, _fileName: fileName, _source: colorsAndType.source },
+      componentConfigs
+    };
+  }
+  async function handleEvents({ req, res }) {
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache");
+    res.setHeader("Connection", "keep-alive");
+    res.write(": connected\n\n");
+    const unsubscribe = liveWatch.subscribe(() => {
+      const activeFile = themesResource.getActiveName();
+      const read = readTheme(activeFile);
+      if (!read) return;
+      const state = resolveLiveState(read.theme, activeFile);
+      res.write(`event: live-state
+data: ${JSON.stringify(state)}
+
+`);
+    });
+    req.on("close", unsubscribe);
+  }
   async function handleExportTheme({ params, res }) {
     const [fileName] = params;
     if (rejectReservedName(res, fileName)) return;
@@ -4652,22 +4812,22 @@ ${lines.join("\n")}
       }
       body.name = String(body.name || fileName);
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (import_fs4.default.existsSync(filePath)) {
+      if (import_fs5.default.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(import_fs4.default.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(import_fs5.default.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       sketchStylesResource.ensureDir();
-      import_fs4.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      import_fs5.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
     if (req.method === "DELETE") {
-      if (import_fs4.default.existsSync(filePath)) {
-        import_fs4.default.unlinkSync(filePath);
+      if (import_fs5.default.existsSync(filePath)) {
+        import_fs5.default.unlinkSync(filePath);
       } else if (sketchStylesResource.existingPath(fileName)) {
         jsonResponse(res, 403, {
           error: "Cannot delete a sketchstyle shipped with the package. Saving it creates a local copy; deleting that copy restores the shipped version.",
@@ -4763,12 +4923,13 @@ ${lines.join("\n")}
     { method: "PUT", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "DELETE", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "POST", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: methodNotAllowed },
+    { method: "GET", pattern: EVENTS_ROUTE, handler: handleEvents },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "DELETE", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed }
   ];
-  const isEditorOwnedJson = (file) => file.endsWith(".json") && import_path4.default.resolve(file).startsWith(dataDirs.dataDir + import_path4.default.sep);
+  const isEditorOwnedJson = (file) => file.endsWith(".json") && import_path5.default.resolve(file).startsWith(dataDirs.dataDir + import_path5.default.sep);
   return {
     name: "theme-file-api",
     config() {
@@ -4796,8 +4957,10 @@ ${lines.join("\n")}
         const { productionPointerHeld } = ensureThemesDir((msg) => server.config.logger.warn(msg));
         const openTheme = activeTheme();
         if (openTheme) pruneMatchingWorking(openTheme);
-        if (!productionPointerHeld || !import_fs4.default.existsSync(GENERATED_CSS_PATH)) regenerateTokensCss();
-        if (opts.autoMigrate) autoMigrateAdditive((msg) => server.config.logger.info(msg));
+        if (!productionPointerHeld || !import_fs5.default.existsSync(GENERATED_CSS_PATH)) regenerateTokensCss();
+        if (opts.autoMigrate && !ISOLATED_DATA_DIR) {
+          autoMigrateAdditive((msg) => server.config.logger.info(msg));
+        }
         warnOnTokenDrift((msg) => server.config.logger.warn(msg));
         warnOnLegacyPointers(
           listLegacyPointers(),
@@ -4820,7 +4983,7 @@ ${lines.join("\n")}
     },
     handleHotUpdate(ctx) {
       if (legacyLayout) return;
-      const normalized = import_path4.default.resolve(ctx.file);
+      const normalized = import_path5.default.resolve(ctx.file);
       if (!COMPONENTS_SCAN_DIRS.some((d) => normalized.startsWith(d))) return;
       if (!normalized.endsWith(".svelte")) return;
       if (!isThemeAwareComponent(normalized)) return;