@motion-proto/live-tokens 0.12.0 → 0.13.0

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.0",
+  "version": "0.13.0",
   "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

@@ -15,6 +15,7 @@
   import { fade } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
   import { route, navigate } from '../core/routing/router';
+  import { editorView } from '../core/store/editorViewStore';
   import { columnsVisible, toggleColumns } from './columnsOverlay';
   import { storageKey } from '../core/store/editorConfig';
   import { overlayOpen } from './overlayState';
@@ -61,6 +62,15 @@
     overlayOpen.set(!!open);
   });
 
+  // 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.
+  run(() => {
+    if ($route === '/components' && $editorView === 'components') {
+      editorView.set('tokens');
+    }
+  });
+
   // Editor route has its own chrome — hide overlay there.
   let onEditorPath = $derived($route === editorPath);
   let sourceFile = $derived(pageSources[$route]);