@motion-proto/live-tokens 0.93.0 → 0.94.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # 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
+
+- **The Tokens view swaps two palettes' base colors by drag and drop.** Drop
+  one family's header swatch on another's and the two trade seed colors in one
+  undo step. A swap with a functional family leaves any harmony axis on the
+  family that held it, and the axis follows the new hue.
+- **Every Tokens-view swatch copies and pastes its color.** Click a header,
+  palette step, or override swatch open, and ⌘C (Ctrl+C) copies its color as
+  `oklch()` text. ⌘V (Ctrl+V) pastes a hex or `oklch()` color into the open
+  swatch, inside its edit session, so Cancel takes the paste back.
+
+### Fixed
+
+- **Pasting a swatch color needs no clipboard permission.** Paste reads the
+  browser's paste event, so Chrome no longer asks for clipboard access and
+  Safari no longer shows its Paste confirmation before ⌘V lands.
+
 ## 0.93.0 — 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.93.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/PaletteEditor.svelte

@@ -30,9 +30,16 @@
   import { editorState, mutate, setPaletteConfig, beginSliderGesture, beginScope, commitScope, cancelScope, type Scope } from '../core/store/editorStore';
   // Base-color edits route through the shared setter so a bound harmony axis
   // follows the hue (invariant 1); the local `edit` would silently detach it.
-  import { setBaseColor } from './colors/paletteBaseColor';
+  import { setBaseColor, swapBaseColors } from './colors/paletteBaseColor';
   import { pendingPaletteFocus } from '../core/store/paletteFocus';
   import { showCopyPopover } from './copyPopover';
+  import {
+    activeSwatchFamily,
+    isSwatchCopy,
+    swatchPasteColor,
+    copySwatchColor,
+    showSwatchColor,
+  } from './swatchClipboard';
 
   // Full sRGB chroma range (gamutClamp trims per hue/lightness). Neutrals default
   // low but are not capped; their calm character comes from defaults, not a ceiling.
@@ -565,6 +572,29 @@
     if (!panelOpen || isEditingBase || !editingColor) return;
     dock = { title: editPanelTitle, color: editingColor, paletteIndex: editingPaletteIndex };
   });
