@motion-proto/live-tokens 0.47.0 → 0.48.0

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

@@ -13,17 +13,18 @@
  *  - `editorRenderer` (DOM subscriber)
  *  - `editorPersistence` (debounced localStorage)
  *
- * Component-config + theme migrations live in `./migrations` (Wave 4).
- * `loadComponentActive` / `seedComponentsFromApi` / `loadFromFile` / `toTheme`
+ * Component-config + colors-and-type migrations live in `./migrations` (Wave 4).
+ * `loadComponentActive` / `seedComponentsFromApi` / `loadFromFile` / `toColorsAndType`
  * orchestrate across slices and stay here.
  */
 
+import { derived, writable, type Readable } from 'svelte/store';
 import type { CssVarRef, EditorState, GradientAliasValue } from './editorTypes';
-import type { AliasDiskValue, Theme } from '../themes/themeTypes';
+import type { AliasDiskValue, ColorsAndType } from '../themes/themeTypes';
 import { KNOWN_COMPONENT_CONFIG_KEYS } from '../components/componentConfigKeys';
 import { cssStringToRef } from './cssVarRef';
 import {
-  CURRENT_THEME_SCHEMA_VERSION,
+  CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations,
 } from '../themes/migrations';
@@ -68,7 +69,11 @@ import {
   loadShadowsFromVars,
   shadowsToVars,
 } from '../themes/slices/shadows';
