@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/lib/tokenRegistry.ts

@@ -0,0 +1,148 @@
+/**
+ * Static registry of CSS custom-property declarations.
+ *
+ * Layer-1 design tokens live in tokens.css (the single source of truth for
+ * shared primitives). Layer-2 component tokens live inside each component's
+ * `<style>` block as `:global(:root) { ... }` declarations — owned by the
+ * component that uses them.
+ *
+ * Token-picking UIs need to recover the semantic identity of an arbitrary
+ * variable — e.g. to display "info text / primary" rather than a raw hex. For
+ * alias variables we must follow the `var(--x)` chain from the declaration to
+ * find the underlying token whose *name* the selector can parse.
+ *
+ * This module parses both sources at import time (tokens.css via Vite's
+ * ?raw loader, component files via import.meta.glob) and exposes helpers that
+ * walk those aliases. The pure `buildTokenRegistry` and `extractGlobalRootBody`
+ * helpers are also exported so tests can construct a registry from fs-loaded
+ * files (Vitest's default CSS plugin swallows `?raw` imports for .css files).
+ */
+
+import { derived, type Readable } from 'svelte/store';
+import tokensCss from '../styles/tokens.css?raw';
+import { editorState } from './editorStore';
+import type { EditorState } from './editorTypes';
+import { extractGlobalRootBody } from './parsers/globalRootBlock';
+
+// Re-exported for tests and downstream consumers that previously imported it
+// from this module. The canonical implementation lives in `./parsers/globalRootBlock`
+// so the dev-server vite plugin can share it.
+export { extractGlobalRootBody };
+
+const componentSources = import.meta.glob('../components/*.svelte', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>;
+
+export interface TokenRegistry {
+  getDeclaredValue(varName: string): string | null;
+  resolveAliasChain(varName: string): string[];
+}
+
+/**
+ * Pure constructor: parses a CSS source string (possibly concatenated from
+ * multiple files) and returns a registry bound to that snapshot.
+ */
+export function buildTokenRegistry(cssText: string): TokenRegistry {
+  const declarations = new Map<string, string>();
+  const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(cssText)) !== null) {
+    declarations.set(m[1], m[2].trim());
+  }
+
+  function resolveAliasChain(varName: string): string[] {
+    const chain = [varName];
+    const visited = new Set<string>([varName]);
+    let current = varName;
+    while (true) {
+      const decl = declarations.get(current);
+      if (!decl) return chain;
+      const aliasMatch = decl.match(/var\((--[a-z0-9-]+)\)/i);
+      if (!aliasMatch) return chain;
+      const next = aliasMatch[1];
+      if (visited.has(next)) return chain;
+      visited.add(next);
+      chain.push(next);
+      current = next;
+    }
+  }
+
+  return {
+    getDeclaredValue: (v) => declarations.get(v) ?? null,
+    resolveAliasChain,
+  };
+}
+
+const componentTokenCss = Object.values(componentSources)
+  .map(extractGlobalRootBody)
+  .join('\n');
+
+const defaultRegistry = buildTokenRegistry(tokensCss + '\n' + componentTokenCss);
+
+/** Raw declared value from tokens.css, or null if not declared. */
+export const getDeclaredValue = defaultRegistry.getDeclaredValue;
+
+/**
+ * Walk the alias chain starting at `varName`, returning each successive
+ * variable reference (including the starting one). Stops when a declaration is
+ * a literal value (e.g. hex) or when the next link is absent from the
+ * registry. Guards against cycles.
+ *
+ * Example: `--notification-info-title` → `--text-info` → stops (literal hex).
+ * Returns `['--notification-info-title', '--text-info']`.
+ *
+ * This is a static snapshot: it only sees declarations from tokens.css + the
+ * baked-in `:global(:root)` blocks at module load. For state-aware resolution
+ * that includes live component-alias edits, subscribe to `tokenRegistry$`.
+ */
+export const resolveAliasChain = defaultRegistry.resolveAliasChain;
+
+/**
+ * Build a registry that layers live component-alias overrides on top of the
+ * static base. Cheap enough to rebuild per editorState tick — components
+ * count is small and the alias walk is lazy.
+ */
+function buildOverlayRegistry(
+  base: TokenRegistry,
+  components: EditorState['components'],
+): TokenRegistry {
+  const overrides = new Map<string, string>();
+  for (const slice of Object.values(components)) {
+    for (const [varName, ref] of Object.entries(slice.aliases)) {
+      overrides.set(varName, ref.kind === 'token' ? `var(${ref.name})` : ref.value);
+    }
+  }
+  const getDeclared = (v: string): string | null =>
+    overrides.has(v) ? overrides.get(v)! : base.getDeclaredValue(v);
+  return {
+    getDeclaredValue: getDeclared,
+    resolveAliasChain(varName: string): string[] {
+      const chain = [varName];
+      const visited = new Set<string>([varName]);
+      let current = varName;
+      while (true) {
+        const decl = getDeclared(current);
+        if (!decl) return chain;
+        const aliasMatch = decl.match(/var\((--[a-z0-9-]+)\)/i);
+        if (!aliasMatch) return chain;
+        const next = aliasMatch[1];
+        if (visited.has(next)) return chain;
+        visited.add(next);
+        chain.push(next);
+        current = next;
+      }
+    },
+  };
+}
+
+/**
+ * State-aware token registry: overlays live `state.components[*].aliases`
+ * on top of the static base registry. Consume with `$tokenRegistry$` in
+ * Svelte components when the UI needs to reflect in-flight alias edits
+ * (e.g. selectors displaying the currently-selected semantic token).
+ */
+export const tokenRegistry$: Readable<TokenRegistry> = derived(editorState, ($state) =>
+  buildOverlayRegistry(defaultRegistry, $state.components),
+);

