@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/lib/parentRouteStore.ts

@@ -0,0 +1,42 @@
+import { writable, type Readable } from 'svelte/store';
+import { route } from './router';
+
+// Parent-window route, viewable from inside the editor iframe. Mirrors the
+// host page's route via postMessage from LiveEditorOverlay. When not in an
+// iframe, falls through to the local route store.
+
+const MSG_TYPE = 'lt:parent-route';
+
+function buildStore(): Readable<string> {
+  if (typeof window === 'undefined') return route;
+  if (window.parent === window) return route;
+
+  const inner = writable<string>('/');
+
+  // Best-effort initial read (same-origin in dev).
+  try {
+    inner.set(window.parent.location.pathname || '/');
+  } catch {
+    // cross-origin or sandboxed — wait for the first postMessage instead
+  }
+
+  window.addEventListener('message', (e: MessageEvent) => {
+    const data = e.data;
+    if (data && typeof data === 'object' && data.type === MSG_TYPE && typeof data.path === 'string') {
+      inner.set(data.path);
+    }
+  });
+
+  return inner;
+}
+
+export const parentRoute: Readable<string> = buildStore();
+
+export function postParentRoute(target: Window | null | undefined, path: string): void {
+  if (!target) return;
+  try {
+    target.postMessage({ type: MSG_TYPE, path }, '*');
+  } catch {
+    // ignore — iframe may not be ready yet
+  }
+}

package/src/lib/parsers/globalRootBlock.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared parser for `:global(:root) { ... }` declaration blocks in Svelte
+ * component sources.
+ *
+ * Both the browser-side `tokenRegistry` (Vite `?raw` import-time scrape) and
+ * the Node-side `themeFileApi` plugin (filesystem read on dev/HMR) need to
+ * recover Layer-2 component-token declarations from `.svelte` files. They had
+ * been carrying separate copies of the same regex; this is the canonical
+ * implementation that both targets import.
+ *
+ * Assumes no nested braces inside the block — Layer-2 token blocks are flat
+ * declaration lists (`--name: value;`), not nested rulesets. If a future token
+ * block ever needs `@media`/`@supports` nesting, this regex changes once here.
+ *
+ * Pure (no DOM, no fs) so the tsup ESM+CJS build of the vite plugin can import
+ * it safely.
+ *
+ * Consumer-facing implication: components must keep their `:global(:root)`
+ * blocks as flat literal declarations — no `@each` / SCSS loops — otherwise
+ * this parser sees zero tokens and the editor's alias picker / file-manager
+ * UI is empty for that component. See `src/components/Notification.svelte:86–92`
+ * for the documented reason a four-variant block stays expanded.
+ */
+export function extractGlobalRootBody(source: string): string {
+  const re = /:global\(:root\)\s*\{([^}]*)\}/g;
+  const bodies: string[] = [];
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(source)) !== null) {
+    bodies.push(m[1]);
+  }
+  return bodies.join('\n');
+}

package/src/lib/presetService.ts

