@motion-proto/live-tokens 0.6.0 → 0.6.1

package/dist-plugin/index.cjs

@@ -168,7 +168,7 @@ function themeFileApi(opts) {
     themesResource.ensureDir();
     if (!import_fs2.default.existsSync(import_path2.default.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
-        name: "Default",
+        name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
         updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
         editorConfigs: {},
@@ -369,7 +369,7 @@ ${newVars}
       }
       const now = (/* @__PURE__ */ new Date()).toISOString();
       const defaultPreset = {
-        name: "Default",
+        name: "Default Preset",
         createdAt: now,
         updatedAt: now,
         theme: themesResource.getActiveName(),
@@ -444,6 +444,7 @@ ${COMPONENT_OVERRIDES_END}
   const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
   const PRESETS_ROUTE = `${API_BASE}/presets`;
   const PRESETS_ACTIVE_ROUTE = `${API_BASE}/presets/active`;
+  const PRESETS_PRODUCTION_ROUTE = `${API_BASE}/presets/production`;
   const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
   const COMP_LIST_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)$`);
   const COMP_ACTIVE_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/active$`);
@@ -754,6 +755,73 @@ ${COMPONENT_OVERRIDES_END}
     presetsResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
+  async function handleGetProductionPreset({ res }) {
+    const prodFile = presetsResource.getProductionName();
+    const filePath = presetsResource.filePath(prodFile);
+    if (!import_fs2.default.existsSync(filePath)) {
+      jsonResponse(res, 200, {
+        fileName: prodFile,
+        name: prodFile,
+        theme: "default",
+        componentConfigs: {},
+        updatedAt: ""
+      });
+      return;
+    }
+    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    jsonResponse(res, 200, {
+      fileName: prodFile,
+      name: data.name || prodFile,
+      theme: data.theme || "default",
+      componentConfigs: data.componentConfigs || {},
+      updatedAt: data.updatedAt || ""
+    });
+  }
+  async function handleSetProductionPreset({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const presetPath = presetsResource.filePath(fileName);
+    if (!import_fs2.default.existsSync(presetPath)) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    const preset = JSON.parse(import_fs2.default.readFileSync(presetPath, "utf-8"));
+    const themeName = sanitizeFileName(preset.theme || "default");
+    if (!import_fs2.default.existsSync(themesResource.filePath(themeName))) {
+      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      return;
+    }
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = preset.componentConfigs ?? {};
+    const apply = [];
+    for (const [comp, configFile] of Object.entries(componentConfigs)) {
+      if (!knownComponents.has(comp)) continue;
+      const sanitized = sanitizeFileName(String(configFile) || "default");
+      if (!import_fs2.default.existsSync(componentResource(comp).filePath(sanitized))) {
+        jsonResponse(res, 422, {
+          error: `Preset references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      apply.push([comp, sanitized]);
+    }
+    themesResource.setProductionName(themeName);
+    for (const [comp, configFile] of apply) {
+      componentResource(comp).setProductionName(configFile);
+    }
+    presetsResource.setProductionName(fileName);
+    syncTokensToCss(themeName);
+    syncFontsToCss(themeName);
+    syncComponentsToCss();
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: preset.name || fileName,
+      theme: themeName,
+      componentConfigs: Object.fromEntries(apply),
+      updatedAt: preset.updatedAt || ""
+    });
+  }
   async function handlePresetByName({ params, req, res }) {
     const [fileName] = params;
     const filePath = presetsResource.filePath(fileName);
@@ -768,6 +836,10 @@ ${COMPONENT_OVERRIDES_END}
       return;
     }
     if (req.method === "PUT") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot overwrite the default preset" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (import_fs2.default.existsSync(filePath)) {
@@ -884,10 +956,12 @@ ${COMPONENT_OVERRIDES_END}
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Presets — list / active are exact strings, must run before regexes
+    // Presets — list / active / production are exact strings, must run before regexes
     { method: "GET", pattern: PRESETS_ROUTE, handler: handleListPresets },
     { method: "GET", pattern: PRESETS_ACTIVE_ROUTE, handler: handleGetActivePreset },
     { method: "PUT", pattern: PRESETS_ACTIVE_ROUTE, handler: handleSetActivePreset },
+    { method: "GET", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleGetProductionPreset },
+    { method: "PUT", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleSetProductionPreset },
     // Presets — :name/apply (more specific than :name)
     { method: "PUT", pattern: PRESET_APPLY_REGEX, handler: handleApplyPreset },
     { method: "POST", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },

package/dist-plugin/index.js

@@ -132,7 +132,7 @@ function themeFileApi(opts) {
     themesResource.ensureDir();
     if (!fs2.existsSync(path2.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
-        name: "Default",
+        name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
         updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
         editorConfigs: {},
@@ -333,7 +333,7 @@ ${newVars}
       }
       const now = (/* @__PURE__ */ new Date()).toISOString();
       const defaultPreset = {
-        name: "Default",
+        name: "Default Preset",
         createdAt: now,
         updatedAt: now,
         theme: themesResource.getActiveName(),
@@ -408,6 +408,7 @@ ${COMPONENT_OVERRIDES_END}
   const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
   const PRESETS_ROUTE = `${API_BASE}/presets`;
   const PRESETS_ACTIVE_ROUTE = `${API_BASE}/presets/active`;
+  const PRESETS_PRODUCTION_ROUTE = `${API_BASE}/presets/production`;
   const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
   const COMP_LIST_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)$`);
   const COMP_ACTIVE_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/active$`);
@@ -718,6 +719,73 @@ ${COMPONENT_OVERRIDES_END}
     presetsResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
+  async function handleGetProductionPreset({ res }) {
+    const prodFile = presetsResource.getProductionName();
+    const filePath = presetsResource.filePath(prodFile);
+    if (!fs2.existsSync(filePath)) {
+      jsonResponse(res, 200, {
+        fileName: prodFile,
+        name: prodFile,
+        theme: "default",
+        componentConfigs: {},
+        updatedAt: ""
+      });
+      return;
+    }
+    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    jsonResponse(res, 200, {
+      fileName: prodFile,
+      name: data.name || prodFile,
+      theme: data.theme || "default",
+      componentConfigs: data.componentConfigs || {},
+      updatedAt: data.updatedAt || ""
+    });
+  }
+  async function handleSetProductionPreset({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const presetPath = presetsResource.filePath(fileName);
+    if (!fs2.existsSync(presetPath)) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    const preset = JSON.parse(fs2.readFileSync(presetPath, "utf-8"));
+    const themeName = sanitizeFileName(preset.theme || "default");
+    if (!fs2.existsSync(themesResource.filePath(themeName))) {
+      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      return;
+    }
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = preset.componentConfigs ?? {};
+    const apply = [];
+    for (const [comp, configFile] of Object.entries(componentConfigs)) {
+      if (!knownComponents.has(comp)) continue;
+      const sanitized = sanitizeFileName(String(configFile) || "default");
+      if (!fs2.existsSync(componentResource(comp).filePath(sanitized))) {
+        jsonResponse(res, 422, {
+          error: `Preset references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      apply.push([comp, sanitized]);
+    }
+    themesResource.setProductionName(themeName);
+    for (const [comp, configFile] of apply) {
+      componentResource(comp).setProductionName(configFile);
+    }
+    presetsResource.setProductionName(fileName);
+    syncTokensToCss(themeName);
+    syncFontsToCss(themeName);
+    syncComponentsToCss();
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: preset.name || fileName,
+      theme: themeName,
+      componentConfigs: Object.fromEntries(apply),
+      updatedAt: preset.updatedAt || ""
+    });
+  }
   async function handlePresetByName({ params, req, res }) {
     const [fileName] = params;
     const filePath = presetsResource.filePath(fileName);
@@ -732,6 +800,10 @@ ${COMPONENT_OVERRIDES_END}
       return;
     }
     if (req.method === "PUT") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot overwrite the default preset" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (fs2.existsSync(filePath)) {
@@ -848,10 +920,12 @@ ${COMPONENT_OVERRIDES_END}
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Presets — list / active are exact strings, must run before regexes
+    // Presets — list / active / production are exact strings, must run before regexes
     { method: "GET", pattern: PRESETS_ROUTE, handler: handleListPresets },
     { method: "GET", pattern: PRESETS_ACTIVE_ROUTE, handler: handleGetActivePreset },
     { method: "PUT", pattern: PRESETS_ACTIVE_ROUTE, handler: handleSetActivePreset },
+    { method: "GET", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleGetProductionPreset },
+    { method: "PUT", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleSetProductionPreset },
     // Presets — :name/apply (more specific than :name)
     { method: "PUT", pattern: PRESET_APPLY_REGEX, handler: handleApplyPreset },
     { method: "POST", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [

package/src/component-editor/scaffolding/ComponentFileManager.svelte

@@ -21,6 +21,7 @@
     loadComponentActive,
     markComponentSaved,
   } from '../../lib/editorStore';
+  import { bumpProductionRevision } from '../../lib/productionPulse';
   import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../lib/migrations';
   import type { CssVarRef } from '../../lib/editorTypes';
   import { safeFetch } from '../../lib/storage';
@@ -295,6 +296,7 @@
       }
       await setComponentProductionFile(component, activeFileName);
       await refreshProduction();
+      bumpProductionRevision();
       adoptFeedback = wasDirty
         ? `Saved "${adoptingName}" and adopted`
         : `Adopted "${adoptingName}"`;
@@ -518,7 +520,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-6);
-    margin-left: auto;
+    margin-left: 2.5rem;
     height: 26px;
     padding: 0 14px;
     font-size: var(--ui-font-size-xs);

package/src/component-editor/scaffolding/SaveAsDialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import type { ComponentConfigMeta } from '../../lib/themeTypes';
   import { sanitizeFileName } from '../../lib/themeService';
   import UIDialog from '../../ui/UIDialog.svelte';
 
@@ -10,12 +9,30 @@
     show?: boolean;
     /** Display name to seed the input with when the dialog opens. */
     currentDisplayName?: string;
-    /** Existing files used by the increment helper to find the next available `_NN` suffix. */
-    files?: ComponentConfigMeta[];
+    /** Existing files used by the increment helper to find the next available `_NN` suffix.
+     *  Only `fileName` is read, so this accepts any shape with that field
+     *  (ComponentConfigMeta, PresetMeta, …). */
+    files?: { fileName: string }[];
+    /** Dialog title — defaults to "Save As". Overridable so callers can use
+     *  context-specific framing (e.g. "Save Preset As"). */
+    title?: string;
+    /** Placeholder shown in the empty input. */
+    placeholder?: string;
+    /** Error message shown when the user types the reserved "default" name.
+     *  Default copy references components; presets should override. */
+    reservedNameMessage?: string;
     onsave?: (payload: { displayName: string; fileName: string }) => void;
   }
 