package/src/pages/ComponentEditorPage.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
+  import PresetFileManager from '../ui/PresetFileManager.svelte';
+  import { navigate } from '../lib/router';
+  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { listComponents } from '../lib/componentConfigService';
+  import { selectedComponent } from '../lib/editorViewStore';
+
+  let drawerOpen = true;
+
+  // Demo page is statically imported from `./Demo.svelte` in App.svelte; the
+  // glob resolves to an empty object if the file has been deleted, in which
+  // case we hide the demo option from the page-switcher.
+  const demoExists = Object.keys(import.meta.glob('./Demo.svelte')).length > 0;
+
+  let pageMenuOpen = false;
+  let pageMenuRoot: HTMLElement;
+
+  const HINT_DELAY_MS = 80;
+  let hintLabel: string | null = null;
+  let hintTop = 0;
+  let hintTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function showHint(label: string, target: HTMLElement) {
+    if (drawerOpen) return;
+    if (hintTimer) clearTimeout(hintTimer);
+    const top = target.getBoundingClientRect().top + target.offsetHeight / 2;
+    hintTimer = setTimeout(() => {
+      hintLabel = label;
+      hintTop = top;
+    }, HINT_DELAY_MS);
+  }
+
+  function hideHint() {
+    if (hintTimer) {
+      clearTimeout(hintTimer);
+      hintTimer = null;
+    }
+    hintLabel = null;
+  }
+
+  $: if (drawerOpen) hideHint();
+
+  function selectComponent(id: string) {
+    selectedComponent.set(id);
+    hideHint();
+  }
+
+  function selectPage(path: string) {
+    pageMenuOpen = false;
+    navigate(path);
+  }
+
+  function handleDocClick(e: MouseEvent) {
+    if (!pageMenuOpen) return;
+    if (pageMenuRoot && !pageMenuRoot.contains(e.target as Node)) {
+      pageMenuOpen = false;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      if (pageMenuOpen) pageMenuOpen = false;
+      else if (drawerOpen) drawerOpen = false;
+    }
+  }
+
+  onMount(async () => {
+    document.addEventListener('click', handleDocClick, true);
+    window.addEventListener('keydown', handleKeydown);
+    try {
+      const summaries = await listComponents();
+      validateRegistryAgainstServerScan(summaries.map((s) => s.name));
+    } catch {
+      // Server unreachable — registry's eager schema registration still works
+      // for the editor; validation just gets skipped this boot.
+    }
+  });
+
+  onDestroy(() => {
+    document.removeEventListener('click', handleDocClick, true);
+    window.removeEventListener('keydown', handleKeydown);
+  });
+
+  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+</script>
+
+<!--
+  Site-level component editor page. Wrapped in .editor-page so the
+  ComponentsTab scaffolding (labels, section wrappers) can resolve its
+  --ui-* custom properties from styles/ui-editor.css. The actual components inside
+  still read the user's design tokens, so live edits in the overlay
+  editor flow straight through to this page.
+-->
+<div class="editor-page components-shell" class:rail-expanded={drawerOpen}>
+  <nav class="sidebar rail" class:expanded={drawerOpen}>
+    <div class="rail-header" bind:this={pageMenuRoot}>
+      <button
+        type="button"
+        class="rail-toggle"
+        aria-label={drawerOpen ? 'Collapse components menu' : 'Expand components menu'}
+        aria-expanded={drawerOpen}
+        on:click={() => (drawerOpen = !drawerOpen)}
+      >
+        <i class="fas {drawerOpen ? 'fa-arrow-left' : 'fa-arrow-right'}"></i>
+      </button>
+      <button
+        type="button"
+        class="page-menu-trigger"
+        class:open={pageMenuOpen}
+        aria-haspopup="menu"
+        aria-expanded={pageMenuOpen}
+        tabindex={drawerOpen ? 0 : -1}
+        on:click={() => drawerOpen && (pageMenuOpen = !pageMenuOpen)}
+      >
+        <span class="rail-label">Components</span>
+        <i class="fas fa-chevron-down rail-chevron" class:open={pageMenuOpen}></i>
+      </button>
+      {#if pageMenuOpen && drawerOpen}
+        <div class="page-menu" role="menu">
+          <button class="page-menu-item" role="menuitem" on:click={() => selectPage('/')}>
+            <i class="fas fa-home"></i>
+            <span>Main site</span>
+          </button>
+          {#if demoExists}
+            <button class="page-menu-item" role="menuitem" on:click={() => selectPage('/demo')}>
+              <i class="fas fa-box-open"></i>
+              <span>Demo page</span>
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="nav-items">
+      {#each componentNavItems as item}
+        <button
+          class="nav-item"
+          class:active={$selectedComponent === item.id}
+          on:mouseenter={(e) => showHint(item.label, e.currentTarget)}
+          on:mouseleave={hideHint}
+          on:click={() => selectComponent(item.id)}
+        >
+          <i class={item.icon}></i>
+          <span class="rail-label">{item.label}</span>
+        </button>
+      {/each}
+    </div>
+    {#if drawerOpen}
+      <div class="sidebar-footer">
+        <PresetFileManager />
+      </div>
+    {/if}
+  </nav>
+
+  <main class="content">
+    <ComponentsTab selectedComponent={$selectedComponent} />
+  </main>
+
+  {#if hintLabel !== null && !drawerOpen}
+    <div class="rail-hint" style="top: {hintTop}px">{hintLabel}</div>
+  {/if}
+</div>
+
+<style>
+  @import '../styles/ui-editor.css';
+  .components-shell {
+    --rail-w: 48px;
+    display: grid;
+    grid-template-columns: var(--rail-w) minmax(0, 1fr);
+    height: 100vh;
+    width: 100%;
+    background: black;
+    overflow: hidden;
+    transition: grid-template-columns 220ms ease;
+  }
+
+  .components-shell.rail-expanded {
+    --rail-w: 240px;
+  }
+
+  .sidebar.rail {
+    position: relative;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: black;
+    border-right: 1px solid var(--ui-border-faint);
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .rail-header {
+    position: relative;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    padding: var(--ui-space-12) 0 var(--ui-space-12) 0;
+    border-bottom: 1px solid var(--ui-border-faint);
+  }
+
+  .rail-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 36px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    transition: background var(--ui-transition-fast);
+  }
+
+  .rail-toggle:hover {
+    background: var(--ui-hover);
+  }
+
+  .page-menu-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+    height: 36px;
+    padding: 0 var(--ui-space-10) 0 0;
+    background: none;
+    border: none;
+    color: var(--ui-text-primary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-bold);
+    text-align: left;
+    cursor: pointer;
+    transition: opacity 180ms ease;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .components-shell.rail-expanded .page-menu-trigger {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .rail-chevron {
+    font-size: 0.7em;
+    color: var(--ui-text-tertiary);
+    transition: transform var(--ui-transition-fast);
+  }
+
+  .rail-chevron.open {
+    transform: rotate(180deg);
+  }
+
+  .rail-label {
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+
+  .components-shell.rail-expanded .rail-label {
+    opacity: 1;
+  }
+
+  .page-menu {
+    position: absolute;
+    top: calc(100% - var(--ui-space-2));
+    left: 48px;
+    right: var(--ui-space-8);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-md);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    padding: var(--ui-space-4);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    z-index: 10;
+  }
+
+  .page-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-6) var(--ui-space-10);
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-md);
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
+  }
+
+  .page-menu-item i {
+    width: 1rem;
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  .page-menu-item:hover {
+    background: var(--ui-hover);
+    color: var(--ui-text-primary);
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+    padding: 0 0 var(--ui-space-16);
+    background: black;
+  }
+
+  .sidebar-footer {
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: var(--ui-space-12) var(--ui-space-8) var(--ui-space-16);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+
+  .nav-item {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    width: 100%;
+    height: 36px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-md);
+    cursor: pointer;
+    text-align: left;
+    overflow: hidden;
+    transition: color 60ms ease, background 60ms ease;
+  }
+
+  .nav-item:hover {
+    color: var(--ui-text-secondary);
+    background: var(--ui-hover);
+  }
+
+  .nav-item.active {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+  }
+
+  .nav-item i {
+    justify-self: center;
+    width: 1.25rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    opacity: 0.85;
+  }
+
+  .content {
+    padding: 0 var(--ui-space-32);
+    background: black;
+    min-width: 0;
+    height: 100vh;
+    overflow-y: auto;
+  }
+
+  .rail-hint {
+    position: fixed;
+    left: calc(var(--rail-w) + var(--ui-space-6));
+    transform: translateY(-50%);
+    z-index: 50;
+    padding: var(--ui-space-4) var(--ui-space-8);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+  }
+</style>

package/src/pages/ComponentEditorPage.svelte.d.ts

@@ -0,0 +1,2 @@
+import { SvelteComponent } from 'svelte';
+export default class ComponentEditorPage extends SvelteComponent<Record<string, never>> {}

package/src/pages/Editor.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import EditorShell from './EditorShell.svelte';
+  import UICopyPopover from '../ui/UICopyPopover.svelte';
+  import { installEditorKeybindings } from '../lib/editorKeybindings';
+  import { initializeEditorStore } from '../lib/editorStore';
+  import { storageKey } from '../lib/editorConfig';
+
+  const inOverlay = typeof window !== 'undefined' && window.parent !== window;
+
+  // Where "Back to site" sends the user. Prefer the previous non-editor entry
+  // from session history; fall back to /demo and finally /.
+  const backHref = pickBackHref();
+
+  function pickBackHref(): string {
+    try {
+      const prev = sessionStorage.getItem(storageKey('prev-route'));
+      if (prev && prev !== '/editor') return prev;
+    } catch {
+      // ignore
+    }
+    return '/demo';
+  }
+
+  onMount(() => {
+    initializeEditorStore();
+    return installEditorKeybindings();
+  });
+</script>
+
+<div class="editor-page">
+  {#if !inOverlay}
+    <div class="editor-bar">
+      <div class="bar-left">
+        <a href={backHref} class="back-link">
+          <i class="fas fa-arrow-left"></i>
+          <span>Back to site</span>
+        </a>
+        <span class="editor-label">Editor</span>
+      </div>
+    </div>
+  {/if}
+
+  <EditorShell />
+  <UICopyPopover />
+</div>
+
+<style>
+  @import '../styles/ui-editor.css';
+
+  .editor-page {
+    min-height: 100vh;
+    background: black;
+  }
+
+  .editor-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-16);
+    padding: var(--ui-space-10) var(--ui-space-16);
+    background: black;
+    border-bottom: 1px solid var(--ui-border-faint);
+    min-height: 52px;
+  }
+
+  .bar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-16);
+    min-width: 0;
+  }
+
+  .back-link {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    color: var(--ui-text-tertiary);
+    text-decoration: none;
+    font-size: var(--ui-font-size-md);
+    transition: color var(--ui-transition-fast);
+  }
+
+  .back-link:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .editor-label {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  @media (max-width: 1100px) {
+    .editor-label {
+      display: none;
+    }
+  }
+</style>

package/src/pages/Editor.svelte.d.ts

@@ -0,0 +1,2 @@
+import { SvelteComponent } from 'svelte';
+export default class Editor extends SvelteComponent<Record<string, never>> {}