@motion-proto/live-tokens 0.47.1 → 0.48.0

package/src/editor/core/palettes/paletteDerivation.ts

@@ -225,9 +225,53 @@ export function nearestPaletteStep(lightnessCurve: CurveAnchor[], baseL: number)
   return best;
 }
 
-/** Insert an anchor at x, or overwrite one already there (endpoints included).
- *  Returns the y it displaced so the caller can restore it later. */
-export function setCurveAnchor(curve: CurveAnchor[], x: number, y: number): { curve: CurveAnchor[]; displacedY?: number } {
+/**
+ * Insert an anchor at x, or overwrite one already there (endpoints included).
+ * Returns the y it displaced so the caller can restore it later.
+ *
+ * `smooth` is for a curve's first-ever placement only (nothing has had a
+ * chance to edit it yet): every anchor, endpoints included, gets a tangent
+ * computed jointly with its real neighbour, so the placement reads as one
+ * smooth curve instead of two segments meeting at a corner where the
+ * endpoints still aim along their pre-insertion secant. It also returns the
+ * untouched original endpoints as `priorEndpoints` — this reshaping isn't
+ * algebraically invertible the way the scale-and-preserve path below is, so
+ * the caller must hold onto them to restore the curve exactly later. Every
+ * other placement (`smooth` false, the default) preserves whatever shape is
+ * already there, edited or not.
+ */
+export function setCurveAnchor(
+  curve: CurveAnchor[],
+  x: number,
+  y: number,
+  smooth = false,
+): { curve: CurveAnchor[]; displacedY?: number; priorEndpoints?: [CurveAnchor, CurveAnchor] } {
+  if (smooth && curve.length === 2) {
+    const [p0, p2] = curve;
+    const mid: CurveAnchor = { x, y, inDx: 0, inDy: 0, outDx: 0, outDy: 0 };
+    if (Math.abs(p0.x - x) < 0.5) {
+      return {
+        curve: [tangentAnchor(x, y, null, p2), tangentAnchor(p2.x, p2.y, mid, null)],
+        displacedY: p0.y,
+        priorEndpoints: [p0, p2],
+      };
+    }
+    if (Math.abs(p2.x - x) < 0.5) {
+      return {
+        curve: [tangentAnchor(p0.x, p0.y, null, mid), tangentAnchor(x, y, p0, null)],
+        displacedY: p2.y,
+        priorEndpoints: [p0, p2],
+      };
+    }
+    return {
+      curve: [
+        tangentAnchor(p0.x, p0.y, null, mid),
+        tangentAnchor(x, y, p0, p2),
+        tangentAnchor(p2.x, p2.y, mid, null),
+      ],
+      priorEndpoints: [p0, p2],
+    };
+  }
   const existing = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
   if (existing >= 0) {
     const displacedY = curve[existing].y;
@@ -272,10 +316,22 @@ function fitBetween(a: CurveAnchor, prev: CurveAnchor | null, next: CurveAnchor
   return out;
 }
 
-/** Undo a placement at x: restore the displaced y when one was recorded,
- *  remove the anchor when the placement created it. Endpoints are never
- *  removed — a curve needs its boundaries. */
-export function liftCurveAnchor(curve: CurveAnchor[], x: number, displacedY?: number): CurveAnchor[] {
+/**
+ * Undo a placement at x: restore the displaced y when one was recorded,
+ * remove the anchor when the placement created it. Endpoints are never
+ * removed — a curve needs its boundaries.
+ *
+ * `priorEndpoints`, when given, wins outright: it's the untouched pair from
+ * before a `smooth` placement, which the scale/displace math below can't
+ * reconstruct on its own.
+ */
+export function liftCurveAnchor(
+  curve: CurveAnchor[],
+  x: number,
+  displacedY?: number,
+  priorEndpoints?: [CurveAnchor, CurveAnchor],
+): CurveAnchor[] {
+  if (priorEndpoints) return priorEndpoints;
   const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
   if (idx < 0) return curve;
   if (displacedY !== undefined) return curve.map((a, i) => (i === idx ? { ...a, y: displacedY } : a));
@@ -303,20 +359,34 @@ export function liftCurveAnchor(curve: CurveAnchor[], x: number, displacedY?: nu
 export function syncBaseAnchor(cfg: PaletteConfig): void {
   if (cfg.anchorToBase === false) return;
   const prev = cfg.anchorPlacement;
+  const fresh = prev === undefined;
   let lCurve = cfg.lightnessCurve;
   let sCurve = cfg.saturationCurve;
   if (prev) {
+    // Re-placing an existing anchor (a hue move, typically) must preserve
+    // whatever is currently on the curve, edited or not — never restore the
+    // pristine `priorEndpoints` here, or every hand-tuned handle would be
+    // discarded the next time the base color moves.
     const prevX = stepIndexToX(prev.step);
     lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
     sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
   }
   const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
   const x = stepIndexToX(step);
-  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100);
-  const s = setCurveAnchor(sCurve, x, 100);
+  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100, fresh);
+  const s = setCurveAnchor(sCurve, x, 100, fresh);
   cfg.lightnessCurve = l.curve;
   cfg.saturationCurve = s.curve;
-  cfg.anchorPlacement = { step, displacedL: l.displacedY, displacedS: s.displacedY };
+  // priorEndpoints is captured once, on the curve's first-ever placement,
+  // and carried forward untouched thereafter so a later clear can still
+  // restore the true original regardless of how many times the anchor moved.
+  cfg.anchorPlacement = {
+    step,
+    displacedL: l.displacedY,
+    displacedS: s.displacedY,
+    priorLightnessEndpoints: prev?.priorLightnessEndpoints ?? l.priorEndpoints,
+    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints,
+  };
 }
 
 /** Toggle-off: lift the placement out of both curves and drop the flag. */
@@ -324,8 +394,8 @@ export function clearBaseAnchor(cfg: PaletteConfig): void {
   const prev = cfg.anchorPlacement;
   if (prev) {
     const x = stepIndexToX(prev.step);
-    cfg.lightnessCurve = liftCurveAnchor(cfg.lightnessCurve, x, prev.displacedL);
-    cfg.saturationCurve = liftCurveAnchor(cfg.saturationCurve, x, prev.displacedS);
+    cfg.lightnessCurve = liftCurveAnchor(cfg.lightnessCurve, x, prev.displacedL, prev.priorLightnessEndpoints);
+    cfg.saturationCurve = liftCurveAnchor(cfg.saturationCurve, x, prev.displacedS, prev.priorSaturationEndpoints);
     cfg.anchorPlacement = undefined;
   }
   cfg.anchorToBase = false;
@@ -495,7 +565,7 @@ const HEX_RE = /^#[0-9a-f]{6}$/i;
  *     authoritative anchor and `baseColor` is snapped to it. The flag is then
  *     cleared. Editor-authored palettes (no `_imported`) are left untouched —
  *     see `temp/manifest-robustness-plan.md` §9 for why "snap on any
- *     divergence" was wrong: it would have flipped `themes/default.json`'s
+ *     divergence" was wrong: it would have flipped `colors-and-type/default.json`'s
  *     accent from teal to olive on first read.
  *
  *   - **Consume** (always): every variable the palette's derivation produces

package/src/editor/core/preview/lookPreview.ts

@@ -0,0 +1,141 @@
+import { get } from 'svelte/store';
+import type { FontSource, Theme, ColorsAndType } from '../themes/themeTypes';
+import { editorState, colorsAndTypeToState, toComponentSlice } from '../store/editorStore';
+import { deriveCssVars } from '../store/editorRenderer';
+import { setCssVar, removeCssVar } from '../cssVarSync';
+import { applyFontSources, resolveFontStackValues } from '../fonts/fontLoader';
+import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
+import { loadTheme } from '../themes/themeService';
+
+/**
+ * Client-side rendering of a saved file, for browsing looks without committing
+ * one. A theme previews as a whole look; a colors-and-type file previews as
+ * colors and type over the components the user has right now. Nothing here writes to the server,
+ * mutates the editor store, or marks anything dirty: a preview is paint only.
+ * Save-As stays honest because `captureLook` reads the server's active files,
+ * which a preview never touches.
+ *
+ * Both painting and reverting run the same derivation the renderer runs on
+ * store state (`deriveCssVars`), so a preview cannot drift from what an Apply
+ * of the same theme produces, and a revert re-derives from the live store
+ * rather than replaying DOM values scraped before the preview.
+ *
+ * One preview is live at a time, whichever kind it is: painting reverts first,
+ * so every look is a diff against the user's real state.
+ */
+
+/** Everything a look puts on the page: the full var set (colors and type,
+ *  components and the composed `--font-*` stacks) plus the sources its faces
+ *  come from. */
+export interface RenderedLook {
+  vars: Record<string, string>;
+  fontSources: FontSource[];
+}
+
+/**
+ * The full var set a theme paints. Components the theme carries no config
+ * for render `defaults`' config, matching Apply's complete-look semantics;
+ * configs for components this install lacks are skipped, as Apply skips them.
+ */
+export function themeLook(theme: Theme, defaults: Theme): RenderedLook {
+  const colorsAndType = structuredClone(theme.colorsAndType);
+  migrateColorsAndTypeFonts(colorsAndType);
+  const state = colorsAndTypeToState(colorsAndType);
+  state.components = {};
+  for (const [comp, config] of Object.entries(defaults.componentConfigs)) {
+    state.components[comp] = toComponentSlice(comp, config.aliases, config.config, config.schemaVersion);
+  }
+  for (const [comp, config] of Object.entries(theme.componentConfigs)) {
+    if (!(comp in state.components)) continue;
+    state.components[comp] = toComponentSlice(comp, config.aliases, config.config, config.schemaVersion);
+  }
+  const vars = deriveCssVars(state);
+  Object.assign(vars, resolveFontStackValues(colorsAndType.fontStacks ?? [], colorsAndType.fontSources ?? []));
+  return { vars, fontSources: colorsAndType.fontSources ?? [] };
+}
+
+/**
+ * The full var set colors and type paint on their own. They are not a whole look,
+ * so the components stay as the user has them: `colorsAndTypeToState` carries the live
+ * component slice forward (`loadComponentsFromVars`) and strips component-owned
+ * vars out of their own bag, which is exactly the composition a preview
+ * wants. No defaults fetch, no component reset.
+ */
+export function colorsAndTypeLook(colorsAndType: ColorsAndType): RenderedLook {
+  const next = structuredClone(colorsAndType);
+  migrateColorsAndTypeFonts(next);
+  const vars = deriveCssVars(colorsAndTypeToState(next));
+  Object.assign(vars, resolveFontStackValues(next.fontStacks ?? [], next.fontSources ?? []));
+  return { vars, fontSources: next.fontSources ?? [] };
+}
+
+/** The look the editor store currently describes — the state a revert returns to. */
+export function liveLook(): RenderedLook {
+  const state = get(editorState);
+  const vars = deriveCssVars(state);
+  Object.assign(vars, resolveFontStackValues(state.fonts.stacks, state.fonts.sources));
+  return { vars, fontSources: state.fonts.sources };
+}
+
+let livePreview: RenderedLook | null = null;
+let defaultsPromise: Promise<Theme> | null = null;
+
+function loadDefaults(): Promise<Theme> {
+  // A rejected promise must not be memoized, or one failed fetch (a dev-server
+  // restart mid-dialog) poisons every later preview until a page reload.
+  defaultsPromise ??= loadTheme('default').catch((err) => {
+    defaultsPromise = null;
+    throw err;
+  });
+  return defaultsPromise;
+}
+
+function paint(next: RenderedLook, from: RenderedLook): void {
+  for (const [name, value] of Object.entries(next.vars)) {
+    if (from.vars[name] !== value) setCssVar(name, value);
+  }
+  for (const name of Object.keys(from.vars)) {
+    if (!(name in next.vars)) removeCssVar(name);
+  }
+  applyFontSources(next.fontSources);
+}
+
+/**
+ * Show `look` on the page. Re-entrant: a live preview is reverted first, so
+ * every look is painted as a diff against the user's real state and a var one
+ * look sets but the next does not returns to its live value instead of vanishing.
+ * The two passes run in one task, so the browser never paints the intermediate.
+ */
+function applyPreview(look: RenderedLook): void {
+  revertPreview();
+  paint(look, liveLook());
+  livePreview = look;
+}
+
+/** Paint a whole look: the theme's colors and type and every component config
+ *  it carries. */
+export async function previewTheme(theme: Theme): Promise<void> {
+  applyPreview(themeLook(theme, await loadDefaults()));
+}
+
+/** Paint colors and type over the components as they stand. */
+export function previewColorsAndType(colorsAndType: ColorsAndType): void {
+  applyPreview(colorsAndTypeLook(colorsAndType));
+}
+
+/** Restore the live editor state. No-op when no preview is running. */
+export function revertPreview(): void {
+  if (!livePreview) return;
+  paint(liveLook(), livePreview);
+  livePreview = null;
+}
+
+export function isPreviewing(): boolean {
+  return livePreview !== null;
+}
+
+/** Test-only: drop the live preview and the cached defaults theme. */
+export function __resetPreviewForTests(): void {
+  livePreview = null;
+  defaultsPromise = null;
+}

package/src/editor/core/productionPulse.ts

@@ -1,16 +1,12 @@
 import { writable } from 'svelte/store';
-import type { ProductionInfo } from './themes/themeService';
-import type { ManifestMeta } from './themes/themeTypes';
+import type { Theme } from './themes/themeTypes';
 
 /**
- * Monotonic counter that ticks every time a production pointer flips —
- * theme production or a component's production. UI surfaces that need to
- * react to a sibling Adopt subscribe to this so they refresh without
- * per-pair wiring.
+ * Monotonic counter that ticks every time an Adopt publishes a theme. UI
+ * surfaces that need to react to a sibling Adopt subscribe to this so they
+ * refresh without per-pair wiring.
  *
- * Bumpers: `ThemeFileManager.handleApplyToProduction`,
- * `ComponentFileManager.handleUpdateProduction`. Anyone setting
- * `_production.json` should bump.
+ * Bumpers: `ThemePanel.runAdopt`, `ComponentFileManager.handleAdopt`.
  */
 export const productionRevision = writable(0);
 
@@ -19,19 +15,36 @@ export function bumpProductionRevision(): void {
 }
 
 /**
- * Cached production-state stores. The Theme and Manifest file managers live in
- * the sidebar footer, swapping in/out of the DOM as the user toggles between
- * the tokens and components views. Keeping the last-known production state in
- * module-level Svelte stores means a remount renders the correct Adopt-button
- * state on the first frame instead of flashing through "not in sync" while a
- * fresh fetch resolves.
+ * Ticks when a component's live config changes on the server — a save, a
+ * preset load, a delete. Saving one is visible through `componentDirty`, but
+ * loading a preset with no edit in play changes nothing the Theme panel can
+ * observe, and its Components count is derived from exactly that. Bumped by
+ * `ComponentFileManager`.
  */
-export const themeProductionInfo = writable<ProductionInfo | null>(null);
+export const componentActiveRevision = writable(0);
+
+export function bumpComponentActiveRevision(): void {
+  componentActiveRevision.update((n) => n + 1);
+}
+
+/**
+ * The live look has moved past the last bake. Only Adopt bakes the CSS, so a
+ * buffer write or a theme save after one leaves production a version behind,
+ * and no pointer file records when the bake happened. Every surface reads the
+ * one signal: a component save has to reach the theme panel's Adopt, and a
+ * component editor's Adopt has to clear it for the panel.
+ *
+ * Set by the client writes that move the live look (`writeWorkingColorsAndType`,
+ * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`); cleared by
+ * `adoptLook`. Module-level, so it survives the remounts a view switch causes.
+ */
+export const liveMovedSinceBake = writable(false);
 
 /**
- * Last-known active manifest meta. Bumped by ManifestFileManager whenever the
- * active manifest changes (load, save, save-as) and whenever a theme or
- * component Adopt completes (the server patches the active manifest as a
- * side-effect, so consumers re-read it on `productionRevision` ticks).
+ * Last-read production theme — the document `tokens.generated.css` was baked
+ * from. The Theme panel and the component file managers live in surfaces that
+ * swap in and out of the DOM, so keeping the last answer in a module-level
+ * store means a remount renders the correct Adopt state on the first frame
+ * instead of flashing through "not in sync" while a fresh fetch resolves.
  */
-export const activeManifest = writable<ManifestMeta | null>(null);
+export const productionTheme = writable<Theme | null>(null);

package/src/editor/core/storage/files/versionedFileResourceClient.ts

@@ -1,30 +1,28 @@
 /**
  * Client-side REST helpers for any "versioned file resource" — a class of
  * editable artifact whose lifecycle mirrors the theme files: list / load /
- * save / delete + an active pointer + a production pointer.
+ * save / delete, plus a live read door and, for themes, the pointer naming the
+ * open one.
  *
- * `themeService.ts` and `componentConfigService.ts` previously reimplemented
- * the same fetch shape. They now both consume `versionedFileResource(...)`
- * with their resource-specific URL.
+ * `colorsAndTypeService.ts`, `componentConfigService.ts` and `themeService.ts`
+ * all consume `versionedFileResource(...)` with their own URL root.
  *
  * Pure URL construction + fetch — no DOM, no filesystem, safe for any browser
  * or test harness that has a `fetch` global.
  */
 
 export interface VersionedFileResourceClientOptions {
-  /** REST endpoint root, e.g. `${API_BASE}/themes` or `${API_BASE}/component-configs/button`. */
+  /** REST endpoint root, e.g. `${API_BASE}/colors-and-type` or `${API_BASE}/component-configs/button`. */
   baseUrl: string;
 }
 
-export interface VersionedFileResourceClient<TItem, TMeta, TProductionInfo> {
-  list(): Promise<{ files: TMeta[]; activeFile?: string; productionFile?: string }>;
+export interface VersionedFileResourceClient<TItem, TMeta> {
+  list(): Promise<{ files: TMeta[] }>;
   load(fileName: string): Promise<TItem>;
   save(fileName: string, data: TItem): Promise<void>;
   remove(fileName: string): Promise<void>;
   getActive(): Promise<TItem | null>;
   setActive(fileName: string): Promise<void>;
-  getProductionInfo(): Promise<TProductionInfo>;
-  setProduction(fileName: string): Promise<TProductionInfo & { ok: boolean }>;
 }
 
 /**
@@ -34,17 +32,15 @@ export interface VersionedFileResourceClient<TItem, TMeta, TProductionInfo> {
  *   GET    {base}/:name                   → load
  *   PUT    {base}/:name                   → save
  *   DELETE {base}/:name                   → delete
- *   GET    {base}/active                  → load active
- *   PUT    {base}/active   {name}         → set active
- *   GET    {base}/production              → production info
- *   PUT    {base}/production {name}       → set production
+ *   GET    {base}/active                  → the live item
+ *   PUT    {base}/active   {name}         → open that item (themes only)
  *
- * Generic over the payload types so theme & component-config can share the
- * same plumbing while keeping their own response/info shapes.
+ * Generic over the payload types so themes, colors and type and component
+ * configs share the plumbing while keeping their own response shapes.
  */
-export function versionedFileResource<TItem, TMeta, TProductionInfo>(
+export function versionedFileResource<TItem, TMeta>(
   opts: VersionedFileResourceClientOptions,
-): VersionedFileResourceClient<TItem, TMeta, TProductionInfo> {
+): VersionedFileResourceClient<TItem, TMeta> {
   const { baseUrl } = opts;
 
   async function readJsonError(res: Response, fallback: string): Promise<string> {
@@ -52,7 +48,7 @@ export function versionedFileResource<TItem, TMeta, TProductionInfo>(
     return err.error || fallback;
   }
 
-  async function list(): Promise<{ files: TMeta[]; activeFile?: string; productionFile?: string }> {
+  async function list(): Promise<{ files: TMeta[] }> {
     const res = await fetch(baseUrl);
     if (!res.ok) throw new Error(`Failed to list ${baseUrl}`);
     return res.json();
@@ -105,32 +101,7 @@ export function versionedFileResource<TItem, TMeta, TProductionInfo>(
     }
   }
 
-  async function getProductionInfo(): Promise<TProductionInfo> {
-    const res = await fetch(`${baseUrl}/production`);
-    if (!res.ok) throw new Error('Failed to get production info');
-    return res.json();
-  }
-
-  async function setProduction(fileName: string): Promise<TProductionInfo & { ok: boolean }> {
-    const res = await fetch(`${baseUrl}/production`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name: fileName }),
-    });
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      const err = new Error(body.error || 'Set production failed') as Error & {
-        status?: number;
-        code?: string;
-      };
-      err.status = res.status;
-      if (body.code) err.code = body.code;
-      throw err;
-    }
-    return res.json();
-  }
-
-  return { list, load, save, remove, getActive, setActive, getProductionInfo, setProduction };
+  return { list, load, save, remove, getActive, setActive };
 }
 
 /** Sanitize a display name to a safe file name. Pure — no DOM, no fs. */
@@ -142,6 +113,8 @@ export function sanitizeFileName(name: string): string {
       .replace(/\s+/g, '-')
       .replace(/[^a-z0-9\-_]/g, '')
       .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'unnamed'
+      // A leading `_` marks the fixed slots (`_working`, the pointer files), so
+      // no name a user types or a bundle carries may keep one.
+      .replace(/^[-_]+|-+$/g, '') || 'unnamed'
   );
 }

package/src/editor/core/store/editorConfigStore.ts

@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
 
-/** The file name of the currently active token file. */
-export const activeFileName = writable<string>('default');
+/** Slug of the theme the editor has open — the document every edit belongs to. */
+export const openThemeSlug = writable<string>('default');

package/src/editor/core/store/editorPersistence.ts

@@ -85,7 +85,6 @@ export function normalizeComponents(state: EditorState): EditorState {
     if (!slice || typeof slice !== 'object') continue;
     components[name] = {
       ...slice,
-      activeFile: typeof slice.activeFile === 'string' ? slice.activeFile : 'default',
       aliases: slice.aliases && typeof slice.aliases === 'object' ? slice.aliases : {},
       config: slice.config && typeof slice.config === 'object' ? slice.config : {},
     };