@motion-proto/live-tokens 0.74.0 → 0.76.0

package/src/editor/pages/ComponentEditorPage.svelte

@@ -8,7 +8,9 @@
   import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
   import { selectedComponent } from '../core/store/editorViewStore';
-  import { componentDirty } from '../core/store/editorStore';
+  import { componentDirty, editorState, mutate } from '../core/store/editorStore';
+  import { setSketch } from '../core/sketch';
+  import type { LiveTokensEditorHandle } from './liveTokensEditorHandle';
   // Editor chrome + form controls + icon font must be JS imports (not @import
   // inside the style block) so Vite resolves them via the module graph
   // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
@@ -77,6 +79,19 @@
   onMount(async () => {
     document.addEventListener('click', handleDocClick, true);
     window.addEventListener('keydown', handleKeydown);
+    // This route renders top-level (no overlay iframe), so the handle lives
+    // directly on the page's own window — a contract suite reads it without
+    // crossing a frame boundary.
+    if (import.meta.env.DEV) {
+      const handle: LiveTokensEditorHandle = {
+        editorState,
+        mutate,
+        getComponentRegistryEntries,
+        selectComponent: (id) => selectedComponent.set(id),
+        setSketch,
+      };
+      window.__liveTokensEditor = handle;
+    }
     try {
       const summaries = await listComponents();
       validateRegistryAgainstServerScan(summaries.map((s) => s.name));
@@ -89,6 +104,7 @@
   onDestroy(() => {
     document.removeEventListener('click', handleDocClick, true);
     window.removeEventListener('keydown', handleKeydown);
+    if (import.meta.env.DEV) delete window.__liveTokensEditor;
   });
 
   const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));

package/src/editor/pages/liveTokensEditorHandle.ts

@@ -0,0 +1,23 @@
+import type { Readable } from 'svelte/store';
+import type { RegistryEntry } from '../component-editor/registry';
+import type { EditorState } from '../core/store/editorTypes';
+
+/**
+ * The components route's dev-only window handle. It lives beside the page that
+ * publishes it, not in the test tree, so the page typechecks from its own
+ * source: `src/testing` ships in the tarball but a consumer runs `svelte-check`
+ * over the page without it.
+ */
+export interface LiveTokensEditorHandle {
+  editorState: Readable<EditorState>;
+  mutate: (label: string, fn: (draft: EditorState) => void) => void;
+  getComponentRegistryEntries: () => ReadonlyArray<RegistryEntry>;
+  selectComponent: (id: string) => void;
+  setSketch: (id: string | null) => void;
+}
+
+declare global {
+  interface Window {
+    __liveTokensEditor?: LiveTokensEditorHandle;
+  }
+}