@motion-proto/live-tokens 0.94.0 → 0.94.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.94.1 — Adopt after a save
+
+### Fixed
+
+- **Adopt stays available after you save the production theme.** Saving the
+  theme production ships leaves `tokens.generated.css` behind until the next
+  Adopt. The editor knew that only in memory, so a reload or a theme load
+  showed "in production" and disabled Adopt over a stale bake. Each bake now
+  records a fingerprint of what it rendered. The production read reports
+  `_baked: false` when a fresh render of the saved theme would differ, and the
+  Theme panel and component bars read "out of sync" until Adopt runs.
+- **The Theme panel's Active name stays inside its card.** The pill counted
+  its padding outside its width and ran past the sidebar edge. A long theme
+  name now ends in an ellipsis.
+
 ## 0.94.0 — Tokens-view swatch swap and copy-paste
 
 ### Added

package/dist-plugin/index.cjs

@@ -39,6 +39,7 @@ module.exports = __toCommonJS(index_exports);
 
 // vite-plugin/themeFileApi.ts
 var import_fs5 = __toESM(require("fs"), 1);
+var import_crypto = require("crypto");
 var import_path5 = __toESM(require("path"), 1);
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
@@ -5243,11 +5244,8 @@ function themeFileApi(opts) {
     }
     return out;
   }
