@motion-proto/live-tokens 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
   "keywords": ["svelte", "vite", "design-tokens", "css-variables", "editor"],
@@ -65,22 +65,24 @@
     "prepublishOnly": "npm run build:lib"
   },
   "peerDependencies": {
+    "sass": "^1.0",
     "svelte": "^4.2",
+    "svelte-preprocess": "^6.0",
     "vite": "^5.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
+    "sass": "^1.98.0",
     "svelte": "^4.2.20",
     "svelte-check": "^3.8.6",
+    "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
     "vite": "^5.4.21"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^7.2.0",
-    "sass": "^1.98.0",
-    "svelte-preprocess": "^6.0.3"
+    "@fortawesome/fontawesome-free": "^7.2.0"
   }
 }

package/src/lib/LiveEditorOverlay.svelte

@@ -1,19 +1,21 @@
+<script lang="ts" context="module">
+  export type NavLink = { path: string; label: string; icon?: string };
+</script>
+
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { route, navigate } from '../router';
-  import { resolvePageSource } from './pageSource';
+  import { route, navigate } from './router';
   import { columnsVisible, toggleColumns } from './columnsOverlay';
   import { storageKey } from './editorConfig';
 
-  const projectRoot = __PROJECT_ROOT__;
-
-  $: sourceFile = resolvePageSource($route);
-
-  // `open` controls the editor's visible state. The overlay chrome itself
-  // is always rendered (in dev, on non-admin pages):
-  //   open === true   → full panel (docked or floating) with the iframe
-  //   open === false  → just the header bar pinned to top-right
   export let open: boolean = false;
+  export let editorPath: string = '/admin';
+  export let navLinks: NavLink[] = [];
+  export let pageSources: Record<string, string> = {};
+  export let projectRoot: string =
+    typeof __PROJECT_ROOT__ !== 'undefined' ? __PROJECT_ROOT__ : '';
+
+  $: sourceFile = pageSources[$route];
 
   // Mount the iframe the first time the editor is shown, then keep it mounted
   // across hide/show cycles so editor state (unsaved slider values, scroll
@@ -228,16 +230,18 @@
       <div class="spacer"></div>
     {/if}
 