-  let { show = $bindable(false), currentDisplayName = '', files = [], onsave }: Props = $props();
+  let {
+    show = $bindable(false),
+    currentDisplayName = '',
+    files = [],
+    title = 'Save As',
+    placeholder = 'Config name…',
+    reservedNameMessage = 'The name "default" is reserved for the core component definition.',
+    onsave,
+  }: Props = $props();
 
   let saveAsName = $state('');
   let saveAsInput: HTMLInputElement | undefined = $state();
@@ -73,7 +90,7 @@
     const trimmed = saveAsName.trim();
     if (!trimmed) return '';
     if (sanitizeFileName(trimmed) === 'default') {
-      return 'The name "default" is reserved for the core component definition.';
+      return reservedNameMessage;
     }
     return '';
   })());
@@ -81,7 +98,7 @@
 
 <UIDialog
   bind:show
-  title="Save As"
+  {title}
   cancelLabel="Cancel"
   confirmLabel="Save"
   confirmDisabled={!saveAsName.trim() || !!saveAsError}
@@ -97,7 +114,7 @@
         bind:value={saveAsName}
         bind:this={saveAsInput}
         onkeydown={handleKeydown}
-        placeholder="Config name…"
+        {placeholder}
       />
       <button
         type="button"

package/src/lib/ColumnsOverlay.svelte