@@ -0,0 +1,94 @@
+import type { Preset, PresetMeta, Theme, ComponentConfig } from './themeTypes';
+import { versionedFileResource } from './files/versionedFileResource';
+import { listComponents } from './componentConfigService';
+import { getActiveTheme } from './themeService';
+
+/**
+ * REST client for preset (bundle) manifest files. Each preset file references
+ * a theme file basename + a per-component config file basename. Loading a
+ * preset flips the corresponding `_active.json` pointers via `applyPreset`,
+ * leaving the underlying theme + component-config files as the source of
+ * truth.
+ *
+ * Mirrors the lifecycle of `themeService.ts` and `componentConfigService.ts`
+ * but adds one custom route — `PUT /api/presets/:name/apply` — that the
+ * server uses to atomically validate every reference and flip every pointer
+ * in one shot.
+ */
+
+const presetsResource = versionedFileResource<Preset, PresetMeta, never>({
+  baseUrl: '/api/presets',
+});
+
+export const listPresets = async (): Promise<PresetMeta[]> => {
+  const data = await presetsResource.list();
+  return data.files;
+};
+
+export const loadPreset = (fileName: string): Promise<Preset> =>
+  presetsResource.load(fileName);
+export const savePreset = (fileName: string, data: Preset): Promise<void> =>
+  presetsResource.save(fileName, data);
+export const deletePreset = (fileName: string): Promise<void> =>
+  presetsResource.remove(fileName);
+export const getActivePreset = (): Promise<Preset | null> => presetsResource.getActive();
+export const setActivePreset = (fileName: string): Promise<void> =>
+  presetsResource.setActive(fileName);
+
+export interface ApplyPresetResult {
+  ok: boolean;
+  preset: Preset;
+  theme: Theme;
+  componentConfigs: Record<string, ComponentConfig>;
+}
+
+/**
+ * Server-side atomic apply: validate every referenced file exists, flip the
+ * theme + each component's `_active.json` pointer, and return the resolved
+ * theme + component configs in one payload.
+ *
+ * The client typically follows this with a full page reload — loading a
+ * preset is a "blow up the world" action and preserving editor session
+ * state across that boundary is low value.
+ */
+export async function applyPreset(fileName: string): Promise<ApplyPresetResult> {
+  const res = await fetch(`/api/presets/${encodeURIComponent(fileName)}/apply`, {
+    method: 'PUT',
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Apply failed' }));
+    throw new Error(err.error || 'Apply failed');
+  }
+  return res.json();
+}
+
+/**
+ * Build a manifest from the *currently active files on disk* (not in-memory
+ * editor state) and persist it. Dirty editor state isn't a file yet, so it's
+ * not part of any preset until the user saves it. Callers should warn the
+ * user via the UI if `$dirty` is true before invoking this.
+ */
+export async function captureCurrentAsPreset(
+  fileName: string,
+  displayName: string,
+): Promise<void> {
+  const activeTheme = await getActiveTheme();
+  if (!activeTheme || !activeTheme._fileName) {
+    throw new Error('No active theme on disk to capture');
+  }
+  const components = await listComponents();
+  const componentConfigs: Record<string, string> = {};
+  for (const c of components) {
+    componentConfigs[c.name] = c.activeFile || 'default';
+  }
+  const now = new Date().toISOString();
+  const manifest: Preset = {
+    name: displayName,
+    createdAt: now,
+    updatedAt: now,
+    theme: activeTheme._fileName,
+    componentConfigs,
+  };
+  await savePreset(fileName, manifest);
+  await setActivePreset(fileName);
+}

package/src/lib/router.ts

@@ -1,17 +1,49 @@
 import { writable } from 'svelte/store';
+import { storageKey } from './editorConfig';
 
-export const route = writable(window.location.pathname || '/');
+function prevKey(): string {
+  return storageKey('prev-route');
+}
+
+function rememberPrev(current: string) {
+  if (current === '/editor') return;
+  try { sessionStorage.setItem(prevKey(), current); } catch { /* ignore */ }
+}
+
+export const route = writable<string>('/');
+
+let initialised = false;
 
+/**
+ * Idempotent host hook — call once during boot to seed the route store from
+ * the current location and wire popstate handling. Module import no longer
+ * touches `window`, so SSR / test harnesses can import without crashing.
+ */
+export function init(): void {
+  if (initialised) return;
+  initialised = true;
+  if (typeof window === 'undefined') return;
+  const initial = window.location.pathname || '/';
+  rememberPrev(initial);
+  route.set(initial);
+  window.addEventListener('popstate', () => {
+    route.set(window.location.pathname || '/');
+  });
+}
+
+/**
+ * Push a new history entry and update the route store. Produces exactly one
+ * `route` store update per call — the popstate listener installed in `init()`
+ * fires only on browser back/forward, not on synthetic dispatch.
+ */
 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);
+  if (typeof window !== 'undefined') {
+    rememberPrev(window.location.pathname || '/');
+    history.pushState(null, '', path);
+    if (!path.includes('#')) {
+      window.scrollTo(0, 0);
+    }
   }
+  route.set(pathname);
 }
-
-window.addEventListener('popstate', () => {
-  route.set(window.location.pathname || '/');
-});

package/src/lib/scrollSection.ts

