@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/lib/editorStore.ts

@@ -0,0 +1,412 @@
+/**
+ * Central editor state store — the single mutation funnel.
+ *
+ * All editor state (palettes, fonts, shadows, overlays, columns, ad-hoc CSS
+ * vars) lives in one `EditorState` tree. Every change must go through
+ * `mutate` (or a transaction). History is captured automatically; the
+ * renderer subscribes and writes derived CSS vars to :root via `cssVarSync`
+ * (which fans out to the parent document for the overlay iframe).
+ *
+ * This module is now a barrel: it re-exports the public API from
+ *  - `editorCore` (history machine + transaction/session primitives)
+ *  - `slices/*` (per-domain factories + actions)
+ *  - `editorRenderer` (DOM subscriber)
+ *  - `editorPersistence` (debounced localStorage)
+ *
+ * Component-config + theme migrations live in `./migrations` (Wave 4).
+ * `loadComponentActive` / `seedComponentsFromApi` / `loadFromFile` / `toTheme`
+ * orchestrate across slices and stay here.
+ */
+
+import type { CssVarRef, EditorState } from './editorTypes';
+import type { Theme } from './themeTypes';
+import { KNOWN_COMPONENT_CONFIG_KEYS } from './componentConfigKeys';
+import {
+  CURRENT_THEME_SCHEMA_VERSION,
+  CURRENT_COMPONENT_SCHEMA_VERSION,
+  runMigrations,
+} from './migrations';
+import { renamePrimaryPaletteKey } from './migrations/2026-05-13-primary-to-brand';
+import { __resetRendererCacheForTests, installRenderer } from './editorRenderer';
+import {
+  store,
+  mutate,
+  setEmptyStateFactory as setCoreEmptyStateFactory,
+  setPersistHook,
+  resetHistoryForLoad,
+  __resetCoreForTests,
+} from './editorCore';
+import {
+  schedulePersist,
+  setEmptyStateFactory as setPersistenceEmptyStateFactory,
+  ensureHydrated,
+  initializeEditorStore,
+} from './editorPersistence';
+import {
+  DEFAULT_COLUMNS,
+  columnsEqualsDefault,
+  columnsToVars,
+  loadColumnsFromVars,
+} from './slices/columns';
+import {
+  loadOverlaysFromVars,
+  makeDefaultOverlaysState,
+  overlaysEqualsDefault,
+  overlaysToVars,
+} from './slices/overlays';
+import {
+  loadShadowsFromVars,
+  shadowsToVars,
+} from './slices/shadows';
+import { makeDefaultGradients } from './slices/gradients';
+import {
+  componentBaseline,
+  loadComponentsFromVars,
+  notifyComponentSavedChanged,
+  setSavedComponentBaseline,
+  __resetComponentsForTests,
+} from './slices/components';
+
+function emptyState(): EditorState {
+  return {
+    palettes: {},
+    fonts: { sources: [], stacks: [] },
+    shadows: {
+      globals: {
+        angle: 90, opacityMin: 0.15, opacityMax: 0.15, opacityLocked: true,
+        distanceMin: 1, distanceMax: 25,
+        blurMin: 2, blurMax: 50, blurLocked: false,
+        sizeMin: 0, sizeMax: 0, sizeLocked: true,
+        hue: 0, saturation: 0, lightness: 0,
+      },
+      tokens: [],
+      overrides: {},
+    },
+    overlays: makeDefaultOverlaysState(),
+    columns: { ...DEFAULT_COLUMNS },
+    components: {},
+    gradients: { tokens: makeDefaultGradients() },
+    cssVars: {},
+  };
+}
+
+// ── editorCore re-exports ─────────────────────────────────────────────────
+
+export {
+  editorState,
+  mutate,
+  transaction,
+  beginScope,
+  commitScope,
+  cancelScope,
+  beginSliderGesture,
+  undo,
+  redo,
+  canUndo,
+  canRedo,
+  dirty,
+  markSaved,
+  __getHistoryLengths,
+  __getPastAt,
+} from './editorCore';
+export type { Scope } from './editorCore';
+
+// Wire the factory in both editorCore and editorPersistence. Resetting the
+// store lands a proper EditorState before any helper below runs `mutate`.
+setCoreEmptyStateFactory(emptyState);
+setPersistenceEmptyStateFactory(emptyState);
+store.set(emptyState());
+
+// ── Slice re-exports ──────────────────────────────────────────────────────
+
+export {
+  DOMAIN_VAR_NAMES,
+} from './slices/domainVars';
+
+export {
+  columnsToVars,
+  columnsEqualsDefault,
+  COLUMN_VAR_NAMES,
+  DEFAULT_COLUMNS,
+  parseColumnVars,
+} from './slices/columns';
+
+export {
+  overlaysToVars,
+  overlaysEqualsDefault,
+  OVERLAY_VAR_NAMES,
+  applyOverlayVarsToState,
+  makeDefaultOverlaysState,
+  overlayTokenToRgba,
+  parseRgba,
+  RGBA_RE,
+  HEX_RE,
+} from './slices/overlays';
+
+export {
+  shadowsToVars,
+  applyShadowVarsToState,
+  SHADOW_VAR_NAMES,
+  SCALE_SHADOW_VARIABLES,
+  computeShadowXY,
+  shadowTokenCss,
+  defaultShadowOverride,
+  parseShadowCss,
+  seedShadowsFromDom,
+} from './slices/shadows';
+
+export {
+  gradientsToVars,
+  makeDefaultGradients,
+  setGradient,
+  setGradientType,
+  setGradientAngle,
+  setGradientStop,
+  addGradientStop,
+  removeGradientStop,
+  addGradientToken,
+  removeGradientToken,
+} from './slices/gradients';
+
+export {
+  componentsToVars,
+  getComponentOwnedVarNames,
+  componentDirty,
+  setComponentAlias,
+  clearComponentAlias,
+  setComponentConfig,
+  clearComponentConfig,
+  registerComponentSchema,
+  getComponentPropertySiblings,
+  isComponentPropertyLinked,
+  setComponentAliasLinked,
+  clearComponentAliasLinked,
+  unlinkComponentProperty,
+  relinkComponentProperty,
+  markComponentSaved,
+} from './slices/components';
+
+export {
+  setFontSources,
+  setFontStacks,
+  seedFontsFromTheme,
+} from './slices/fonts';
+
+export {
+  setPaletteConfig,
+  seedPalettesFromTheme,
+} from './slices/palettes';
+
+// ── Component-config load orchestration ───────────────────────────────────
+//
+// Component-config migrations now live in `./migrations` (Wave 4): the
+// migration runner pipes `aliases` through any registered transforms whose
+// `fromVersion >= file.schemaVersion`, then `splitAliasesAndConfig` routes
+// literal-valued knobs (per `KNOWN_COMPONENT_CONFIG_KEYS`) into the config
+// bucket and wraps the remainder as `CssVarRef` discriminated unions.
+
+function migrateComponentAliases(
+  component: string,
+  aliases: Record<string, string>,
+  fileVersion: number,
+): Record<string, string> {
+  return runMigrations('component-config', fileVersion, aliases, { component });
+}
+
+/**
+ * Disk-shape → in-memory split. Routes legacy single-bucket aliases that
+ * carry literal-valued knobs (per `KNOWN_COMPONENT_CONFIG_KEYS`) into the
+ * config bucket, and wraps the remainder as `CssVarRef` discriminated unions.
+ */
+function splitAliasesAndConfig(
+  rawAliases: Record<string, string>,
+  rawConfig: Record<string, unknown> | undefined,
+): { aliases: Record<string, CssVarRef>; config: Record<string, unknown> } {
+  const aliases: Record<string, CssVarRef> = {};
+  const config: Record<string, unknown> = { ...(rawConfig ?? {}) };
+  for (const [key, value] of Object.entries(rawAliases)) {
+    if (KNOWN_COMPONENT_CONFIG_KEYS.has(key)) {
+      if (config[key] === undefined) config[key] = value;
+      continue;
+    }
+    aliases[key] = value.startsWith('--')
+      ? { kind: 'token', name: value }
+      : { kind: 'literal', value };
+  }
+  return { aliases, config };
+}
+
+/**
+ * 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.
+ *
+ * `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.
+ */
+export function loadComponentActive(
+  component: string,
+  activeFile: string,
+  aliases: Record<string, string>,
+  config?: Record<string, unknown>,
+  schemaVersion: number = 0,
+): void {
+  const migrated = migrateComponentAliases(component, aliases, schemaVersion);
+  const split = splitAliasesAndConfig(migrated, config);
+  mutate(`load ${component}/${activeFile}`, (s) => {
+    s.components[component] = { activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
+  });
+  setSavedComponentBaseline(component, componentBaseline(split));
+  notifyComponentSavedChanged();
+}
+
+export interface ComponentSeed {
+  activeFile: string;
+  aliases: Record<string, string>;
+  config?: Record<string, unknown>;
+  schemaVersion?: number;
+}
+
+/**
+ * Boot-path hydration from the server's /api/component-configs fetch. No
+ * history entry, no dirty flag — components are clean relative to disk.
+ *
+ * Each seed may carry a `schemaVersion`; absent entries are treated as 0
+ * and migrated up to current.
+ */
+export function seedComponentsFromApi(
+  configs: Record<string, ComponentSeed>,
+): void {
+  store.update((s) => {
+    s.components = {};
+    for (const [comp, cfg] of Object.entries(configs)) {
+      const migrated = migrateComponentAliases(comp, cfg.aliases, cfg.schemaVersion ?? 0);
+      const split = splitAliasesAndConfig(migrated, cfg.config);
+      s.components[comp] = { activeFile: cfg.activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
+      setSavedComponentBaseline(comp, componentBaseline(split));
+    }
+    return s;
+  });
+  notifyComponentSavedChanged();
+  schedulePersist();
+}
+
+// ── Theme load / save ──────────────────────────────────────────────────────
+
+/**
+ * Per-domain loader: routes a freshly-loaded theme'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
+ * needs to know about the per-slice loading contract.
+ */
+type DomainLoader = (next: EditorState, rawVars: Record<string, string>) => void;
+
+const domainLoaders: Record<string, DomainLoader> = {
+  columns: loadColumnsFromVars,
+  overlays: loadOverlaysFromVars,
+  shadows: loadShadowsFromVars,
+  components: loadComponentsFromVars,
+};
+
+/**
+ * Replace state with a loaded theme. Clears history and marks saved —
+ * "open a different document" semantics. Undo cannot cross a theme load.
+ *
+ * Reads `theme.schemaVersion` (absent = 0) and runs theme migrations up to
+ * `CURRENT_THEME_SCHEMA_VERSION` before splitting the bag into domains.
+ */
+export function loadFromFile(theme: Theme): void {
+  const next = emptyState();
+  next.palettes = renamePrimaryPaletteKey(structuredClone(theme.editorConfigs ?? {}));
+  next.fonts.sources = structuredClone(theme.fontSources ?? []);
+  next.fonts.stacks  = structuredClone(theme.fontStacks  ?? []);
+  const rawVars = runMigrations(
+    'theme',
+    theme.schemaVersion ?? 0,
+    theme.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
+  // begin with).
+  for (const load of Object.values(domainLoaders)) load(next, rawVars);
+  next.cssVars = rawVars;
+  resetHistoryForLoad();
+  store.set(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.
+ */
+export function toTheme(state: EditorState, meta: { name: string }): Theme {
+  const now = new Date().toISOString();
+  const cssVariables: Record<string, string> = { ...state.cssVars };
+  if (!columnsEqualsDefault(state.columns)) {
+    Object.assign(cssVariables, columnsToVars(state.columns));
+  }
+  if (!overlaysEqualsDefault(state.overlays)) {
+    Object.assign(cssVariables, overlaysToVars(state.overlays));
+  }
+  if (state.shadows.tokens.length > 0) {
+    Object.assign(cssVariables, shadowsToVars(state.shadows));
+  }
+  return {
+    name: meta.name,
+    createdAt: now,
+    updatedAt: now,
+    editorConfigs: state.palettes,
+    cssVariables,
+    fontSources: state.fonts.sources,
+    fontStacks: state.fonts.stacks,
+    schemaVersion: CURRENT_THEME_SCHEMA_VERSION,
+  };
+}
+
+// ── Persistence ────────────────────────────────────────────────────────────
+//
+// `schedulePersist` + `hydrate` + the eager-hydrate gate live in
+// `./editorPersistence`. The barrel re-exports `initializeEditorStore` for
+// API parity.
+
+export { initializeEditorStore };
+/** Idempotent host hook — call once during boot. Alias for `initializeEditorStore`
+ *  matching the `module.init()` convention used by `cssVarSync` / `router` /
+ *  `columnsOverlay` so `main.ts` can call them uniformly. */
+export const init = initializeEditorStore;
+
+// ── Test-only reset ────────────────────────────────────────────────────────
+
+/**
+ * Test-only: clear all history + transient session/transaction state and
+ * reset the store to `emptyState()`. Not exported from the public barrel.
+ */
+export function __resetForTests(): void {
+  __resetCoreForTests();
+  __resetRendererCacheForTests();
+  __resetComponentsForTests();
+}
+
+// ── Wiring ─────────────────────────────────────────────────────────────────
+//
+// `setPersistHook(schedulePersist)` lets editorCore's mutate/undo/redo
+// debounce-persist through the same path. `ensureHydrated()` runs the
+// eager localStorage load (pre-Svelte-mount so children see persisted
+// state in onMount). `installRenderer()` runs the `store.subscribe(...)`
+// wiring legacy `import '.../editorStore'` paths depended on; it must run
+// *after* this module's exports are initialized — the renderer imports
+// `editorState` back from editorCore, and calling it earlier would TDZ
+// because of the circular import.
+setPersistHook(schedulePersist);
+ensureHydrated();
+export { deriveCssVars } from './editorRenderer';
+installRenderer();

package/src/lib/editorTypes.ts

@@ -0,0 +1,100 @@
+import type { PaletteConfig, FontSource, FontStack } from './themeTypes';
+
+export interface ShadowGlobals {
+  angle: number;
+  opacityMin: number; opacityMax: number; opacityLocked: boolean;
+  distanceMin: number; distanceMax: number;
+  blurMin: number; blurMax: number; blurLocked: boolean;
+  sizeMin: number; sizeMax: number; sizeLocked: boolean;
+  hue: number; saturation: number; lightness: number;
+}
+
+export interface ShadowToken {
+  variable: string;
+  x: number; y: number; blur: number; spread: number;
+  opacity: number; hue: number; saturation: number; lightness: number;
+  angle: number; distance: number;
+}
+
+export interface ShadowOverrideFlags {
+  angle: boolean; opacity: boolean; color: boolean;
+  distance: boolean; blur: boolean; size: boolean;
+}
+
+export interface OverlayToken {
+  variable: string; label: string;
+  r: number; g: number; b: number; opacity: number;
+}
+
+export interface OverlayChannelGlobals {
+  hue: number; saturation: number; lightness: number;
+  opacityMin: number; opacityMax: number;
+}
+
+export interface OverlayGlobals {
+  overlay: OverlayChannelGlobals;
+  hover: OverlayChannelGlobals;
+}
+
+export interface ColumnsState {
+  count: number;
+  maxWidth: number;
+  gutter: number;
+  margin: number;
+}
+
+export type CssVarRef =
+  | { kind: 'token'; name: string }
+  | { kind: 'literal'; value: string };
+
+export interface ComponentSlice {
+  activeFile: string;
+  aliases: Record<string, CssVarRef>;
+  config: Record<string, unknown>;
+  unlinked?: string[];
+}
+
+export type GradientType = 'linear' | 'radial';
+
+export interface GradientTokenStop {
+  /** 0–100 percentage along the gradient axis. */
+  position: number;
+  /** CSS variable name the stop resolves through (e.g. '--color-brand-500'). */
+  color: string;
+  /** 0–100 alpha applied to the stop's color. Defaults to 100 (fully opaque). */
+  opacity?: number;
+}
+
+export interface GradientToken {
+  /** Output CSS variable, e.g. '--gradient-1'. */
+  variable: string;
+  type: GradientType;
+  /** Degrees, applies to linear only. */
+  angle: number;
+  stops: GradientTokenStop[];
+}
+
+/**
+ * Single source of truth for everything a saved token file depends on, plus
+ * the domain state currently scattered across VariablesTab local `let` fields.
+ * View state (tab selection, dialog flags, drag payloads, editing drafts)
+ * stays out of this tree.
+ */
+export interface EditorState {
+  palettes: Record<string, PaletteConfig>;
+  fonts: { sources: FontSource[]; stacks: FontStack[] };
+  shadows: {
+    globals: ShadowGlobals;
+    tokens: ShadowToken[];
+    overrides: Record<string, ShadowOverrideFlags>;
+  };
+  overlays: {
+    tokens: OverlayToken[];
+    hoverTokens: OverlayToken[];
+    globals: OverlayGlobals;
+  };
+  columns: ColumnsState;
+  components: Record<string, ComponentSlice>;
+  gradients: { tokens: GradientToken[] };
+  cssVars: Record<string, string>;
+}

package/src/lib/editorViewStore.ts

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+
+export type EditorView = 'tokens' | 'components';
+export type SidebarCondensed = boolean | 'auto';
+
+const VIEW_KEY = 'lt.editorView';
+const CONDENSED_KEY = 'lt.sidebarCondensed';
+
+function readView(): EditorView {
+  try {
+    const v = localStorage.getItem(VIEW_KEY);
+    if (v === 'components' || v === 'tokens') return v;
+  } catch {}
+  return 'tokens';
+}
+
+function readCondensed(): SidebarCondensed {
+  try {
+    const v = localStorage.getItem(CONDENSED_KEY);
+    if (v === 'true') return true;
+    if (v === 'false') return false;
+  } catch {}
+  return 'auto';
+}
+
+export const editorView = writable<EditorView>(readView());
+export const sidebarCondensed = writable<SidebarCondensed>(readCondensed());
+export const selectedComponent = writable<string>('button');
+
+editorView.subscribe((v) => {
+  try { localStorage.setItem(VIEW_KEY, v); } catch {}
+});
+
+sidebarCondensed.subscribe((v) => {
+  try { localStorage.setItem(CONDENSED_KEY, v === 'auto' ? 'auto' : String(v)); } catch {}
+});
+
+// Cross-window sync: parent and overlay iframe share localStorage but each have
+// their own module state. `storage` events fire in the *other* window when one
+// writes, so we mirror the new value into this window's store.
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (e) => {
+    if (e.key === VIEW_KEY) {
+      if (e.newValue === 'tokens' || e.newValue === 'components') editorView.set(e.newValue);
+    } else if (e.key === CONDENSED_KEY) {
+      if (e.newValue === 'true') sidebarCondensed.set(true);
+      else if (e.newValue === 'false') sidebarCondensed.set(false);
+      else if (e.newValue === 'auto') sidebarCondensed.set('auto');
+    }
+  });
+}
+
+export function setEditorView(v: EditorView) {
+  editorView.set(v);
+}

package/src/lib/files/versionedFileResource.ts

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ *
+ * `themeService.ts` and `componentConfigService.ts` previously reimplemented
+ * the same fetch shape. They now both consume `versionedFileResource(...)`
+ * with their resource-specific URL.
+ *
+ * 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/themes` or `/api/component-configs/button`. */
+  baseUrl: string;
+}
+
+export interface VersionedFileResourceClient<TItem, TMeta, TProductionInfo> {
+  list(): Promise<{ files: TMeta[]; activeFile?: string; productionFile?: string }>;
+  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 }>;
+}
+
+/**
+ * Build a CRUD client bound to a single resource root. All routes follow the
+ * same shape:
+ *   GET    {base}                         → list
+ *   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
+ *
+ * Generic over the payload types so theme & component-config can share the
+ * same plumbing while keeping their own response/info shapes.
+ */
+export function versionedFileResource<TItem, TMeta, TProductionInfo>(
+  opts: VersionedFileResourceClientOptions,
+): VersionedFileResourceClient<TItem, TMeta, TProductionInfo> {
+  const { baseUrl } = opts;
+
+  async function readJsonError(res: Response, fallback: string): Promise<string> {
+    const err = await res.json().catch(() => ({ error: fallback }));
+    return err.error || fallback;
+  }
+
+  async function list(): Promise<{ files: TMeta[]; activeFile?: string; productionFile?: string }> {
+    const res = await fetch(baseUrl);
+    if (!res.ok) throw new Error(`Failed to list ${baseUrl}`);
+    return res.json();
+  }
+
+  async function load(fileName: string): Promise<TItem> {
+    const res = await fetch(`${baseUrl}/${encodeURIComponent(fileName)}`);
+    if (!res.ok) throw new Error(`Failed to load: ${fileName}`);
+    return res.json();
+  }
+
+  async function save(fileName: string, data: TItem): Promise<void> {
+    const res = await fetch(`${baseUrl}/${encodeURIComponent(fileName)}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) {
+      throw new Error(await readJsonError(res, 'Save failed'));
+    }
+  }
+
+  async function remove(fileName: string): Promise<void> {
+    const res = await fetch(`${baseUrl}/${encodeURIComponent(fileName)}`, {
+      method: 'DELETE',
+    });
+    if (!res.ok) {
+      throw new Error(await readJsonError(res, 'Delete failed'));
+    }
+  }
+
+  async function getActive(): Promise<TItem | null> {
+    try {
+      const res = await fetch(`${baseUrl}/active`);
+      if (!res.ok) return null;
+      return res.json();
+    } catch {
+      return null;
+    }
+  }
+
+  async function setActive(fileName: string): Promise<void> {
+    const res = await fetch(`${baseUrl}/active`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: fileName }),
+    });
+    if (!res.ok) {
+      throw new Error(await readJsonError(res, 'Set active failed'));
+    }
+  }
+
+  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) {
+      throw new Error(await readJsonError(res, 'Set production failed'));
+    }
+    return res.json();
+  }
+
+  return { list, load, save, remove, getActive, setActive, getProductionInfo, setProduction };
+}
+
+/** Sanitize a display name to a safe file name. Pure — no DOM, no fs. */
+export function sanitizeFileName(name: string): string {
+  return (
+    name
+      .toLowerCase()
+      .trim()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9\-_]/g, '')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '') || 'unnamed'
+  );
+}