@@ -104,7 +104,7 @@
 
   .columns-overlay__info {
     position: fixed;
-    left: 12px;
+    right: 12px;
     bottom: 12px;
     display: inline-flex;
     align-items: center;

package/src/lib/componentPersist.ts

@@ -0,0 +1,65 @@
+import { get } from 'svelte/store';
+import type { ComponentConfig } from './themeTypes';
+import { editorState, markComponentSaved } from './editorStore';
+import type { CssVarRef } from './editorTypes';
+import { CURRENT_COMPONENT_SCHEMA_VERSION } from './migrations';
+import {
+  listComponentConfigs,
+  saveComponentConfig,
+  setActiveComponentFile,
+} from './componentConfigService';
+
+/**
+ * Save the current in-memory state of a component to its active file. Mirrors
+ * the `persist` flow inside `ComponentFileManager.svelte` so callers without a
+ * file-manager instance (e.g. the unsaved-components dialog in PresetFileManager)
+ * can save a dirty component without duplicating the schema-version + aliases
+ * stringification logic.
+ *
+ * Refuses to overwrite `default` — that's the protected source-derived snapshot.
+ * Callers that hit `{ ok: false, reason: 'default' }` should prompt for a new
+ * name and re-route to a Save-As flow.
+ */
+export type SaveActiveComponentResult =
+  | { ok: true; fileName: string; displayName: string }
+  | { ok: false; reason: 'default' | 'no-state' | 'error'; error?: unknown };
+
+function refToString(ref: CssVarRef): string {
+  return ref.kind === 'token' ? ref.name : ref.value;
+}
+
+export async function saveActiveComponentConfig(
+  component: string,
+): Promise<SaveActiveComponentResult> {
+  const slice = get(editorState).components[component];
+  if (!slice) return { ok: false, reason: 'no-state' };
+
+  try {
+    const list = await listComponentConfigs(component);
+    const fileName = list.activeFile;
+    if (fileName === 'default') return { ok: false, reason: 'default' };
+
+    const active = list.files.find((f) => f.fileName === fileName);
+    const displayName = active?.name ?? fileName;
+
+    const now = new Date().toISOString();
+    const aliases: Record<string, string> = {};
+    for (const [k, ref] of Object.entries(slice.aliases)) aliases[k] = refToString(ref);
+
+    const data: ComponentConfig = {
+      name: displayName,
+      component,
+      createdAt: now,
+      updatedAt: now,
+      aliases,
+      config: { ...slice.config },
+      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
+    };
+    await saveComponentConfig(component, fileName, data);
+    await setActiveComponentFile(component, fileName);
+    markComponentSaved(component);
+    return { ok: true, fileName, displayName };
+  } catch (error) {
+    return { ok: false, reason: 'error', error };
+  }
+}

package/src/lib/presetService.ts

@@ -1,7 +1,7 @@
 import type { Preset, PresetMeta, Theme, ComponentConfig } from './themeTypes';
 import { versionedFileResource } from './files/versionedFileResource';
 import { listComponents } from './componentConfigService';
-import { getActiveTheme } from './themeService';
+import { getActiveTheme, getProductionInfo } from './themeService';
 
 /**
  * REST client for preset (bundle) manifest files. Each preset file references
@@ -92,3 +92,123 @@ export async function captureCurrentAsPreset(
   await savePreset(fileName, manifest);
   await setActivePreset(fileName);
 }
+
+// ── Production preset ──────────────────────────────────────────────────────
+//
+// The production preset is the manifest whose references describe what
+// tokens.css + the component overrides block currently encode. A separate
+// pointer (`presets/_production.json`) from the active preset lets the editor
+// run experiments without disturbing what end users see. Applying a preset to
+// production flips every per-artifact `_production.json` pointer to match the
+// manifest and re-bakes css.
+
+export interface PresetProductionInfo {
+  fileName: string;
+  name: string;
+  theme: string;
+  componentConfigs: Record<string, string>;
+  updatedAt: string;
+}
+
+export async function getProductionPreset(): Promise<PresetProductionInfo | null> {
+  try {
+    const res = await fetch('/api/presets/production');
+    if (!res.ok) return null;
+    return res.json();
+  } catch {
+    return null;
+  }
+}
+
+export async function applyPresetToProduction(fileName: string): Promise<PresetProductionInfo> {
+  const res = await fetch('/api/presets/production', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: fileName }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Apply to production failed' }));
+    throw new Error(err.error || 'Apply to production failed');
+  }
+  return res.json();
+}
+
+/**
+ * Snapshot whatever each artifact's `_production.json` currently points at
+ * into a new preset manifest. Recovery path when individual component Adopts
+ * have drifted production away from the production preset and the user wants
+ * to preserve that state under a name rather than re-converge to a preset.
+ *
+ * Does NOT flip `presets/_production.json` — the new preset's references
+ * already match production by construction, but tagging it as the production
+ * preset is a separate UX decision left to the caller.
+ */
+export async function captureProductionAsPreset(
+  fileName: string,
+  displayName: string,
+): Promise<void> {
+  const themeInfo = await getProductionInfo();
+  const components = await listComponents();
+  const componentConfigs: Record<string, string> = {};
+  for (const c of components) {
+    componentConfigs[c.name] = c.productionFile || 'default';
+  }
+  const now = new Date().toISOString();
+  const manifest: Preset = {
+    name: displayName,
+    createdAt: now,
+    updatedAt: now,
+    theme: themeInfo.fileName,
+    componentConfigs,
+  };
+  await savePreset(fileName, manifest);
+}
+
+/**
+ * Three states comparing the active preset against current production:
+ *   - 'in-production' — active preset IS the production preset AND every
+ *      manifest reference matches the per-artifact production pointer.
+ *   - 'editor-only'   — the production preset is a different preset; applying
+ *      this one would flip pointers.
+ *   - 'diverged'      — this IS the production preset, but per-artifact
+ *      production has drifted (individual component Adopt clicks since the
+ *      last apply). Two recovery paths: re-apply to converge, or capture
+ *      production as a new preset to name the divergence.
+ */
+export type ProductionPresetStatus = 'in-production' | 'editor-only' | 'diverged';
+
+export interface ProductionComparison {
+  status: ProductionPresetStatus;
+  productionPreset: PresetProductionInfo | null;
+  themeDrift: boolean;
+  driftedComponents: string[];
+}
+
+export async function compareActiveToProduction(
+  activePreset: Preset,
+): Promise<ProductionComparison> {
+  const [productionPreset, themeInfo, components] = await Promise.all([
+    getProductionPreset(),
+    getProductionInfo(),
+    listComponents(),
+  ]);
+  const componentProdMap = new Map(components.map((c) => [c.name, c.productionFile]));
+  const themeDrift = themeInfo.fileName !== activePreset.theme;
+  const driftedComponents: string[] = [];
+  for (const [comp, file] of Object.entries(activePreset.componentConfigs)) {
+    const prod = componentProdMap.get(comp);
+    if (prod !== file) driftedComponents.push(comp);
+  }
+  const manifestMatches = !themeDrift && driftedComponents.length === 0;
+  const activeFile = activePreset._fileName;
+  const isActiveProductionPreset =
+    !!activeFile && !!productionPreset && productionPreset.fileName === activeFile;
+
+  let status: ProductionPresetStatus;
+  if (!isActiveProductionPreset) {
+    status = 'editor-only';
+  } else {
+    status = manifestMatches ? 'in-production' : 'diverged';
+  }
+  return { status, productionPreset, themeDrift, driftedComponents };
+}

package/src/lib/productionPulse.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+import type { ProductionInfo } from './themeService';
+import type { ProductionComparison } from './presetService';
+
+/**
+ * Monotonic counter that ticks every time a production pointer flips —
+ * theme production, a component's production, or a preset applied to
+ * production. UI surfaces that compare against current production state
+ * (notably `PresetFileManager`) subscribe to this so an Adopt click in a
+ * sibling manager refreshes their derived status without per-pair wiring.
+ *
+ * Bumpers: `ThemeFileManager.handleApplyToProduction`,
+ * `ComponentFileManager.handleUpdateProduction`,
+ * `presetService.applyPresetToProduction` (called from `PresetFileManager`).
+ * Anyone setting `_production.json` should bump.
+ */
+export const productionRevision = writable(0);
+
+export function bumpProductionRevision(): void {
+  productionRevision.update((n) => n + 1);
+}
+
+/**
+ * Cached production-state stores. The Theme and Preset 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.
+ */
+export const themeProductionInfo = writable<ProductionInfo | null>(null);
+export const presetProductionComparison = writable<ProductionComparison | null>(null);

package/src/pages/ComponentEditorPage.svelte

@@ -8,6 +8,7 @@
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
+  import { componentDirty } from '../lib/editorStore';
   // Editor chrome + form controls + icon font must be JS imports (not @import
   // inside the style block) so Vite resolves them via the module graph
   // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
@@ -149,12 +150,16 @@
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
+          class:dirty={$componentDirty[item.id]}
           onmouseenter={(e) => showHint(item.label, e.currentTarget)}
           onmouseleave={hideHint}
           onclick={() => selectComponent(item.id)}
         >
           <i class={item.icon}></i>
           <span class="rail-label">{item.label}</span>
+          {#if $componentDirty[item.id]}
+            <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+          {/if}
         </button>
       {/each}
     </div>
@@ -334,6 +339,7 @@
   }
 
   .nav-item {
+    position: relative;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
@@ -369,6 +375,25 @@
     opacity: 0.85;
   }
 
+  /* Amber dot indicating unsaved changes. Anchored to the top-right of the
+     icon column so it stays visible whether the rail is collapsed (icon-only)
+     or expanded (icon + label). */
+  .dirty-dot {
+    position: absolute;
+    top: 8px;
+    left: 30px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    box-shadow: 0 0 0 2px black;
+    pointer-events: none;
+  }
+
+  .nav-item.dirty {
+    color: var(--ui-text-secondary);
+  }
+
   .content {
     padding: 0 var(--ui-space-32);
     background: black;