+  $effect(() => {
+    if (editingKey !== null) activeSwatchFamily.set(label);
+  });
+
+  let ownsClipboard = $derived($activeSwatchFamily === label && editingKey !== null);
+  let openSwatchEl = $derived(rootEl?.querySelector(`[data-swatch-key="${editingKey}"]`) ?? null);
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (!ownsClipboard || !isSwatchCopy(e)) return;
+    e.preventDefault();
+    copySwatchColor(editing.kind === 'editingStep' ? editing.draft : baseColor, openSwatchEl);
+  }
+
+  // Paste lands in the open session like a slider edit: Cancel takes it back.
+  function onWindowPaste(e: ClipboardEvent) {
+    const color = ownsClipboard ? swatchPasteColor(e) : null;
+    if (color === null) return;
+    e.preventDefault();
+    if (isEditingBase) setBaseColor(label, color);
+    else handleColorChange(color);
+    showSwatchColor(color, openSwatchEl);
+  }
+
   $effect(() => {
     // Touch each input so the effect tracks them (resnapScales reads indirectly).
     void baseColor;
@@ -595,6 +625,8 @@
   {/if}
 {/snippet}
 
+<svelte:window onkeydown={onWindowKeydown} onpaste={onWindowPaste} />
+
 <div class="palette-editor" bind:this={rootEl} style="--editor-base: {toHex(baseColor)}">
   <PaletteBase
     {label}
@@ -606,6 +638,7 @@
     {copiedKey}
     onStartEdit={startBaseEdit}
     onCopyBaseHex={copyHex}
+    onSwapFrom={(family) => swapBaseColors(family, label)}
   >
     {#snippet setting()}
       <!-- The family's own swatch and name sit alongside, so the label drops
@@ -687,6 +720,7 @@
               class:anchored={ps.anchored}
               title={ps.anchored ? 'Base color' : undefined}
               style="background: {ps.effective}"
+              data-swatch-key={ps.key}
               onclick={() => handlePaletteClick(ps)}
               role="button"
               tabindex="0"

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/editor/ui/colors/ColorsTab.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { cubicOut } from 'svelte/easing';
-  import { cssColorToOklch, oklchToCss, oklchToHexClamped } from '../../core/palettes/oklch';
+  import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture } from '../../core/store/editorStore';
-  import { isEditable } from '../../core/store/editorKeybindings';
   import { selectedPalette } from '../../core/store/paletteFocus';
   import { applyHarmonyToAxes, axisStatuses, HARMONY_ELIGIBLE, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import AxisNumeral from './AxisNumeral.svelte';
@@ -14,7 +13,7 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
-  import { showCopyPopover } from '../copyPopover';
+  import { isSwatchCopy, swatchPasteColor, copySwatchColor, showSwatchColor } from '../swatchClipboard';
   import {
     setBaseColor,
     setAxisHues,
@@ -157,31 +156,21 @@
   // Copy and paste act on the selected swatch, never the focused one: Safari
   // and macOS Firefox do not focus a button on click.
   function onWindowKeydown(e: KeyboardEvent) {
-    if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;
-    if (e.target instanceof HTMLElement && isEditable(e.target)) return;
-    const sw = swatches.find((s) => s.label === selected);
-    if (!sw) return;
-    const key = e.key.toLowerCase();
-    if (key === 'c') {
-      // Selected page text keeps the browser's own copy.
-      if (window.getSelection()?.isCollapsed === false) return;
-      e.preventDefault();
-      const css = oklchToCss(sw.color.l, sw.color.c, sw.color.h);
-      navigator.clipboard?.writeText(css);
-      showCopyPopover(css, swatchEls[sw.label]);
-    } else if (key === 'v') {
-      e.preventDefault();
-      pasteInto(sw, swatchEls[sw.label]);
-    }
+    const sw = selectedSwatch;
+    if (!sw || !isSwatchCopy(e)) return;
+    e.preventDefault();
+    copySwatchColor(sw.color, swatchEls[sw.label]);
   }
 
-  async function pasteInto(sw: Swatch, anchor: EventTarget | null) {
-    const color = cssColorToOklch(await navigator.clipboard.readText());
-    if (!color) return;
+  function onWindowPaste(e: ClipboardEvent) {
+    const sw = selectedSwatch;
+    const color = sw ? swatchPasteColor(e) : null;
+    if (!sw || color === null) return;
+    e.preventDefault();
     // A bound color drags its axis along, so an applied harmony no longer holds.
     if (sw.axis && color.h !== sw.color.h) activeMode = 'custom';
     setBaseColor(sw.label, color);
-    showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+    showSwatchColor(color, swatchEls[sw.label]);
   }
 
   let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
@@ -204,6 +193,8 @@
 
   type Swatch = (typeof swatches)[number];
 
+  let selectedSwatch = $derived(swatches.find((s) => s.label === selected));
+
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
   // Declaration order, never a computed one: sorting by luminance made the row
   // reshuffle under the pointer while a lightness edit was in flight.
@@ -229,7 +220,7 @@
   }
 </script>
 
-<svelte:window onkeydown={onWindowKeydown} />
+<svelte:window onkeydown={onWindowKeydown} onpaste={onWindowPaste} />
 
 <div class="colors-tab">
   <div class="pane">

package/src/editor/ui/colors/paletteBaseColor.ts

@@ -19,7 +19,7 @@
 
 import { get } from 'svelte/store';
 import type { Oklch } from '../../core/palettes/oklch';
-import { axisLabel } from '../../core/palettes/colorHarmony';
+import { axisLabel, HARMONY_ELIGIBLE } from '../../core/palettes/colorHarmony';
 import { PALETTE_SPECS, syncBaseAnchor, type PaletteSpec } from '../../core/palettes/paletteDerivation';
 import { defaultPaletteConfig } from '../palette/paletteMath';
 import { mutate, transaction, editorState } from '../../core/store/editorStore';
@@ -208,8 +208,10 @@ function giveAxisHue(s: EditorState, index: number, family: string): boolean {
   return false;
 }
 
-/** Two families trade seed colors. Each axis binding travels with the color it
- *  held, so every axis keeps its hue and an applied harmony stays true. */
+/** Two families trade seed colors. Between two families an axis can hold, each
+ *  binding travels with its color, so every axis keeps its hue and an applied
+ *  harmony stays true. Otherwise a bound family keeps its axis, which follows
+ *  the new hue as it does on any direct color edit. */
 export function swapBaseColors(a: string, b: string): void {
   if (a === b) return;
   mutate(`colors: swap ${a} and ${b}`, (s) => {
@@ -218,9 +220,14 @@ export function swapBaseColors(a: string, b: string): void {
     [ca.baseColor, cb.baseColor] = [cb.baseColor, ca.baseColor];
     syncBaseAnchor(ca);
     syncBaseAnchor(cb);
-    for (const axis of s.harmonyAxes) {
-      if (axis.family === a) axis.family = b;
-      else if (axis.family === b) axis.family = a;
+    if (HARMONY_ELIGIBLE.includes(a) && HARMONY_ELIGIBLE.includes(b)) {
+      for (const axis of s.harmonyAxes) {
+        if (axis.family === a) axis.family = b;
+        else if (axis.family === b) axis.family = a;
+      }
+    } else {
+      syncBoundAxisHue(s, a);
+      syncBoundAxisHue(s, b);
     }
   });
 }

package/src/editor/ui/palette/OverridesPanel.svelte

@@ -180,6 +180,7 @@
             class:active={editingKey === k}
             class:populated={k in overrides}
             class:matching={k in overrides && overrides[k] === dHex}
+            data-swatch-key={k}
             onclick={() => onOverrideClick(k, step, scale.title)}
             role="button"
             tabindex="0"
@@ -212,6 +213,7 @@
               class:active={editingKey === k || snapPickerKey === k}
               class:populated={k in overrides}
               class:matching={k in overrides && overrides[k] === dHex}
+              data-swatch-key={k}
               onclick={() => snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title)}
               role="button"
               tabindex="0"

package/src/editor/ui/palette/PaletteBase.svelte

@@ -1,6 +1,14 @@
+<script module lang="ts">
+  // Every family's header reads one drag source, because dataTransfer data is
+  // unreadable during dragover.
+  let swapSource: string | null = null;
+  const SWAP_DRAG_TYPE = 'application/x-palette-family';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { oklchToHexClamped, type Oklch } from '../../core/palettes/oklch';
+  import { BASE_KEY } from './paletteEditorState';
 
   interface Props {
     /**
@@ -20,6 +28,8 @@
     copiedKey: string | null;
     onStartEdit: () => void;
     onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
+    /** Another family's header swatch dropped on this one. */
+    onSwapFrom: (family: string) => void;
     actions?: Snippet;
     /** A family-level setting, shown beside the name while this family's
      *  editor is open. Collapsed families keep the band to identity + actions. */
@@ -36,10 +46,34 @@
     copiedKey,
     onStartEdit,
     onCopyBaseHex,
+    onSwapFrom,
     actions,
     setting
   }: Props = $props();
 
+  let swapHover = $state(false);
+
+  function onDragStart(e: DragEvent) {
+    if (!e.dataTransfer) return;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(SWAP_DRAG_TYPE, label);
+    swapSource = label;
+  }
+
+  function onDragOver(e: DragEvent) {
+    if (swapSource === null || swapSource === label) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    swapHover = true;
+  }
+
+  function onDrop(e: DragEvent) {
+    swapHover = false;
+    if (swapSource === null || swapSource === label) return;
+    e.preventDefault();
+    onSwapFrom(swapSource);
+  }
+
   let baseHex = $derived(oklchToHexClamped(baseColor.l, baseColor.c, baseColor.h));
 
   // `pinnedOpen || isEditingBase` is exactly when the base panel shows: editing
@@ -54,11 +88,19 @@
       class="header-swatch"
       class:active={isEditingBase || pinnedOpen}
       class:selected
+      class:swap-target={swapHover}
       style="background: {baseHex}"
+      data-swatch-key={BASE_KEY}
+      draggable="true"
       onclick={onStartEdit}
       role="button"
       tabindex="0"
       onkeydown={(e) => e.key === 'Enter' && onStartEdit()}
+      ondragstart={onDragStart}
+      ondragend={() => (swapSource = null)}
+      ondragover={onDragOver}
+      ondragleave={() => (swapHover = false)}
+      ondrop={onDrop}
     ></div>
     <div class="primary-info">
       <span class="editor-label">{displayLabel ?? label}</span>
@@ -163,6 +205,13 @@
       inset 0 0 0 4px var(--ui-surface-lowest);
   }
 
+  /* About to receive a swap: the axis row's doubled drop ring. */
+  .header-swatch.swap-target {
+    border-color: var(--ui-text-primary);
+    outline: 1px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+
   .editor-label {
     font-size: var(--ui-font-size-xl);
     font-weight: var(--ui-font-weight-semibold);

package/src/editor/ui/swatchClipboard.ts

@@ -0,0 +1,35 @@
+import { writable } from 'svelte/store';
+import { cssColorToOklch, oklchToCss, type Oklch } from '../core/palettes/oklch';
+import { isEditable } from '../core/store/editorKeybindings';
+import { showCopyPopover } from './copyPopover';
+
+/** The Tokens-view family whose swatch opened last. Every family can hold an
+ *  open swatch at once, and copy and paste act on this one alone. */
+export const activeSwatchFamily = writable<string | null>(null);
+
+const inTextField = (e: Event) => e.target instanceof HTMLElement && isEditable(e.target);
+
+/** ⌘C on a swatch view. A text field or selected page text keeps the browser's
+ *  own copy. Copy rides the key rather than the copy event because Safari fires
+ *  no copy event without a text selection. */
+export function isSwatchCopy(e: KeyboardEvent): boolean {
+  if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey || e.key.toLowerCase() !== 'c') return false;
+  return !inTextField(e) && window.getSelection()?.isCollapsed !== false;
+}
+
+/** The color a paste carries to a swatch, or null when a text field keeps the
+ *  paste or the clipboard holds no hex or `oklch()` color. Paste rides the
+ *  event because its clipboardData needs no read permission. */
+export function swatchPasteColor(e: ClipboardEvent): Oklch | null {
+  if (inTextField(e)) return null;
+  return cssColorToOklch(e.clipboardData?.getData('text/plain') ?? '');
+}
+
+export function showSwatchColor(color: Oklch, anchor: Element | null): void {
+  showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+}
+
+export function copySwatchColor(color: Oklch, anchor: Element | null): void {
+  navigator.clipboard?.writeText(oklchToCss(color.l, color.c, color.h));
+  showSwatchColor(color, anchor);
+}

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 {