@motion-proto/live-tokens 0.12.1 → 0.13.1

package/dist-plugin/index.cjs

@@ -632,7 +632,7 @@ function themeFileApi(opts) {
   const COMPONENT_CONFIGS_DIR = dataDirs.componentConfigsDir;
   const MANIFESTS_DIR = dataDirs.manifestsDir;
   const CSS_PATH = import_path3.default.resolve(opts.tokensCssPath);
-  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path3.default.resolve(opts.tokensGeneratedCssPath) : import_path3.default.join(import_path3.default.dirname(CSS_PATH), "tokens.generated.css");
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path3.default.resolve(opts.tokensGeneratedCssPath) : import_path3.default.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = opts.fontsCssPath ? import_path3.default.resolve(opts.fontsCssPath) : import_path3.default.join(import_path3.default.dirname(CSS_PATH), "fonts.css");
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
   const COMPONENTS_SRC_DIR = opts.componentsSrcDir ? import_path3.default.resolve(opts.componentsSrcDir) : import_path3.default.resolve("src/system/components");

package/dist-plugin/index.js

@@ -595,7 +595,7 @@ function themeFileApi(opts) {
   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 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 API_BASE = opts.apiBase ?? "/api/live-tokens";
   const COMPONENTS_SRC_DIR = opts.componentsSrcDir ? path3.resolve(opts.componentsSrcDir) : path3.resolve("src/system/components");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
@@ -22,6 +22,7 @@
     "src/editor",
     "src/system",
     "src/app/site.css",
+    "src/live-tokens/data/tokens.generated.css",
     "dist-plugin",
     ".claude/skills",
     "bin",
@@ -71,7 +72,7 @@
     },
     "./styles/ui-editor.css": "./src/editor/styles/ui-editor.css",
     "./app/tokens.css": "./src/system/styles/tokens.css",
-    "./app/tokens.generated.css": "./src/system/styles/tokens.generated.css",
+    "./app/tokens.generated.css": "./src/live-tokens/data/tokens.generated.css",
     "./app/site.css": "./src/app/site.css",
     "./app/fonts.css": "./src/system/styles/fonts.css"
   },

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -63,11 +63,20 @@
   });
 
   // The /components route renders the same component-editor surface as the
-  // overlay's components view. Pair them: when the page is /components, flip
-  // the overlay to tokens so the two surfaces don't stack.
+  // overlay's components view. Pair them: on entering /components, flip the
+  // overlay to tokens so the two surfaces don't stack. Fires only on route
+  // change, not on every editorView change — otherwise cross-window storage
+  // sync re-triggers the rule, which writes editorView, which fires another
+  // storage event, which fires the rule again. The result is heavy re-render
+  // cascades (the storage handler regularly took >1s in practice) and a
+  // visible flicker as the view bounces.
+  let prevRoute: string | undefined;
   run(() => {
-    if ($route === '/components' && $editorView === 'components') {
-      editorView.set('tokens');
+    const r = $route;
+    if (r === prevRoute) return;
+    prevRoute = r;
+    if (r === '/components') {
+      editorView.update((v) => (v === 'components' ? 'tokens' : v));
     }
   });