-    {#if open}
+    {#if open && navLinks.length > 0}
       <div class="preview-nav">
-        <button class="hdr-btn nav" class:active={$route === '/'} on:click={() => navigate('/')}>
-          <i class="fas fa-home"></i>
-          <span>Site</span>
-        </button>
-        <button class="hdr-btn nav" class:active={$route === '/components'} on:click={() => navigate('/components')}>
-          <i class="fas fa-puzzle-piece"></i>
-          <span>Components</span>
-        </button>
+        {#each navLinks as link (link.path)}
+          <button
+            class="hdr-btn nav"
+            class:active={$route === link.path}
+            on:click={() => navigate(link.path)}
+          >
+            {#if link.icon}<i class="fas {link.icon}"></i>{/if}
+            <span>{link.label}</span>
+          </button>
+        {/each}
       </div>
     {/if}
 
@@ -260,7 +264,7 @@
       </button>
     {/if}
 
-    {#if sourceFile}
+    {#if sourceFile && projectRoot}
       <a
         class="hdr-btn text source"
         href="vscode://file/{projectRoot}/{sourceFile}"
@@ -275,7 +279,7 @@
   {#if hasBeenOpen}
     <div class="frame-wrap">
       <iframe
-        src="/admin"
+        src={editorPath}
         title="Design editor"
         class="editor-frame"
       ></iframe>

package/src/lib/index.ts

@@ -1,4 +1,5 @@
 export { default as LiveEditorOverlay } from './LiveEditorOverlay.svelte';
+export type { NavLink } from './LiveEditorOverlay.svelte';
 export { default as ColumnsOverlay } from './ColumnsOverlay.svelte';
 
 export { columnsVisible, toggleColumns } from './columnsOverlay';
@@ -47,5 +48,3 @@ export { hexToOklch, oklchToHex, gamutClamp } from './oklch';
 export type { Oklch } from './oklch';
 
 export { initializeTokens } from './tokenInit';
-
-export { resolvePageSource } from './pageSource';

package/src/lib/router.ts

@@ -0,0 +1,17 @@
+import { writable } from 'svelte/store';
+
+export const route = writable(window.location.pathname || '/');
+
+export function navigate(path: string) {
+  const [pathname] = path.split('#');
+  history.pushState(null, '', path);
+  route.set(pathname);
+  window.dispatchEvent(new PopStateEvent('popstate'));
+  if (!path.includes('#')) {
+    window.scrollTo(0, 0);
+  }
+}
+
+window.addEventListener('popstate', () => {
+  route.set(window.location.pathname || '/');
+});

package/src/pages/ShowcasePage.svelte

@@ -55,8 +55,6 @@
 
 <style>
   @import '../showcase/editor.css';
-  @import '../styles/variables.css';
-
   .components-shell {
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr);

package/src/showcase/ComponentsTab.svelte

@@ -52,8 +52,6 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .components-container {
     display: flex;
     flex-direction: column;

package/src/showcase/SurfacesTab.svelte

@@ -259,8 +259,6 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .surfaces-container {
     display: flex;
     flex-direction: column;

package/src/showcase/TextTab.svelte

@@ -112,8 +112,6 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .text-container {
     display: flex;
     flex-direction: column;

package/src/showcase/VariablesTab.svelte

@@ -1705,8 +1705,6 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .variables-container {
     display: flex;
     flex-direction: column;

package/src/showcase/VisualsTab.svelte

@@ -122,8 +122,6 @@
 </div>
 
 <style>
-  @import '../styles/variables.css';
-
   .layout {
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr);

package/src/showcase/demos/BadgeDemo.svelte

@@ -42,8 +42,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .trait-demo-row {
     display: flex;
     gap: var(--space-8);

package/src/showcase/demos/CardDemo.svelte

@@ -42,8 +42,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .card-demo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

package/src/showcase/demos/ChoiceButtonsDemo.svelte

@@ -90,8 +90,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .choice-buttons-container {
     display: flex;
     flex-wrap: wrap;

package/src/showcase/demos/CollapsibleSectionDemo.svelte

@@ -40,8 +40,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .collapsible-demo-wrapper {
     border: 1px solid var(--ui-border-subtle);
     border-radius: var(--radius-md);

package/src/showcase/demos/InlineEditActionsDemo.svelte

@@ -17,8 +17,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .inline-edit-demo-row {
     display: flex;
     align-items: center;

package/src/showcase/demos/NotificationDemo.svelte

@@ -133,8 +133,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .notification-showcase {
     display: flex;
     flex-direction: column;

package/src/showcase/demos/ProgressBarDemo.svelte

@@ -39,8 +39,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .progress-demo-stack {
     display: flex;
     flex-direction: column;

package/src/showcase/demos/RadioButtonDemo.svelte

@@ -48,8 +48,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .radio-demo-row {
     display: flex;
     gap: var(--space-16);

package/src/showcase/demos/SectionDividerDemo.svelte

@@ -54,8 +54,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .divider-showcase {
     display: flex;
     flex-direction: column;

package/src/showcase/demos/StandardButtonsDemo.svelte

@@ -339,8 +339,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .variant-group {
     padding: var(--space-16);
     background: var(--ui-surface-low);

package/src/showcase/demos/TabBarDemo.svelte

@@ -47,8 +47,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .tab-content-demo {
     padding: var(--space-16);
     color: var(--ui-text-secondary);

package/src/showcase/demos/TooltipDemo.svelte

@@ -36,8 +36,6 @@
 </div>
 
 <style>
-  @import '../../styles/variables.css';
-
   .tooltip-demo-row {
     display: flex;
     gap: var(--space-24);

package/src/lib/pageSource.ts

@@ -1,6 +0,0 @@
-export function resolvePageSource(route: string): string | undefined {
-  if (route === '/') return 'src/pages/Landing.svelte';
-  if (route === '/components') return 'src/pages/ShowcasePage.svelte';
-  if (route === '/admin') return 'src/pages/Admin.svelte';
-  return undefined;
-}