-import { makeDefaultGradients } from '../themes/slices/gradients';
+import {
+  gradientsToVars,
+  loadGradientsFromFile,
+  makeDefaultGradients,
+} from '../themes/slices/gradients';
 import {
   componentBaseline,
   loadComponentsFromVars,
@@ -199,12 +204,12 @@ export {
 export {
   setFontSources,
   setFontStacks,
-  seedFontsFromTheme,
+  seedFontsFromColorsAndType,
 } from '../themes/slices/fonts';
 
 export {
   setPaletteConfig,
-  seedPalettesFromTheme,
+  seedPalettesFromColorsAndType,
 } from '../themes/slices/palettes';
 
 // ── Component-config load orchestration ───────────────────────────────────
@@ -439,33 +444,44 @@ function splitAliasesAndConfig(
 }
 
 /**
- * Replace a component's slice with a loaded config file's contents. Uses
- * `mutate()` so the load is one undoable entry; updates the dirty baseline
- * so the post-load state reads clean for this component.
+ * Disk-shape config → in-memory slice, migrations included. `schemaVersion` is
+ * the stamp on the loaded file (0 for legacy files with no stamp); the runner
+ * applies any migrations between that and `CURRENT_COMPONENT_SCHEMA_VERSION`,
+ * so in-memory state is always at the current version.
  *
- * `schemaVersion` is the stamp on the loaded file (0 for legacy files
- * with no stamp). The runner applies any migrations between that and
- * `CURRENT_COMPONENT_SCHEMA_VERSION` before the slice is stored — in-memory
- * state is always at the current version.
+ * Pure: the store paths below commit the result, the theme preview renders
+ * one without committing.
+ */
+export function toComponentSlice(
+  component: string,
+  aliases: Record<string, AliasDiskValue>,
+  config?: Record<string, unknown>,
+  schemaVersion: number = 0,
+): { aliases: Record<string, CssVarRef>; config: Record<string, unknown> } {
+  const migrated = migrateComponentAliases(component, aliases, config, schemaVersion);
+  return splitAliasesAndConfig(migrated.aliases, migrated.config);
+}
+
+/**
+ * Replace a component's slice with a loaded config's contents. Uses `mutate()`
+ * so the load is one undoable entry; updates the dirty baseline so the
+ * post-load state reads clean for this component.
  */
 export function loadComponentActive(
   component: string,
-  activeFile: string,
   aliases: Record<string, AliasDiskValue>,
   config?: Record<string, unknown>,
   schemaVersion: number = 0,
 ): void {
-  const migrated = migrateComponentAliases(component, aliases, config, schemaVersion);
-  const split = splitAliasesAndConfig(migrated.aliases, migrated.config);
-  mutate(`load ${component}/${activeFile}`, (s) => {
-    s.components[component] = { activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
+  const split = toComponentSlice(component, aliases, config, schemaVersion);
+  mutate(`load ${component}`, (s) => {
+    s.components[component] = { aliases: { ...split.aliases }, config: { ...split.config } };
   });
   setSavedComponentBaseline(component, componentBaseline(split));
   notifyComponentSavedChanged();
 }
 
 export interface ComponentSeed {
-  activeFile: string;
   aliases: Record<string, AliasDiskValue>;
   config?: Record<string, unknown>;
   schemaVersion?: number;
@@ -484,9 +500,8 @@ export function seedComponentsFromApi(
   store.update((s) => {
     s.components = {};
     for (const [comp, cfg] of Object.entries(configs)) {
-      const migrated = migrateComponentAliases(comp, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
-      const split = splitAliasesAndConfig(migrated.aliases, migrated.config);
-      s.components[comp] = { activeFile: cfg.activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
+      const split = toComponentSlice(comp, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
+      s.components[comp] = { aliases: { ...split.aliases }, config: { ...split.config } };
       setSavedComponentBaseline(comp, componentBaseline(split));
     }
     return s;
@@ -495,10 +510,10 @@ export function seedComponentsFromApi(
   schedulePersist();
 }
 
-// ── Theme load / save ──────────────────────────────────────────────────────
+// ── Colors and type load / save ────────────────────────────────────────────
 
 /**
- * Per-domain loader: routes a freshly-loaded theme's `cssVariables` bag
+ * Per-domain loader: routes a freshly-loaded file's `cssVariables` bag
  * into typed state on `next`, then removes the routed entries so the
  * remainder lands as the catch-all `cssVars` bag. Each loader owns its
  * domain's parser + name list; this table is the only place editorStore
@@ -514,13 +529,14 @@ const domainLoaders: Record<string, DomainLoader> = {
 };
 
 /**
- * Replace state with a loaded theme. Clears history and marks saved —
- * "open a different document" semantics. Undo cannot cross a theme load.
+ * Project a colors-and-type file onto a fresh `EditorState` without committing
+ * it. `loadFromFile` commits the projection; the theme preview renders one
+ * without touching the store, so both paths derive vars from the same shape.
  *
- * Reads `theme.schemaVersion` (absent = 0) and runs theme migrations up to
- * `CURRENT_THEME_SCHEMA_VERSION` before splitting the bag into domains.
+ * Reads `schemaVersion` (absent = 0) and runs colors-and-type migrations up to
+ * `CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION` before splitting the bag into domains.
  */
-export function loadFromFile(theme: Theme): void {
+export function colorsAndTypeToState(colorsAndType: ColorsAndType): EditorState {
   const next = emptyState();
   // Structural palette migrations, innermost → outermost: rename Primary→Brand
   // and Background→Canvas (both key renames, so they precede anything that looks
@@ -529,38 +545,44 @@ export function loadFromFile(theme: Theme): void {
   // placement, fold a legacy background spot into the base color, then place any
   // still-unplaced anchor by base luminance. The clone is still pre-basis (hex
   // or already-numeric) on disk.
-  const raw = structuredClone(theme.editorConfigs ?? {}) as Record<string, PreOklchPaletteConfig>;
+  const raw = structuredClone(colorsAndType.editorConfigs ?? {}) as Record<string, PreOklchPaletteConfig>;
   next.palettes = placeUnplacedBaseAnchors(adoptBackgroundSpotAsBase(adoptLegacyBaseAnchor(migratePaletteColorsToOklch(unifyGrayPalettes(renameBackgroundPaletteKey(renamePrimaryPaletteKey(raw)))))));
-  next.fonts.sources = structuredClone(theme.fontSources ?? []);
-  next.fonts.stacks  = structuredClone(theme.fontStacks  ?? []);
+  next.fonts.sources = structuredClone(colorsAndType.fontSources ?? []);
+  next.fonts.stacks  = structuredClone(colorsAndType.fontStacks  ?? []);
   const rawVars = runMigrations(
-    'theme',
-    theme.schemaVersion ?? 0,
-    theme.cssVariables ?? {},
+    'colors-and-type',
+    colorsAndType.schemaVersion ?? 0,
+    colorsAndType.cssVariables ?? {},
   );
   // Route domain-owned entries out of the catch-all bag into typed state.
   // Order doesn't matter — each loader claims a disjoint set of var names
-  // (or in components' case, vars that wouldn't have been in the theme to
+  // (or in components' case, vars that wouldn't have been in the file to
   // begin with).
   for (const load of Object.values(domainLoaders)) load(next, rawVars);
-  next.harmonyAxes = sanitizeHarmonyAxes(renameBackgroundHarmonyFamily(theme.harmonyAxes), next.palettes);
+  loadGradientsFromFile(next, colorsAndType.gradients, rawVars);
+  next.harmonyAxes = sanitizeHarmonyAxes(renameBackgroundHarmonyFamily(colorsAndType.harmonyAxes), next.palettes);
   next.cssVars = rawVars;
+  return next;
+}
+
+/**
+ * Replace state with a loaded colors-and-type file. Clears history and marks
+ * saved — "open a different document" semantics. Undo cannot cross a load.
+ */
+export function loadFromFile(colorsAndType: ColorsAndType): void {
+  const next = colorsAndTypeToState(colorsAndType);
   resetHistoryForLoad();
   store.set(next);
+  markColorsAndTypeSaved(next);
   schedulePersist();
 }
 
 /**
- * Serialize current state for saving. Domains with their own typed state
- * (columns, overlays, shadows) fold derived vars into `cssVariables` only
- * when they diverge from defaults; the catch-all `cssVars` bag carries
- * everything not yet migrated to a typed domain.
- *
- * Stamps the file with `CURRENT_THEME_SCHEMA_VERSION` so future loads can
- * skip migrations the file is already past.
+ * Everything a colors-and-type file carries except its identity and timestamps.
+ * Split out of `toColorsAndType` so the dirty baseline below compares exactly
+ * what a save would write, with nothing that changes on its own between two saves.
  */
-export function toTheme(state: EditorState, meta: { name: string }): Theme {
-  const now = new Date().toISOString();
+function colorsAndTypeContent(state: EditorState): Omit<ColorsAndType, 'name' | 'createdAt' | 'updatedAt'> {
   const cssVariables: Record<string, string> = { ...state.cssVars };
   if (!columnsEqualsDefault(state.columns)) {
     Object.assign(cssVariables, columnsToVars(state.columns));
@@ -569,19 +591,59 @@ export function toTheme(state: EditorState, meta: { name: string }): Theme {
   if (state.shadows.tokens.length > 0) {
     Object.assign(cssVariables, shadowsToVars(state.shadows));
   }
+  // Rendered gradient strings ride along in cssVariables for the production
+  // CSS pipeline; the structured `gradients` field is the editable basis.
+  if (state.gradients.tokens.length > 0) {
+    Object.assign(cssVariables, gradientsToVars(state.gradients));
+  }
   return {
-    name: meta.name,
-    createdAt: now,
-    updatedAt: now,
     editorConfigs: state.palettes,
     cssVariables,
     fontSources: state.fonts.sources,
     fontStacks: state.fonts.stacks,
+    gradients: state.gradients.tokens,
     harmonyAxes: state.harmonyAxes,
-    schemaVersion: CURRENT_THEME_SCHEMA_VERSION,
+    schemaVersion: CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   };
 }
 
+/**
+ * Serialize current state for saving. Domains with their own typed state
+ * (columns, overlays, shadows) fold derived vars into `cssVariables` only
+ * when they diverge from defaults; the catch-all `cssVars` bag carries
+ * everything not yet migrated to a typed domain.
+ *
+ * Stamps the file with `CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION` so future loads
+ * can skip migrations the file is already past.
+ */
+export function toColorsAndType(state: EditorState, meta: { name: string }): ColorsAndType {
+  const now = new Date().toISOString();
+  return { name: meta.name, createdAt: now, updatedAt: now, ...colorsAndTypeContent(state) };
+}
+
+// ── Colors-and-type dirty tracking ─────────────────────────────────────────
+//
+// `dirty` counts history entries, and component edits push history too, so it
+// cannot answer whether the colors and type differ from their file. This is
+// the components slice's baseline mechanism at colors-and-type scope: the
+// serialized content of the last file read or written, compared against live
+// state.
+
+let savedColorsAndTypeContent = JSON.stringify(colorsAndTypeContent(emptyState()));
+const colorsAndTypeSavedTick = writable(0);
+
+export const colorsAndTypeDirty: Readable<boolean> = derived(
+  [store, colorsAndTypeSavedTick],
+  ([$state]) => JSON.stringify(colorsAndTypeContent($state)) !== savedColorsAndTypeContent,
+);
+
+/** Take `state` as what the colors-and-type file now holds. `loadFromFile`
+ *  passes what it loaded, `persistColorsAndType` what it wrote. */
+export function markColorsAndTypeSaved(state: EditorState): void {
+  savedColorsAndTypeContent = JSON.stringify(colorsAndTypeContent(state));
+  colorsAndTypeSavedTick.update((n) => n + 1);
+}
+
 // ── Persistence ────────────────────────────────────────────────────────────
 //
 // `schedulePersist` + `hydrate` + the eager-hydrate gate live in
@@ -604,6 +666,7 @@ export function __resetForTests(): void {
   __resetCoreForTests();
   __resetRendererCacheForTests();
   __resetComponentsForTests();
+  markColorsAndTypeSaved(emptyState());
 }
 
 // ── Wiring ─────────────────────────────────────────────────────────────────

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

@@ -110,7 +110,6 @@ export type CssVarRef =
   | { kind: 'gradient'; value: GradientAliasValue };
 
 export interface ComponentSlice {
-  activeFile: string;
   aliases: Record<string, CssVarRef>;
   config: Record<string, unknown>;
   unlinked?: string[];

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

@@ -53,7 +53,7 @@ export interface GradientSource {
 }
 
 /** Adapter for `--gradient-N` library tokens in `state.gradients.tokens`. */
-export function themeGradientSource(variable: string): GradientSource {
+export function colorsAndTypeGradientSource(variable: string): GradientSource {
   const current = derived(editorState, ($s) => {
     const t = $s.gradients.tokens.find((g) => g.variable === variable);
     if (!t) return undefined;
@@ -137,7 +137,7 @@ export function componentGradientSource(component: string, varName: string): Gra
    *  theme-gradient path. */
   const update = (label: string, mutator: (g: GradientAliasValue) => void): void => {
     mutate(label, (s) => {
-      const slice = s.components[component] ?? (s.components[component] = { activeFile: 'default', aliases: {}, config: {} });
+      const slice = s.components[component] ?? (s.components[component] = { aliases: {}, config: {} });
       const ref = slice.aliases[varName];
       // Seed the editable base from the existing gradient, or lift the current
       // flat-colour alias into one so the first edit promotes (rather than

package/src/editor/core/themes/colorsAndTypeService.ts

@@ -0,0 +1,95 @@
+import { tick } from 'svelte';
+import type { ColorsAndType, ColorsAndTypeMeta } from './themeTypes';
+import type { EditorState } from '../store/editorTypes';
+import {
+  versionedFileResource,
+  sanitizeFileName as sanitizeFileNameImpl,
+} from '../storage/files/versionedFileResourceClient';
+import { API_BASE } from '../storage/apiBase';
+import { liveMovedSinceBake } from '../productionPulse';
+import { loadFromFile as loadEditorState, toColorsAndType, markSaved, markColorsAndTypeSaved } from '../store/editorStore';
+import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
+import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
+
+// ── API helpers ──────────────────────────────────────────────
+//
+// Named colors-and-type files are presets: the user saves, loads and deletes
+// them, and nothing machine-written lands among them. The live colors and type
+// are the `_working` buffer, read back through `/colors-and-type/active`.
+
+const colorsAndTypeResource = versionedFileResource<ColorsAndType, ColorsAndTypeMeta>({
+  baseUrl: `${API_BASE}/colors-and-type`,
+});
+
+export async function listColorsAndType(): Promise<ColorsAndTypeMeta[]> {
+  const data = await colorsAndTypeResource.list();
+  return data.files;
+}
+
+export const loadColorsAndType = (fileName: string): Promise<ColorsAndType> => colorsAndTypeResource.load(fileName);
+export const saveColorsAndType = (fileName: string, data: ColorsAndType): Promise<void> =>
+  colorsAndTypeResource.save(fileName, data);
+export const deleteColorsAndType = (fileName: string): Promise<void> => colorsAndTypeResource.remove(fileName);
+
+/** The colors and type the page is running: the buffer, else the open theme's
+ *  copy, else the shipped default. `_source` says which. */
+export async function getActiveColorsAndType(): Promise<ColorsAndType | null> {
+  return colorsAndTypeResource.getActive();
+}
+
+/** Write the unsaved buffer. Absence of the buffer means "the open theme's
+ *  saved colors and type", so this is what puts the screen ahead of them. */
+export async function writeWorkingColorsAndType(data: ColorsAndType): Promise<void> {
+  const res = await fetch(`${API_BASE}/colors-and-type/working`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Write failed' }));
+    throw new Error(err.error || 'Write failed');
+  }
+  liveMovedSinceBake.set(true);
+}
+
+/** Sanitize a display name to a safe file name. Re-exported from the shared
+ * `files/versionedFileResource` so the dev-server plugin can import the
+ * canonical pure helper without depending on this module's CSS imports. */
+export const sanitizeFileName = sanitizeFileNameImpl;
+
+// ── Colors and type flush / load orchestration ─────────────
+//
+// `persistColorsAndType` and `hydrateColorsAndType` are the canonical entry
+// points for round-tripping editor state through the server. The caller —
+// `ThemePanel`, which flushes the colors and type on screen before it captures
+// or ships — handles only UI-level concerns (status flashing, error chrome).
+
+/** Flush the editor state to the buffer under `displayName`, the name of the
+ *  theme the buffer belongs to, and clear the dirty flag. A capture reads the
+ *  buffer back, so this is what makes Save and Adopt mean the look on screen. */
+export async function persistColorsAndType(
+  state: EditorState,
+  displayName: string,
+): Promise<void> {
+  await tick();
+  const colorsAndType = toColorsAndType(state, { name: displayName });
+  await writeWorkingColorsAndType(colorsAndType);
+  markSaved();
+  markColorsAndTypeSaved(state);
+}
+
+/** Load colors and type into the editor state and re-apply font side-effects
+ *  (@font-face rules + `--font-*` CSS vars on :root). */
+export function hydrateColorsAndType(colorsAndType: ColorsAndType): void {
+  migrateColorsAndTypeFonts(colorsAndType);
+  loadEditorState(colorsAndType);
+  // Font data is in state.fonts via loadEditorState; the DOM-side-effect
+  // helpers still need to run so @font-face rules and --font-* CSS vars
+  // land on :root.
+  if (colorsAndType.fontSources && colorsAndType.fontSources.length > 0) {
+    applyFontSources(colorsAndType.fontSources);
+  }
+  if (colorsAndType.fontStacks && colorsAndType.fontStacks.length > 0) {
+    applyFontStacks(colorsAndType.fontStacks, colorsAndType.fontSources ?? []);
+  }
+}