@@ -0,0 +1,45 @@
+const PRELUDE_PX = 128;
+const DURATION_MS = 400;
+const SPEED_PX_PER_MS = PRELUDE_PX / DURATION_MS;
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+function findScrollParent(el: HTMLElement): HTMLElement {
+  let node: HTMLElement | null = el.parentElement;
+  while (node) {
+    const style = getComputedStyle(node);
+    if (/(auto|scroll|overlay)/.test(style.overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return document.scrollingElement as HTMLElement ?? document.documentElement;
+}
+
+export function scrollSectionIntoView(target: HTMLElement, scroller?: HTMLElement) {
+  const scrollEl = scroller ?? findScrollParent(target);
+  const max = scrollEl.scrollHeight - scrollEl.clientHeight;
+  const targetTop = Math.max(0, Math.min(max, target.offsetTop));
+  const start = scrollEl.scrollTop;
+  const delta = targetTop - start;
+  if (delta === 0) return;
+
+  const direction = delta > 0 ? 1 : -1;
+  const distance = Math.abs(delta);
+  const animatedDistance = Math.min(distance, PRELUDE_PX);
+  const duration = animatedDistance / SPEED_PX_PER_MS;
+
+  const animFrom = targetTop - animatedDistance * direction;
+  scrollEl.scrollTop = animFrom;
+
+  const t0 = performance.now();
+  function step(now: number) {
+    const t = Math.min(1, (now - t0) / duration);
+    scrollEl.scrollTop = animFrom + animatedDistance * direction * easeOutCubic(t);
+    if (t < 1) requestAnimationFrame(step);
+    else scrollEl.scrollTop = targetTop;
+  }
+  requestAnimationFrame(step);
+}

package/src/lib/slices/columns.ts

@@ -0,0 +1,59 @@
+/**
+ * Columns slice — fixed-shape (count/maxWidth/gutter/margin) state, derived to
+ * four CSS vars. Values default to a 12-column 1440px grid; while state matches
+ * the default we leave tokens.css in charge so the `clamp()` in
+ * `--columns-gutter` survives until the editor overrides it.
+ */
+import type { ColumnsState } from '../editorTypes';
+
+export const DEFAULT_COLUMNS: ColumnsState = { count: 12, maxWidth: 1440, gutter: 16, margin: 0 };
+
+export const COLUMN_VAR_NAMES = ['--columns-count', '--columns-max-width', '--columns-gutter', '--columns-margin'] as const;
+
+export function columnsToVars(c: ColumnsState): Record<string, string> {
+  return {
+    '--columns-count': String(c.count),
+    '--columns-max-width': `${c.maxWidth}px`,
+    '--columns-gutter': `${c.gutter}px`,
+    '--columns-margin': `${c.margin}px`,
+  };
+}
+
+/**
+ * Only emit column CSS vars once the user has actually modified columns.
+ * While columns match the default, we leave tokens.css in charge — which
+ * preserves the `clamp()` in `--columns-gutter` until the editor overrides it.
+ */
+export function columnsEqualsDefault(c: ColumnsState): boolean {
+  return c.count === DEFAULT_COLUMNS.count
+    && c.maxWidth === DEFAULT_COLUMNS.maxWidth
+    && c.gutter === DEFAULT_COLUMNS.gutter
+    && c.margin === DEFAULT_COLUMNS.margin;
+}
+
+export function parseColumnVars(vars: Record<string, string>): Partial<ColumnsState> {
+  const out: Partial<ColumnsState> = {};
+  const count = parseInt(vars['--columns-count'] ?? '', 10);
+  if (Number.isFinite(count) && count > 0) out.count = count;
+  const maxWidth = parseFloat(vars['--columns-max-width'] ?? '');
+  if (Number.isFinite(maxWidth)) out.maxWidth = Math.round(maxWidth);
+  const gutter = parseFloat(vars['--columns-gutter'] ?? '');
+  if (Number.isFinite(gutter)) out.gutter = Math.round(gutter);
+  const margin = parseFloat(vars['--columns-margin'] ?? '');
+  if (Number.isFinite(margin)) out.margin = Math.round(margin);
+  return out;
+}
+
+/**
+ * Loader: route the relevant entries from a freshly-loaded theme's vars bag
+ * into `next.columns` and remove them from the bag so derivation stays
+ * single-source. Mutates `next` and `rawVars` in place.
+ */
+export function loadColumnsFromVars(
+  next: import('../editorTypes').EditorState,
+  rawVars: Record<string, string>,
+): void {
+  const overrides = parseColumnVars(rawVars);
+  next.columns = { ...DEFAULT_COLUMNS, ...overrides };
+  for (const name of COLUMN_VAR_NAMES) delete rawVars[name];
+}