-  function regenerateTokensCss() {
+  function renderTokensCss() {
     const lines = [];
-    lines.push("/* Generated by themeFileApi from the production theme. Do not edit. */");
-    lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
-    lines.push("");
     const productionThemeName = themesResource.getProductionName();
     const productionTheme = readTheme(productionThemeName)?.theme ?? null;
     if (themesResource.existingPath(productionThemeName) !== null && !productionTheme?.colorsAndType) {
@@ -5322,14 +5320,40 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
+    return { body: lines.join("\n"), colorsAndTypeVarCount, componentOverrideCount };
+  }
+  const bakeFingerprint = (body) => (0, import_crypto.createHash)("sha256").update(body).digest("hex").slice(0, 16);
+  const BAKE_FINGERPRINT_LINE = /^\/\* Bake fingerprint: ([0-9a-f]+) \*\/$/m;
+  function regenerateTokensCss() {
+    const { body, colorsAndTypeVarCount, componentOverrideCount } = renderTokensCss();
+    const header = [
+      "/* Generated by themeFileApi from the production theme. Do not edit. */",
+      "/* tokens.css holds developer-authored defaults; this file holds editor overrides. */",
+      `/* Bake fingerprint: ${bakeFingerprint(body)} */`,
+      ""
+    ];
     if (!import_fs5.default.existsSync(import_path5.default.dirname(GENERATED_CSS_PATH))) {
       import_fs5.default.mkdirSync(import_path5.default.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    import_fs5.default.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    import_fs5.default.writeFileSync(GENERATED_CSS_PATH, [...header, body].join("\n"));
     console.log(
       `[regenerateTokensCss] Wrote ${import_path5.default.basename(GENERATED_CSS_PATH)} (${colorsAndTypeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
+  function bakeIsCurrent() {
+    let baked;
+    try {
+      baked = import_fs5.default.readFileSync(GENERATED_CSS_PATH, "utf-8");
+    } catch {
+      return false;
+    }
+    const recorded = BAKE_FINGERPRINT_LINE.exec(baked)?.[1];
+    try {
+      return recorded === bakeFingerprint(renderTokensCss().body);
+    } catch {
+      return false;
+    }
+  }
   function syncFontsToCss(colorsAndTypeData) {
     if (!colorsAndTypeData) return;
     const sources = colorsAndTypeData.fontSources;
@@ -6025,7 +6049,7 @@ ${lines.join("\n")}
       respondUnreadableTheme(res, fileName, "Production theme not found");
       return;
     }
-    jsonResponse(res, 200, { ...read.theme, _fileName: fileName });
+    jsonResponse(res, 200, { ...read.theme, _fileName: fileName, _baked: bakeIsCurrent() });
   }
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();

package/dist-plugin/index.js

@@ -37,6 +37,7 @@ import {
 
 // vite-plugin/themeFileApi.ts
 import fs2 from "fs";
+import { createHash } from "crypto";
 import path3 from "path";
 
 // src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts
@@ -445,11 +446,8 @@ function themeFileApi(opts) {
     }
     return out;
   }
-  function regenerateTokensCss() {
+  function renderTokensCss() {
     const lines = [];
-    lines.push("/* Generated by themeFileApi from the production theme. Do not edit. */");
-    lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
-    lines.push("");
     const productionThemeName = themesResource.getProductionName();
     const productionTheme = readTheme(productionThemeName)?.theme ?? null;
     if (themesResource.existingPath(productionThemeName) !== null && !productionTheme?.colorsAndType) {
@@ -524,14 +522,40 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
+    return { body: lines.join("\n"), colorsAndTypeVarCount, componentOverrideCount };
+  }
+  const bakeFingerprint = (body) => createHash("sha256").update(body).digest("hex").slice(0, 16);
+  const BAKE_FINGERPRINT_LINE = /^\/\* Bake fingerprint: ([0-9a-f]+) \*\/$/m;
+  function regenerateTokensCss() {
+    const { body, colorsAndTypeVarCount, componentOverrideCount } = renderTokensCss();
+    const header = [
+      "/* Generated by themeFileApi from the production theme. Do not edit. */",
+      "/* tokens.css holds developer-authored defaults; this file holds editor overrides. */",
+      `/* Bake fingerprint: ${bakeFingerprint(body)} */`,
+      ""
+    ];
     if (!fs2.existsSync(path3.dirname(GENERATED_CSS_PATH))) {
       fs2.mkdirSync(path3.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    fs2.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    fs2.writeFileSync(GENERATED_CSS_PATH, [...header, body].join("\n"));
     console.log(
       `[regenerateTokensCss] Wrote ${path3.basename(GENERATED_CSS_PATH)} (${colorsAndTypeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
+  function bakeIsCurrent() {
+    let baked;
+    try {
+      baked = fs2.readFileSync(GENERATED_CSS_PATH, "utf-8");
+    } catch {
+      return false;
+    }
+    const recorded = BAKE_FINGERPRINT_LINE.exec(baked)?.[1];
+    try {
+      return recorded === bakeFingerprint(renderTokensCss().body);
+    } catch {
+      return false;
+    }
+  }
   function syncFontsToCss(colorsAndTypeData) {
     if (!colorsAndTypeData) return;
     const sources = colorsAndTypeData.fontSources;
@@ -1227,7 +1251,7 @@ ${lines.join("\n")}
       respondUnreadableTheme(res, fileName, "Production theme not found");
       return;
     }
-    jsonResponse(res, 200, { ...read.theme, _fileName: fileName });
+    jsonResponse(res, 200, { ...read.theme, _fileName: fileName, _baked: bakeIsCurrent() });
   }
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();

package/package.json

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

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

@@ -23,20 +23,19 @@
   } from '../../core/store/editorStore';
   import {
     bumpComponentActiveRevision,
-    bumpProductionRevision,
-    liveMovedSinceBake,
+    liveUnsaved,
     productionRevision,
     productionTheme,
   } from '../../core/productionPulse';
   import {
     adoptTheme,
     getActiveTheme,
-    getProductionTheme,
     listThemes,
     saveActiveTheme,
     saveAsTheme,
   } from '../../core/themes/themeService';
   import type { ThemeMeta } from '../../core/themes/themeTypes';
+  import { themeProductionState } from '../../core/themes/themeSummary';
   import { safeFetch } from '../../core/storage/storage';
   import { API_BASE } from '../../core/storage/apiBase';
   import { flashStatus } from '../../core/flashStatus';
@@ -101,7 +100,11 @@
   // still the published one, so only the shared signal can say the config on
   // screen is not what production runs.
   let isApplied = $derived(
-    productionDoc !== null && productionDoc === editorDoc && !compDirty && !$liveMovedSinceBake,
+    themeProductionState({
+      openTheme: editorDoc,
+      production: $productionTheme,
+      unsaved: compDirty || $liveUnsaved,
+    }).inProduction,
   );
   let resetDirty = $derived(!!resetVariables && compDirty);
 
@@ -124,20 +127,9 @@
     }
   }
 
-  async function refreshProduction() {
-    // Preserve the last answer on a transient failure rather than clobbering
-    // the store to null, which would read as "production unknown".
-    try {
-      productionTheme.set(await getProductionTheme());
-    } catch {
-      // silent
-    }
-  }
-
   onMount(async () => {
     await refreshFiles();
     await refreshLive();
-    await refreshProduction();
     window.addEventListener('keydown', handleKeydown);
   });
 
@@ -262,8 +254,6 @@
       if (wasDirty) await persist();
       await saveActiveTheme();
       await adoptTheme();
-      await refreshProduction();
-      bumpProductionRevision();
       adoptFeedback = wasDirty
         ? `Saved "${adoptingName}" and adopted`
         : `Adopted "${adoptingName}"`;

package/src/editor/core/components/componentConfigService.ts

@@ -2,7 +2,7 @@ import type { ComponentConfig, ComponentConfigMeta, LiveSource } from '../themes
 import type { EditorState } from '../store/editorTypes';
 import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
 import { API_BASE } from '../storage/apiBase';
-import { liveMovedSinceBake } from '../productionPulse';
+import { liveUnsaved } from '../productionPulse';
 import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../themes/migrations';
 import { refToDiskValue } from '../store/cssVarRef';
 
@@ -98,5 +98,5 @@ export async function writeWorkingComponentConfig(
     const err = await res.json().catch(() => ({ error: 'Write failed' }));
     throw new Error(err.error || 'Write failed');
   }
-  liveMovedSinceBake.set(true);
+  liveUnsaved.set(true);
 }

package/src/editor/core/productionPulse.ts

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { API_BASE } from './storage/apiBase';
 import type { Theme } from './themes/themeTypes';
 
 /**
@@ -6,7 +7,7 @@ import type { Theme } from './themes/themeTypes';
  * surfaces that need to react to a sibling Adopt subscribe to this so they
  * refresh without per-pair wiring.
  *
- * Bumpers: `ThemePanel.runAdopt`, `ComponentFileManager.handleAdopt`.
+ * Bumped by `adoptTheme`, the one door every Adopt goes through.
  */
 export const productionRevision = writable(0);
 
@@ -28,27 +29,59 @@ export function bumpComponentActiveRevision(): void {
 }
 
 /**
- * The live theme 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.
+ * The live state holds changes the open theme's file does not: a buffer
+ * written, or a sketch gesture that changes what the effect paints. Saving
+ * clears it, because a save captures the live state into the file. Whether that
+ * file has reached production since is the server's answer, carried on
+ * `productionTheme._baked`, so this flag never stands in for it.
  *
- * Set by the client writes that move the live theme (`writeWorkingColorsAndType`,
- * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`, and every
- * sketch gesture that changes what the effect paints: `setSketchEnabled`,
- * `updateSketchSettings`, `selectSketchStyle`);
- * cleared by `adoptTheme` and by `hydrateAppliedTheme`, on this document and on
- * every peer an Apply broadcasts to. Module-level, so it survives the
- * remounts a view switch causes.
+ * Set by the client writes that move the live state (`writeWorkingColorsAndType`,
+ * `writeWorkingComponentConfig`, and every sketch gesture that changes what the
+ * effect paints: `setSketchEnabled`, `updateSketchSettings`, `selectSketchStyle`);
+ * cleared by `saveActiveTheme` and `saveAsTheme`; recomputed from the server's layer sources by
+ * `hydrateAppliedTheme`, on this document and on every peer an Apply broadcasts
+ * to. Module-level, so it survives the remounts a view switch causes.
  */
-export const liveMovedSinceBake = writable(false);
+export const liveUnsaved = writable(false);
+
+/** The published theme, served whole so the client can tell what production
+ *  runs from the document itself. */
+export async function getProductionTheme(): Promise<Theme> {
+  const res = await fetch(`${API_BASE}/themes/production`);
+  if (!res.ok) throw new Error('Failed to read the production theme');
+  return res.json();
+}
+
+const PRODUCTION_RETRY_MS = 3000;
+let latestProductionRead = 0;
+let pendingRetry: ReturnType<typeof setTimeout> | undefined;
 
 /**
- * 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
+ * Last-read production theme, `_baked` included. Every surface renders from
+ * this store and none reads the server itself. The first subscriber starts a
+ * read; after that, the writes that can move the answer refresh it: `saveTheme`,
+ * `adoptTheme`, and a live-state frame from an outside writer.
+ *
+ * Module-level, so a remount renders the last answer on its first frame
  * instead of flashing through "not in sync" while a fresh fetch resolves.
  */
-export const productionTheme = writable<Theme | null>(null);
+export const productionTheme = writable<Theme | null>(null, () => {
+  void refreshProductionTheme();
+});
+
+/** Re-read the production theme into `productionTheme`. Never throws: a failed
+ *  read keeps the last answer and retries once, since nothing else asks again
+ *  until the next write. A newer read supersedes a pending retry. */
+export async function refreshProductionTheme(retry = true): Promise<void> {
+  clearTimeout(pendingRetry);
+  const read = ++latestProductionRead;
+  try {
+    const theme = await getProductionTheme();
+    // Reads can land out of order; only the latest one speaks for the server.
+    if (read === latestProductionRead) productionTheme.set(theme);
+  } catch {
+    if (retry && read === latestProductionRead) {
+      pendingRetry = setTimeout(() => void refreshProductionTheme(false), PRODUCTION_RETRY_MS);
+    }
+  }
+}

package/src/editor/core/sketch/sketchStore.ts

@@ -14,7 +14,7 @@ import {
   setSketchScope,
   sketchLayerInstalled,
 } from './sketchLayer';
-import { liveMovedSinceBake } from '../productionPulse';
+import { liveUnsaved } from '../productionPulse';
 import {
   deleteSketchStyle,
   listSketchStyles,
@@ -171,7 +171,7 @@ export function liveSketchSettings(): SketchStyleSettings | undefined {
     made a sketch decision the same as any other control does. */
 export function setSketchEnabled(enabled: boolean): void {
   markSketchTouched();
-  if (enabled !== get(sketchEnabled)) liveMovedSinceBake.set(true);
+  if (enabled !== get(sketchEnabled)) liveUnsaved.set(true);
   sketchEnabled.set(enabled);
 }
 
@@ -236,7 +236,7 @@ export function selectUnsavedSketchStyle(): void {
   const style = get(themeSketchSettings);
   if (!style) return;
   markSketchTouched();
-  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
+  if (get(sketchEnabled)) liveUnsaved.set(true);
   selectedSketchStyleId.set(THEME_SKETCH_ID);
   sketchBaseline.set({ ...style });
   sketchSettings.set({ ...style });
@@ -262,7 +262,7 @@ export function selectSketchStyle(id: string): void {
   const style = sketchStyleById(id);
   if (!style) return;
   markSketchTouched();
-  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
+  if (get(sketchEnabled)) liveUnsaved.set(true);
   selectedSketchStyleId.set(id);
   sketchBaseline.set({ ...style.settings });
   sketchSettings.set({ ...style.settings });
@@ -356,7 +356,7 @@ export async function deleteSavedSketchStyle(fileName: string): Promise<void> {
     the drift. Save writes a new sketchstyle rather than overwriting the base. */
 export function updateSketchSettings(patch: Partial<SketchStyleSettings>): void {
   markSketchTouched();
-  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
+  if (get(sketchEnabled)) liveUnsaved.set(true);
   sketchSettings.update((s) => ({ ...s, ...patch }));
 }
 

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

@@ -6,7 +6,7 @@ import {
   sanitizeFileName as sanitizeFileNameImpl,
 } from '../storage/files/versionedFileResourceClient';
 import { API_BASE } from '../storage/apiBase';
-import { liveMovedSinceBake } from '../productionPulse';
+import { liveUnsaved } from '../productionPulse';
 import { loadFromFile as loadEditorState, toColorsAndType, markSaved, markColorsAndTypeSaved } from '../store/editorStore';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 
@@ -48,7 +48,7 @@ export async function writeWorkingColorsAndType(data: ColorsAndType): Promise<vo
     const err = await res.json().catch(() => ({ error: 'Write failed' }));
     throw new Error(err.error || 'Write failed');
   }
-  liveMovedSinceBake.set(true);
+  liveUnsaved.set(true);
 }
 
 /** Sanitize a display name to a safe file name. Re-exported from the shared

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

@@ -1,4 +1,5 @@
 import { API_BASE } from '../storage/apiBase';
+import { refreshProductionTheme } from '../productionPulse';
 import { hydrateAppliedTheme } from './themeDocumentSync';
 import type { LiveState } from './themeService';
 
@@ -9,7 +10,9 @@ let source: EventSource | null = null;
 /**
  * Follow the dev server's live state. A buffer or the active pointer written
  * from outside the page (a CLI verb, a branch switch) arrives as one frame,
- * and this document hydrates from it the way it does from an Apply.
+ * and this document hydrates from it the way it does from an Apply. An outside
+ * writer can also save the production theme past its bake (`save-theme` into
+ * the open, published theme), so production is re-read too.
  */
 export function init(): void {
   if (source || typeof EventSource === 'undefined') return;
@@ -17,6 +20,7 @@ export function init(): void {
   source.addEventListener(LIVE_STATE_EVENT, (event) => {
     const state = JSON.parse((event as MessageEvent<string>).data) as LiveState;
     hydrateAppliedTheme(state.fileName, state);
+    void refreshProductionTheme();
   });
 }
 

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

@@ -1,4 +1,4 @@
-import { liveMovedSinceBake } from '../productionPulse';
+import { liveUnsaved } from '../productionPulse';
 import { openThemeSlug } from '../store/editorConfigStore';
 import { loadThemeFromApi } from '../store/editorStore';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
@@ -55,7 +55,7 @@ export function hydrateAppliedTheme(fileName: string, result: LiveState): void {
   );
   openThemeSlug.set(fileName);
   openThemeSketchSettings(result.theme.sketchSettings);
-  liveMovedSinceBake.set(hasUnsavedLayer(result));
+  liveUnsaved.set(hasUnsavedLayer(result));
   if (typeof document !== 'undefined') {
     document.dispatchEvent(new CustomEvent<AppliedThemeDetail>(THEME_APPLIED_EVENT, {
       detail: { fileName, result },

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

@@ -1,7 +1,11 @@
 import type { Theme, ThemeMeta, ThemeBundle, ColorsAndType, ComponentConfig, ThemeFillReport } from './themeTypes';
 import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
 import { API_BASE } from '../storage/apiBase';
-import { liveMovedSinceBake } from '../productionPulse';
+import {
+  bumpProductionRevision,
+  liveUnsaved,
+  refreshProductionTheme,
+} from '../productionPulse';
 import { listComponents, getActiveComponentConfig } from '../components/componentConfigService';
 import { getActiveColorsAndType } from './colorsAndTypeService';
 import { broadcastAppliedTheme, hydrateAppliedTheme } from './themeDocumentSync';
@@ -33,21 +37,21 @@ export const listThemes = async (): Promise<ThemeMeta[]> => {
 
 export const loadTheme = (fileName: string): Promise<Theme> =>
   themesResource.load(fileName);
-export const saveTheme = (fileName: string, data: Theme): Promise<void> =>
-  themesResource.save(fileName, data);
+
+/** Every theme write goes through here. A write can move the production theme
+ *  past its bake, which only the server can tell, so this re-reads production. */
+export async function saveTheme(fileName: string, data: Theme): Promise<void> {
+  await themesResource.save(fileName, data);
+  await refreshProductionTheme();
+}
+
 export const deleteTheme = (fileName: string): Promise<void> =>
   themesResource.remove(fileName);
 export const getActiveTheme = (): Promise<Theme | null> => themesResource.getActive();
 export const setActiveTheme = (fileName: string): Promise<void> =>
   themesResource.setActive(fileName);
 
-/** The published theme, served whole so the client can tell what production
- *  runs from the document itself. */
-export async function getProductionTheme(): Promise<Theme> {
-  const res = await fetch(`${API_BASE}/themes/production`);
-  if (!res.ok) throw new Error('Failed to read the production theme');
-  return res.json();
-}
+export { getProductionTheme } from '../productionPulse';
 
 /** Step past the theme names already on disk rather than clobbering one. */
 export function freshName(base: string, taken: Set<string>): string {
@@ -116,7 +120,8 @@ export interface AdoptThemeResult {
  * the server has not been handed is invisible from here.
  *
  * Answers 409 `ACTIVE_IS_PROTECTED` while the Default theme is open, which the
- * caller recovers from by forking it under a name of the user's own.
+ * caller recovers from by forking it under a name of the user's own. On success
+ * it re-reads production and ticks `productionRevision`, so no caller does either.
  */
 export async function adoptTheme(): Promise<AdoptThemeResult> {
   const res = await fetch(`${API_BASE}/production`, { method: 'PUT' });
@@ -130,8 +135,10 @@ export async function adoptTheme(): Promise<AdoptThemeResult> {
     if (body.code) err.code = body.code;
     throw err;
   }
-  liveMovedSinceBake.set(false);
-  return res.json();
+  const result = await res.json() as AdoptThemeResult;
+  await refreshProductionTheme();
+  bumpProductionRevision();
+  return result;
 }
 
 /** `_fileName` and `_source` mark which document and which layer a read door
@@ -189,8 +196,8 @@ export async function saveAsTheme(
     ...content,
   });
   themeSketchSettings.set(content.sketchSettings);
-  liveMovedSinceBake.set(true);
   await setActiveTheme(fileName);
+  liveUnsaved.set(false);
 }
 
 /**
@@ -213,7 +220,7 @@ export async function saveActiveTheme(displayName?: string): Promise<void> {
     ...content,
   });
   themeSketchSettings.set(content.sketchSettings);
-  liveMovedSinceBake.set(true);
+  liveUnsaved.set(false);
 }
 
 export interface ImportThemeResult {

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

@@ -1,13 +1,13 @@
 import type { ComponentSummary } from '../components/componentConfigService';
+import type { Theme } from './themeTypes';
 
 export interface ThemeProductionInput {
   /** Slug of the theme the editor has open. */
   openTheme: string;
-  /** Slug of the published theme, or null while the read has not landed. */
-  productionTheme: string | null;
-  /** Live theme moved past what the published theme holds: unsaved edits, or a
-   *  save since the last Adopt. */
-  unpublished: boolean;
+  /** The production read, or null while it has not landed. */
+  production: Pick<Theme, '_fileName' | '_baked'> | null;
+  /** The live state holds changes the open theme's file does not. */
+  unsaved: boolean;
 }
 
 export interface ThemeProductionState {
@@ -17,15 +17,16 @@ export interface ThemeProductionState {
   unknown: boolean;
   /** True when production ships a theme other than the open one. */
   themeOff: boolean;
-  /** True when the open theme has moved since it was published. */
+  /** True when the live state is ahead of what production ships: unsaved
+   *  changes, or a save the bake has not seen. */
   unpublished: boolean;
 }
 
 /**
  * Whether production is running the theme on screen. Production is one saved
  * theme, so the first half is an identity check against the open one; the
- * second half is the live theme sitting ahead of what was published, which
- * `unpublished` carries.
+ * second half is the live theme sitting ahead of what was published: unsaved
+ * changes, or a saved theme the server reports the bake has not caught up with.
  *
  * A null production read is not an answer, so it is neither state: `unknown`
  * says so and `inProduction` stays false. Callers render that as its own
@@ -34,11 +35,12 @@ export interface ThemeProductionState {
  */
 export function themeProductionState({
   openTheme,
-  productionTheme,
-  unpublished,
+  production,
+  unsaved,
 }: ThemeProductionInput): ThemeProductionState {
-  const unknown = productionTheme === null;
-  const themeOff = !unknown && productionTheme !== openTheme;
+  const unknown = production === null;
+  const themeOff = !unknown && production._fileName !== openTheme;
+  const unpublished = unsaved || (!unknown && production._baked !== true);
   return {
     unknown,
     themeOff,

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

@@ -288,6 +288,9 @@ export interface Theme {
   sketchSettings?: SketchStyleSettings;
   /** Server-attached file-name marker. Same role as `ColorsAndType._fileName`. */
   _fileName?: string;
+  /** Server-attached on the production read only: `tokens.generated.css` holds
+   *  this theme as saved, so Adopt would change nothing. */
+  _baked?: boolean;
 }
 
 /**

package/src/editor/ui/ThemePanel.svelte

@@ -12,7 +12,6 @@
     listThemes,
     deleteTheme,
     getActiveTheme,
-    getProductionTheme,
     loadTheme,
     applyTheme,
     adoptTheme,
@@ -62,8 +61,7 @@
   import {
     componentActiveRevision,
     productionRevision,
-    bumpProductionRevision,
-    liveMovedSinceBake,
+    liveUnsaved,
     productionTheme,
     bumpComponentActiveRevision,
   } from '../core/productionPulse';
@@ -120,26 +118,6 @@
     }
   }
 
-  // A read that never lands leaves the production state unknown, and the panel
-  // has nothing else that asks on its own between pulses. One delayed retry is
-  // the way out of it.
-  const PRODUCTION_RETRY_MS = 3000;
-  let productionRetry: ReturnType<typeof setTimeout> | undefined;
-
-  async function refreshProduction(retry = true) {
-    try {
-      productionTheme.set(await getProductionTheme());
-    } catch {
-      if (retry) productionRetry = setTimeout(() => refreshProduction(false), PRODUCTION_RETRY_MS);
-    }
-  }
-
-  // The store it writes outlives the panel, so a pending retry has to go with
-  // the panel rather than land on a later mount's state.
-  onDestroy(() => {
-    if (productionRetry !== undefined) clearTimeout(productionRetry);
-  });
-
   // ── Components ────────────────────────────────────────────────────────
   //
   // The per-component file managers live in the component editors; the list
@@ -170,7 +148,6 @@
   onMount(async () => {
     await refreshFiles();
     await refreshActive();
-    await refreshProduction();
   });
 
   // A consumer can load a theme from the host while this iframe stays open.
@@ -186,9 +163,9 @@
   });
 
   // Re-read whenever an Adopt fires, here or in a component editor: it saves
-  // the open theme and moves the production pointer, so the identity, the
-  // component summary and the production state shown here all need to track.
-  // Skip the first tick (mount ran them already).
+  // the open theme and can fork it, so the identity, the file list and the
+  // component summary shown here all need to track. The production state rides
+  // on its own store. Skip the first tick (mount ran them already).
   let pulseInitialised = false;
   $effect(() => {
     void $productionRevision;
@@ -197,7 +174,6 @@
       return;
     }
     refreshActive();
-    refreshProduction();
     refreshFiles();
     refreshComponents();
   });
@@ -305,8 +281,8 @@
   let production = $derived(
     themeProductionState({
       openTheme: $openThemeSlug,
-      productionTheme: $productionTheme?._fileName ?? null,
-      unpublished: unsavedEdits || $liveMovedSinceBake,
+      production: $productionTheme,
+      unsaved: unsavedEdits || $liveUnsaved,
     }),
   );
 
@@ -341,9 +317,6 @@
         await saveActiveTheme(currentDisplayName);
       }
       await adoptTheme();
-      // The panel's own production pulse re-reads identity, the production
-      // theme and the component summary.
-      bumpProductionRevision();
       flashStatus(setAdoptStatus, 'done');
     } catch {
       flashStatus(setAdoptStatus, 'error', { durationMs: 3000 });
@@ -496,13 +469,12 @@
         await refreshActive();
       }
       await adoptTheme();
-      bumpProductionRevision();
       flashStatus(setAdoptStatus, 'done');
     } catch (err) {
       window.alert(`Theme loaded, but could not be adopted: ${(err as Error).message}`);
       flashStatus(setAdoptStatus, 'error', { durationMs: 3000 });
     }
-    await Promise.all([refreshFiles(), refreshComponents(), refreshProduction()]);
+    await Promise.all([refreshFiles(), refreshComponents()]);
   }
 
   /**
@@ -1009,6 +981,7 @@
   }
 
   .theme-name-trigger :global(.file-pill) {
+    box-sizing: border-box;
     width: 100%;
   }
 

package/src/live-tokens/data/tokens.generated.css

@@ -1,5 +1,6 @@
 /* Generated by themeFileApi from the production theme. Do not edit. */
 /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
+/* Bake fingerprint: 2c683a9cbf8a9e66 */
 
 /* Production theme: default */
 :root:root {