@weasel-js/forge 1.9.4 → 1.10.1

package/dist/shell/index.js

@@ -1,25 +1,27 @@
-import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-FRUA5WJF.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-DKWHGSBZ.js';
 import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
-import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-MQSFPRF6.js';
+import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-BIAEGWGJ.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-ZZCCIXEJ.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-ZZCCIXEJ.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-JHL4ERDA.js';
-import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-B3PPHJTS.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-E2FHBDNQ.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-E2FHBDNQ.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-DFKCLZKS.js';
+import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-AP3DRQLI.js';
 import '../chunk-L5XM5VKB.js';
-import '../chunk-HRGPFQBW.js';
-import '../chunk-5KI5YSQ5.js';
-import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-TXLWQFF6.js';
+import '../chunk-ZAWXMUGZ.js';
+import '../chunk-GB6PRJET.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-FL2MUPUL.js';
 import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
 import num from '@weasel-js/theme/numeric.module.css';
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useId, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
+import { createEmitter } from '@weasel-js/registry';
 import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
 import { InfoIcon, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport, SearchIcon } from '@weasel-js/ui';
-import { TOKEN_MANIFEST, THEME_SOURCES, isByAxis } from '@weasel-js/theme';
+import { themeAxes, weaselTheme, TOKEN_MANIFEST, THEME_SOURCES, resolveTheme, isColorModePreference, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
-import { useLatest } from '@weasel-js/core';
+import { useLatest, historyKey, createHistory, swapOp, isPlainObject } from '@weasel-js/core';
+import { useResolvedColorMode } from '@weasel-js/theme/react';
 
 function Finding({ finding }) {
   return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
@@ -100,19 +102,9 @@ var A11Y_SECTION = {
   region: "aside",
   item: { title: "Accessibility", body: /* @__PURE__ */ jsx(FocusedA11y, {}) }
 };
-
-// src/shell/storyChanges.ts
 function createStoryChanges() {
-  const listeners2 = /* @__PURE__ */ new Set();
-  return {
-    subscribe(listener) {
-      listeners2.add(listener);
-      return () => listeners2.delete(listener);
-    },
-    emit(file) {
-      for (const listener of [...listeners2]) listener(file);
-    }
-  };
+  const changes = createEmitter();
+  return { subscribe: changes.subscribe, emit: changes.emit };
 }
 var DependenciesContext = createContext(null);
 function readRoute() {
@@ -233,17 +225,12 @@ function crumbs(title, name) {
 function breadcrumb(title, name) {
   return crumbs(title, name).map((step) => step.label).join(" > ");
 }
-
-// src/shell/treeReveal.ts
-var listeners = /* @__PURE__ */ new Set();
+var reveals = createEmitter();
 function revealInTree(path) {
-  for (const listener of listeners) listener(path);
+  reveals.emit(path);
 }
 function onRevealInTree(listener) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
+  return reveals.subscribe(listener);
 }
 function Crumbs({ entry }) {
   const steps = crumbs(entry.title, entry.name);
@@ -352,6 +339,73 @@ function missingInstrument(id, globals = {}) {
     render: () => /* @__PURE__ */ jsx("div", { className: "fg-story fg-story--loading", "data-fg-layout": "fullscreen", children: /* @__PURE__ */ jsx(Fault, { phase: "route", message: `No story ${id}` }) })
   };
 }
+var ICONS = {
+  color: "drop",
+  type: "type",
+  size: "measure",
+  motion: "curveEaseInOut",
+  depth: "layers",
+  other: "more"
+};
+var PANEL = ".fg-css-vars";
+var HOST = ".lk-sidebar-section, .lk-panel-tile";
+var MANUAL = ["wheel", "touchmove", "keydown"];
+var LIST = ".fg-css-vars__list";
+function readLine(panel) {
+  return (panel.querySelector(LIST) ?? panel).getBoundingClientRect().top;
+}
+function sectionsOf(panel) {
+  return [...panel.querySelectorAll("[data-token-category]")];
+}
+function SectionJump() {
+  const ref = useRef(null);
+  const [present, setPresent] = useState([]);
+  const [current, setCurrent] = useState(null);
+  const held = useRef(false);
+  useEffect(() => {
+    const root = ref.current?.closest(HOST) ?? document.body;
+    const read = () => {
+      const panel = root.querySelector(PANEL);
+      const sections = panel ? sectionsOf(panel) : [];
+      setPresent(sections.map((s) => s.dataset.tokenCategory));
+      if (!panel || held.current) return;
+      const line = readLine(panel) + 1;
+      let top = sections[0]?.dataset.tokenCategory;
+      for (const s of sections) if (s.getBoundingClientRect().top <= line) top = s.dataset.tokenCategory;
+      setCurrent(top ?? null);
+    };
+    const release = () => {
+      held.current = false;
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { childList: true, subtree: true });
+    document.addEventListener("scroll", read, { capture: true, passive: true });
+    for (const type of MANUAL) document.addEventListener(type, release, { capture: true, passive: true });
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("scroll", read, { capture: true });
+      for (const type of MANUAL) document.removeEventListener(type, release, { capture: true });
+    };
+  }, []);
+  const items = TOKEN_CATEGORIES.map(({ id, title }) => ({
+    value: id,
+    label: /* @__PURE__ */ jsx(Icon, { name: ICONS[id], size: 14 }),
+    ariaLabel: title,
+    tooltip: title,
+    disabled: !present.includes(id)
+  }));
+  const jump = (next) => {
+    const panel = ref.current?.closest(HOST)?.querySelector(PANEL);
+    const target = next && panel?.querySelector(`[data-token-category="${next}"]`);
+    const scroller = panel?.querySelector(LIST);
+    if (!panel || !target || !scroller) return;
+    held.current = true;
+    setCurrent(next);
+    scroller.scrollTop += target.getBoundingClientRect().top - readLine(panel);
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: "fg-css-vars__jump", children: /* @__PURE__ */ jsx(ToggleBar, { ariaLabel: "Jump to section", variant: "flat", size: "sm", items, value: current, onChange: jump }) });
+}
 var SEED_REF = /^\{seeds\.([^}]+)\}$/;
 var RULE_KEYS = { factors: "factors", ratio: "ratio", step: "step" };
 function selectionFor(axes, globals) {
@@ -365,24 +419,24 @@ function selectionFor(axes, globals) {
 }
 var EditError = class extends Error {
 };
-function slotOf(root, holder, key, where, selection, depth = 0) {
-  if (depth > 16) throw new EditError(`${where} references itself`);
-  let h = holder;
-  let k = key;
-  let w = where;
-  let value = h[k];
-  while (isByAxis(value)) {
+function branchOf(holder, key, where, selection) {
+  let slot = { holder, key, where };
+  for (let value = holder[key]; isByAxis(value); value = slot.holder[slot.key]) {
     const axis = value.by;
     const picked = selection[axis];
     if (picked === void 0 || picked === "by" || !(picked in value)) {
-      throw new EditError(`${w} differs by ${axis}, and which ${axis} this trial shows is not known`);
+      throw new EditError(`${slot.where} differs by ${axis}, and which ${axis} this trial shows is not known`);
     }
-    h = value;
-    k = picked;
-    w = `${w}.${picked}`;
-    value = h[k];
+    slot = { holder: value, key: picked, where: `${slot.where}.${picked}` };
   }
-  if (typeof value === "number") return { holder: h, key: k, where: w };
+  return slot;
+}
+function slotOf(root, holder, key, where, selection, depth = 0) {
+  if (depth > 16) throw new EditError(`${where} references itself`);
+  const slot = branchOf(holder, key, where, selection);
+  const { holder: h, key: k, where: w } = slot;
+  const value = h[k];
+  if (typeof value === "number") return slot;
   if (typeof value === "string") {
     const ref = SEED_REF.exec(value);
     if (!ref) throw new EditError(`${w} is "${value}", which is not a number or a seed`);
@@ -394,18 +448,10 @@ function slotOf(root, holder, key, where, selection, depth = 0) {
   throw new EditError(`${w} is not a number`);
 }
 function factorsOf(holder, where, selection) {
-  let value = holder.factors;
-  let w = `${where}.factors`;
-  while (isByAxis(value)) {
-    const picked = selection[value.by];
-    if (picked === void 0 || !(picked in value)) {
-      throw new EditError(`${w} differs by ${value.by}, and which ${value.by} this trial shows is not known`);
-    }
-    w = `${w}.${picked}`;
-    value = value[picked];
-  }
-  if (!Array.isArray(value)) throw new EditError(`${w} is not a list`);
-  return { list: value, where: w };
+  const slot = branchOf(holder, "factors", `${where}.factors`, selection);
+  const value = slot.holder[slot.key];
+  if (!Array.isArray(value)) throw new EditError(`${slot.where} is not a list`);
+  return { list: value, where: slot.where };
 }
 var kindOf = (scale) => scale.factors !== void 0 ? "factors" : scale.ratio !== void 0 ? "ratio" : scale.step !== void 0 ? "step" : null;
 var plainLiteral = (value) => typeof value === "number" || Array.isArray(value) && value.every((v) => typeof v === "number");
@@ -461,90 +507,219 @@ function applyScaleEdits(definition, edits, selection) {
   for (const [holder, byKey] of writes) for (const [key, value] of byKey) holder[key] = value;
   return { ok: true, definition: root };
 }
-var ICONS = {
-  color: "drop",
-  type: "type",
-  size: "measure",
-  motion: "curveEaseInOut",
-  depth: "layers",
-  other: "more"
-};
-var PANEL = ".fg-css-vars";
-var HOST = ".lk-sidebar-section, .lk-panel-tile";
-var MANUAL = ["wheel", "touchmove", "keydown"];
-function scrollerOf(el) {
-  for (let at = el.parentElement; at; at = at.parentElement) {
-    const { overflowY } = getComputedStyle(at);
-    if ((overflowY === "auto" || overflowY === "scroll") && at.scrollHeight > at.clientHeight) return at;
+var REFERENCE = /\{[^}]+\}/;
+var LAYERS = ["pins", "semantics", "components"];
+function derivation(entry) {
+  const value = isPlainObject(entry) ? entry.value : entry;
+  if (isPlainObject(entry) && value === void 0) return "follows a rule";
+  if (isPlainObject(entry) && entry.alpha !== void 0) return "is drawn at an alpha";
+  if (typeof value === "string" && REFERENCE.test(value)) return `follows ${REFERENCE.exec(value)?.[0]}`;
+  return typeof value === "string" || typeof value === "number" ? null : "is a list";
+}
+function literalSlot(definition, token, selection) {
+  for (const layer of LAYERS) {
+    const entries = definition[layer];
+    if (!entries || !(token in entries)) continue;
+    const slot = branchOf(entries, token, `${layer}.${token}`, selection);
+    const why = derivation(slot.holder[slot.key]);
+    if (why) throw new EditError(`${slot.where} ${why}, and only a value written out in the theme can be saved`);
+    return slot;
   }
-  return null;
+  for (const layer of ["ramps", "scales"]) {
+    const from = Object.keys(definition[layer] ?? {}).find((name) => token.startsWith(`${name}-`));
+    if (from) throw new EditError(`${token} is a step ${layer}.${from} generates, and the theme pins no value over it`);
+  }
+  throw new EditError(`the theme defines no token "${token}"`);
 }
-function readLine(panel) {
-  return panel.querySelector(".fg-css-vars__controls")?.getBoundingClientRect().bottom ?? panel.getBoundingClientRect().top;
+function writtenOut(definition, token, selection) {
+  try {
+    literalSlot(definition, token, selection);
+    return true;
+  } catch (e) {
+    if (e instanceof EditError) return false;
+    throw e;
+  }
 }
-function sectionsOf(panel) {
-  return [...panel.querySelectorAll("[data-token-category]")];
+function applyTokenEdits(definition, edits, selection) {
+  const root = structuredClone(definition);
+  try {
+    for (const [token, value] of Object.entries(edits)) {
+      const { holder, key } = literalSlot(root, token, selection);
+      const entry = holder[key];
+      holder[key] = isPlainObject(entry) ? { ...entry, value } : value;
+    }
+  } catch (e) {
+    if (e instanceof EditError) return { ok: false, message: `Cannot save: ${e.message}.` };
+    throw e;
+  }
+  return { ok: true, definition: root };
 }
-function SectionJump() {
-  const ref = useRef(null);
-  const [present, setPresent] = useState([]);
-  const [current, setCurrent] = useState(null);
-  const held = useRef(false);
+function useTrialSelection(axes, globals) {
+  const { mode } = globals;
+  const osMode = useResolvedColorMode(isColorModePreference(mode) ? mode : "auto");
+  return useMemo(() => {
+    const selection = selectionFor(axes, globals);
+    return axes.mode && osMode in axes.mode.values ? { mode: osMode, ...selection } : selection;
+  }, [axes, globals, osMode]);
+}
+
+// src/shell/cssVars/useThemeSave.ts
+var THEME_NAME = "weasel";
+var TOKEN_PREFIX = "--wzl-";
+var NO_AXES = {};
+function useThemeSave({ trialId, globals, themeApi, scales, overrides, history: history2 }) {
+  const definition = THEME_SOURCES[THEME_NAME];
+  const selection = useTrialSelection(definition?.axes ?? NO_AXES, globals);
+  const tokens = useMemo(() => {
+    if (!definition) return {};
+    const generated = new Set(scales.flatMap((scale) => scale.tokens));
+    return Object.fromEntries(
+      Object.entries(overrides).flatMap(([name, value]) => {
+        if (!name.startsWith(TOKEN_PREFIX) || generated.has(name)) return [];
+        const token = name.slice(TOKEN_PREFIX.length);
+        return writtenOut(definition, token, selection) ? [[token, value]] : [];
+      })
+    );
+  }, [definition, selection, scales, overrides]);
+  const [saving, setSaving] = useState(false);
+  const [held, setHeld] = useState(null);
+  const setNotice = (next) => setHeld(next && { ...next, trialId });
+  const save = async () => {
+    setSaving(true);
+    setNotice(null);
+    try {
+      const api = themeApi ?? httpThemeApi();
+      const stored = await api.get(THEME_NAME);
+      const file = `themes/${THEME_NAME}.json`;
+      if (JSON.stringify(stored.definition) !== JSON.stringify(THEME_SOURCES[THEME_NAME])) {
+        setNotice({ tone: "error", text: `${file} has changed since this page loaded. Reload to edit against it.` });
+        return;
+      }
+      const scaled = applyScaleEdits(stored.definition, Object.fromEntries(scales.map((s) => [s.name, s.edit])), selection);
+      const next = scaled.ok ? applyTokenEdits(scaled.definition, tokens, selection) : scaled;
+      if (!next.ok) {
+        setNotice({ tone: "error", text: next.message });
+        return;
+      }
+      const result = await api.put(THEME_NAME, next.definition, stored.hash);
+      if (result.status === "conflict") {
+        setNotice({ tone: "error", text: `${file} changed on disk while saving. Nothing was written; reload to edit against it.` });
+        return;
+      }
+      if (result.status === "invalid") {
+        setNotice({ tone: "error", text: result.message });
+        return;
+      }
+      const saved = /* @__PURE__ */ new Set([
+        ...scales.flatMap((scale) => scale.tokens),
+        ...Object.keys(tokens).map((token) => `${TOKEN_PREFIX}${token}`)
+      ]);
+      const groups = new Set(scales.map((scale) => scale.group));
+      const now = history2.current();
+      history2.reset({
+        overrides: Object.fromEntries(Object.entries(now.overrides).filter(([name]) => !saved.has(name))),
+        scales: Object.fromEntries(Object.entries(now.scales).filter(([group]) => !groups.has(group)))
+      });
+      setNotice(
+        result.regenerated || result.problems.length === 0 ? { tone: "saved", text: `Saved to ${file}.` } : { tone: "error", text: `Saved to ${file}, but the tokens were not regenerated: ${result.problems.join("; ")}` }
+      );
+    } catch (e) {
+      setNotice({ tone: "error", text: `Saving needs forge's dev server, which did not answer: ${e.message}` });
+    } finally {
+      setSaving(false);
+    }
+  };
+  return {
+    pending: scales.length > 0 || Object.keys(tokens).length > 0,
+    saving,
+    notice: held?.trialId === trialId ? held : null,
+    save
+  };
+}
+var AXES = themeAxes(weaselTheme);
+function useThemeTokens(globals, vars) {
+  const selection = useTrialSelection(AXES, globals);
+  const themed = useMemo(() => resolveTheme(weaselTheme, selection), [selection]);
+  return useMemo(() => {
+    const reported = new Map(vars.map((v) => [v.name, v.value]));
+    return TOKEN_MANIFEST.map((token) => ({
+      name: token.name,
+      type: token.type,
+      group: token.group,
+      value: reported.get(token.name) ?? themed[token.name] ?? token.defaultValue,
+      description: token.description
+    }));
+  }, [vars, themed]);
+}
+var SWAP = "fg.vars.swap";
+var COALESCE_MS = 800;
+var LIMIT = 100;
+function useVarsHistory(state, apply) {
+  const trialId = useTrialId();
+  const [stored, setStored] = usePersistedState("fg-css-vars-history", null, { scope: "trial" });
+  const rendered = useLatest(state);
+  const ahead = useRef(null);
   useEffect(() => {
-    const root = ref.current?.closest(HOST) ?? document.body;
-    const read = () => {
-      const panel = root.querySelector(PANEL);
-      const sections = panel ? sectionsOf(panel) : [];
-      setPresent(sections.map((s) => s.dataset.tokenCategory));
-      if (!panel || held.current) return;
-      const line = readLine(panel) + 1;
-      let top = sections[0]?.dataset.tokenCategory;
-      for (const s of sections) if (s.getBoundingClientRect().top <= line) top = s.dataset.tokenCategory;
-      setCurrent(top ?? null);
-    };
-    const release = () => {
-      held.current = false;
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(root, { childList: true, subtree: true });
-    document.addEventListener("scroll", read, { capture: true, passive: true });
-    for (const type of MANUAL) document.addEventListener(type, release, { capture: true, passive: true });
-    return () => {
-      observer.disconnect();
-      document.removeEventListener("scroll", read, { capture: true });
-      for (const type of MANUAL) document.removeEventListener(type, release, { capture: true });
-    };
-  }, []);
-  const items = TOKEN_CATEGORIES.map(({ id, title }) => ({
-    value: id,
-    label: /* @__PURE__ */ jsx(Icon, { name: ICONS[id], size: 14 }),
-    ariaLabel: title,
-    tooltip: title,
-    disabled: !present.includes(id)
-  }));
-  const jump = (next) => {
-    const panel = ref.current?.closest(HOST)?.querySelector(PANEL);
-    const target = next && panel?.querySelector(`[data-token-category="${next}"]`);
-    const scroller = panel && scrollerOf(panel);
-    if (!panel || !target || !scroller) return;
-    held.current = true;
-    setCurrent(next);
-    scroller.scrollTop += target.getBoundingClientRect().top - readLine(panel);
+    ahead.current = null;
+  }, [state]);
+  const current = () => ahead.current ?? rendered.current;
+  const latestApply = useLatest(apply);
+  const emit = (to) => {
+    const from = current();
+    ahead.current = to;
+    latestApply.current(from, to);
+  };
+  const swap = (before, after, coalesceKey) => swapOp({ name: SWAP, label: "edit vars", before, after, emit, ...coalesceKey !== void 0 ? { coalesceKey } : {} });
+  const history2 = useMemo(() => {
+    const opened = createHistory(null, {
+      coalesceWindowMs: COALESCE_MS,
+      historyLimit: LIMIT,
+      rebuildOp: (name, args) => {
+        const { before, after } = args;
+        return name === SWAP ? swap(before, after) : null;
+      }
+    });
+    if (stored) opened.restore(stored);
+    return opened;
+  }, [trialId]);
+  useSyncExternalStore(history2.subscribe, history2.getVersion);
+  const keep = () => setStored(history2.canUndo() || history2.canRedo() ? history2.serialize() : null);
+  const tick = useRef(null);
+  return {
+    current,
+    commit(next, key) {
+      if (tick.current === null) {
+        tick.current = key;
+        queueMicrotask(() => {
+          tick.current = null;
+        });
+      }
+      history2.applyOps([swap(current(), next, tick.current)], "edit vars");
+      keep();
+    },
+    step(to) {
+      history2[to]();
+      keep();
+    },
+    canUndo: history2.canUndo(),
+    canRedo: history2.canRedo(),
+    reset(next) {
+      emit(next);
+      history2.clear();
+      setStored(null);
+    }
   };
-  return /* @__PURE__ */ jsx("div", { ref, className: "fg-css-vars__jump", children: /* @__PURE__ */ jsx(ToggleBar, { ariaLabel: "Jump to section", variant: "flat", size: "sm", items, value: current, onChange: jump }) });
 }
 var TABS = [
   { value: "theme", label: "Theme" },
   { value: "story", label: "Story" }
 ];
 var MANIFEST = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
-var THEME_NAME = "weasel";
 var literal = (v) => typeof v === "number";
 var SCALE_SOURCES = Object.entries(THEME_SOURCES[THEME_NAME]?.scales ?? {}).flatMap(([name, def]) => {
   if (!Array.isArray(def.steps)) return [];
   const steps = def.steps;
-  const tokens = steps.map((step) => `--wzl-${name}-${step}`);
+  const tokens = steps.map((step) => `${TOKEN_PREFIX}${name}-${step}`);
   const group = MANIFEST.get(tokens[0] ?? "")?.group;
   if (!group) return [];
   const factors = Array.isArray(def.factors) && def.factors.every(literal) ? def.factors : null;
@@ -589,25 +764,17 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     {},
     { scope: "lab" }
   );
-  const [edited, setEdited] = usePersistedState("fg-css-vars-scales", {}, { scope: "lab" });
+  const [edited, setEdited] = usePersistedState("fg-css-vars-scales", {}, { scope: "trial" });
   const [tab, setTab] = useState("theme");
   const [filter, setFilter] = useState("");
+  const themeTokens = useThemeTokens(globals, frame.vars);
   const tokens = useMemo(() => {
-    if (tab === "story") {
-      return frame.vars.map(({ name, value }) => {
-        const known = MANIFEST.get(name);
-        return { name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value };
-      });
-    }
-    const reported = new Map(frame.vars.map((v) => [v.name, v.value]));
-    return TOKEN_MANIFEST.map((token) => ({
-      name: token.name,
-      type: token.type,
-      group: token.group,
-      value: reported.get(token.name) ?? token.defaultValue,
-      description: token.description
-    }));
-  }, [tab, frame.vars]);
+    if (tab === "theme") return themeTokens;
+    return frame.vars.map(({ name, value }) => {
+      const known = MANIFEST.get(name);
+      return { name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value };
+    });
+  }, [tab, frame.vars, themeTokens]);
   const query = filter.trim().toLowerCase();
   const shown = tokens.map((token) => {
     const override = overrides[token.name];
@@ -626,135 +793,115 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     return out;
   }, [tab, shown, overrides, edited]);
   const send = frame.send;
-  const write = useCallback(
-    (name, value) => {
-      setOverrides((prev) => {
-        const { [name]: _dropped, ...rest } = prev;
-        return value === null ? rest : { ...rest, [name]: value };
-      });
-      send?.({ type: "vars.set", name, value });
-    },
-    [setOverrides, send]
-  );
-  const onScaleChange = useCallback(
-    (group, next) => {
-      const source = SCALE_SOURCES.find((sc) => sc.group === group);
-      if (!source) return;
-      setEdited((prev) => ({ ...prev, [group]: next }));
-      for (const [name, value] of scaleValues(source, next)) write(name, value);
-    },
-    [setEdited, write]
-  );
+  const state = useMemo(() => ({ overrides, scales: edited }), [overrides, edited]);
+  const history2 = useVarsHistory(state, (from, to) => {
+    setOverrides(to.overrides);
+    setEdited(to.scales);
+    for (const name of /* @__PURE__ */ new Set([...Object.keys(from.overrides), ...Object.keys(to.overrides)])) {
+      if (from.overrides[name] !== to.overrides[name]) send?.({ type: "vars.set", name, value: to.overrides[name] ?? null });
+    }
+  });
+  const write = (name, value) => {
+    const now = history2.current();
+    const { [name]: _dropped, ...rest } = now.overrides;
+    history2.commit({ ...now, overrides: value === null ? rest : { ...rest, [name]: value } }, `token:${name}`);
+  };
+  const onScaleChange = (group, next) => {
+    const source = SCALE_SOURCES.find((sc) => sc.group === group);
+    if (!source) return;
+    const now = history2.current();
+    history2.commit(
+      { overrides: { ...now.overrides, ...Object.fromEntries(scaleValues(source, next)) }, scales: { ...now.scales, [group]: next } },
+      `scale:${group}`
+    );
+  };
   const unsaved = useMemo(
     () => SCALE_SOURCES.flatMap((source) => {
       const edit = edited[source.group];
-      if (!edit || !source.tokens.some((name) => overrides[name] !== void 0)) return [];
-      const values = scaleValues(source, edit);
-      return values.every(([name, value]) => overrides[name] === value) ? [{ source, edit }] : [];
+      if (!edit || !source.tokens.some((name2) => overrides[name2] !== void 0)) return [];
+      const { name, group, tokens: tokens2 } = source;
+      const clean = scaleValues(source, edit).every(([token, value]) => overrides[token] === value);
+      return clean ? [{ name, group, tokens: tokens2, edit: { base: edit.base, rule: edit.rule } }] : [];
     }),
     [edited, overrides]
   );
-  const [saving, setSaving] = useState(false);
-  const [held, setHeld] = useState(null);
-  const notice = held?.trialId === trialId ? held : null;
-  const setNotice = (next) => setHeld(next && { ...next, trialId });
-  const save = async () => {
-    setSaving(true);
-    setNotice(null);
-    try {
-      const api = themeApi ?? httpThemeApi();
-      const stored = await api.get(THEME_NAME);
-      const file = `themes/${THEME_NAME}.json`;
-      if (JSON.stringify(stored.definition) !== JSON.stringify(THEME_SOURCES[THEME_NAME])) {
-        setNotice({ tone: "error", text: `${file} has changed since this page loaded. Reload to edit against it.` });
-        return;
-      }
-      const edits = Object.fromEntries(
-        unsaved.map(({ source, edit }) => [source.name, { base: edit.base, rule: edit.rule }])
-      );
-      const next = applyScaleEdits(stored.definition, edits, selectionFor(stored.definition.axes ?? {}, globals));
-      if (!next.ok) {
-        setNotice({ tone: "error", text: next.message });
-        return;
-      }
-      const result = await api.put(THEME_NAME, next.definition, stored.hash);
-      if (result.status === "conflict") {
-        setNotice({ tone: "error", text: `${file} changed on disk while saving. Nothing was written; reload to edit against it.` });
-        return;
-      }
-      if (result.status === "invalid") {
-        setNotice({ tone: "error", text: result.message });
-        return;
-      }
-      for (const { source } of unsaved) for (const name of source.tokens) write(name, null);
-      const groups = new Set(unsaved.map(({ source }) => source.group));
-      setEdited((prev) => Object.fromEntries(Object.entries(prev).filter(([group]) => !groups.has(group))));
-      setNotice(
-        result.regenerated || result.problems.length === 0 ? { tone: "saved", text: `Saved to ${file}.` } : { tone: "error", text: `Saved to ${file}, but the tokens were not regenerated: ${result.problems.join("; ")}` }
-      );
-    } catch (e) {
-      setNotice({ tone: "error", text: `Saving needs forge's dev server, which did not answer: ${e.message}` });
-    } finally {
-      setSaving(false);
-    }
-  };
+  const { pending, saving, notice, save } = useThemeSave({ trialId, globals, themeApi, scales: unsaved, overrides, history: history2 });
   const onCollapsedChange = useCallback(
     (category, collapsed) => setFolds((prev) => ({ ...prev, [category]: collapsed })),
     [setFolds]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars", children: [
-    /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__controls", children: [
-      /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__bar", children: [
-        /* @__PURE__ */ jsx(
-          ToggleBar$1,
-          {
-            ariaLabel: "Variables",
-            variant: "flat",
-            size: "sm",
-            items: TABS,
-            value: tab,
-            onChange: (next) => {
-              if (next) setTab(next);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            className: "fg-css-vars__filter",
-            "aria-label": "Filter",
-            placeholder: "Filter",
-            value: filter,
-            onChange: setFilter,
-            leadingAdornment: /* @__PURE__ */ jsx(SearchIcon, { size: 12 })
-          }
-        )
-      ] }),
-      tab === "theme" && (unsaved.length > 0 || notice) ? /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
-        unsaved.length > 0 ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: () => void save(), children: "Save scales to theme" }) : null,
-        notice ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: `fg-css-vars__notice fg-css-vars__notice--${notice.tone}`,
-            role: notice.tone === "error" ? "alert" : "status",
-            children: notice.text
-          }
-        ) : null
-      ] }) : null
-    ] }),
-    shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: tokens.length === 0 ? "The story\u2019s frame has reported no variables." : "No variables match." }) : /* @__PURE__ */ jsx(
-      TokenPanel,
+  return (
+    // Capture: React Aria's fields stop a keydown from bubbling past them.
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        tokens: shown,
-        namePrefix: "--wzl-",
-        onChange: write,
-        scales,
-        onScaleChange,
-        collapsed: folds,
-        onCollapsedChange
+        className: "fg-css-vars",
+        onKeyDownCapture: (e) => {
+          const to = e.target.closest(".fg-css-vars__filter") ? null : historyKey(e);
+          if (!to) return;
+          e.preventDefault();
+          history2.step(to);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__controls", children: [
+            /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__bar", children: [
+              /* @__PURE__ */ jsx(
+                ToggleBar$1,
+                {
+                  ariaLabel: "Variables",
+                  variant: "flat",
+                  size: "sm",
+                  items: TABS,
+                  value: tab,
+                  onChange: (next) => {
+                    if (next) setTab(next);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "fg-css-vars__filter",
+                  "aria-label": "Filter",
+                  placeholder: "Filter",
+                  value: filter,
+                  onChange: setFilter,
+                  leadingAdornment: /* @__PURE__ */ jsx(SearchIcon, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__steps", role: "group", "aria-label": "History", children: [
+                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Undo", variant: "ghost", size: "sm", disabled: !history2.canUndo, onClick: () => history2.step("undo"), children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: 14 }) }),
+                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Redo", variant: "ghost", size: "sm", disabled: !history2.canRedo, onClick: () => history2.step("redo"), children: /* @__PURE__ */ jsx(Icon, { name: "redo", size: 14 }) })
+              ] })
+            ] }),
+            tab === "theme" && (pending || notice) ? /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
+              pending ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: () => void save(), children: "Save to theme" }) : null,
+              notice ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: `fg-css-vars__notice fg-css-vars__notice--${notice.tone}`,
+                  role: notice.tone === "error" ? "alert" : "status",
+                  children: notice.text
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: tokens.length === 0 ? "The story\u2019s frame has reported no variables." : "No variables match." }) : /* @__PURE__ */ jsx("div", { className: "fg-css-vars__list", children: /* @__PURE__ */ jsx(
+            TokenPanel,
+            {
+              tokens: shown,
+              namePrefix: TOKEN_PREFIX,
+              onChange: write,
+              scales,
+              onScaleChange,
+              collapsed: folds,
+              onCollapsedChange
+            }
+          ) })
+        ]
       }
     )
-  ] });
+  );
 }
 function FocusedCssVars() {
   const { focusedTrialId, trials, instruments } = useLabContext();
@@ -771,7 +918,7 @@ function FocusedCssVars() {
 var CSS_VARS_SECTION = {
   id: "fg-css-vars",
   region: "aside",
-  item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
+  item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), fill: true, body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
@@ -905,10 +1052,10 @@ var whenIdle = (fn) => {
   return () => clearTimeout(handle);
 };
 function createFramePool(frameUrl, size = 2) {
-  const shelf = document.createElement("div");
-  shelf.className = "fg-frame-pool";
-  shelf.setAttribute("aria-hidden", "true");
-  document.body.append(shelf);
+  const shelf2 = document.createElement("div");
+  shelf2.className = "fg-frame-pool";
+  shelf2.setAttribute("aria-hidden", "true");
+  document.body.append(shelf2);
   const warm = [];
   const waits = /* @__PURE__ */ new Set();
   let cancelRefill = null;
@@ -935,7 +1082,7 @@ function createFramePool(frameUrl, size = 2) {
     }, HELLO_TIMEOUT_MS);
     waits.add(stop);
     window.addEventListener("message", onMessage);
-    shelf.append(frame);
+    shelf2.append(frame);
   };
   const refill = () => {
     if (disposed || cancelRefill) return;
@@ -956,7 +1103,7 @@ function createFramePool(frameUrl, size = 2) {
       disposed = true;
       cancelRefill?.();
       for (const stop of [...waits]) stop();
-      shelf.remove();
+      shelf2.remove();
     }
   };
 }
@@ -966,7 +1113,7 @@ var FramePoolContext = createContext(null);
 function routedTrial(trials, focusedTrialId, route) {
   return trials.find((t) => t.id === focusedTrialId && t.instrumentName === route) ?? trials.find((t) => t.instrumentName === route);
 }
-function PlayheadSync({ trialId, route, applied }) {
+function PlayheadSync({ trialId, route, appliedRef }) {
   const clock = useTrialClock(trialId);
   useEffect(() => {
     if (!clock) return;
@@ -984,8 +1131,8 @@ function PlayheadSync({ trialId, route, applied }) {
       held = next;
       writePlayheadParam(next);
     };
-    if (applied.current !== route) {
-      applied.current = route;
+    if (appliedRef.current !== route) {
+      appliedRef.current = route;
       fromUrl();
     }
     toUrl();
@@ -1001,7 +1148,7 @@ function PlayheadSync({ trialId, route, applied }) {
       off();
       window.removeEventListener("hashchange", onHashChange);
     };
-  }, [clock, route, applied]);
+  }, [clock, route, appliedRef]);
   return null;
 }
 function RoutePlayhead() {
@@ -1010,7 +1157,7 @@ function RoutePlayhead() {
   const applied = useRef(null);
   const trial = route === null ? void 0 : routedTrial(lab.trials, lab.focusedTrialId, route);
   if (!trial || route === null) return null;
-  return /* @__PURE__ */ jsx(PlayheadSync, { trialId: trial.id, route, applied }, `${trial.id} ${route}`);
+  return /* @__PURE__ */ jsx(PlayheadSync, { trialId: trial.id, route, appliedRef: applied }, `${trial.id} ${route}`);
 }
 var RECORD = "fg-globals";
 function useLabGlobals(declarations) {
@@ -1350,13 +1497,13 @@ function StoryTree({ ctx, index }) {
   }, [index]);
   const enabled = (value) => views.some((item) => item.value === value && !item.disabled);
   const view = [chosen, "components", "gallery"].find(enabled) ?? chosen;
-  const kept = useMemo(() => index.filter((entry) => !hidden[table.of(entry)]), [index, hidden, table]);
+  const kept2 = useMemo(() => index.filter((entry) => !hidden[table.of(entry)]), [index, hidden, table]);
   const [galleryEntries, rest] = useMemo(() => {
     const yes = [];
     const no = [];
-    for (const entry of kept) (isGallery(entry) ? yes : no).push(entry);
+    for (const entry of kept2) (isGallery(entry) ? yes : no).push(entry);
     return [yes, no];
-  }, [kept]);
+  }, [kept2]);
   const tree = useMemo(() => buildTree(rest), [rest]);
   const components = useMemo(() => buildComponents(rest, table), [rest, table]);
   const galleries = useMemo(() => buildComponents(galleryEntries, table), [galleryEntries, table]);
@@ -1364,7 +1511,7 @@ function StoryTree({ ctx, index }) {
     () => view === "tree" ? filterTree(tree, query) : componentNodes(filterComponents(view === "gallery" ? galleries : components, query)),
     [view, components, galleries, tree, query]
   );
-  const routable = useMemo(() => [...kept, ...indexEntries(kept)], [kept]);
+  const routable = useMemo(() => [...kept2, ...indexEntries(kept2)], [kept2]);
   const routed = routable.find((entry) => entry.id === route);
   const routeAncestors = useMemo(() => ancestorsOf(routed), [routed]);
   const filtering = query.trim() !== "";
@@ -1615,13 +1762,11 @@ function StoryTree({ ctx, index }) {
     /* @__PURE__ */ jsx("div", { role: "tree", "aria-labelledby": headingId, className: "fg-tree__items", onKeyDown, children: renderNodes(shown, 1) })
   ] });
 }
-
-// src/shell/answers.ts
 var KEPT_CONFIGS = 50;
 var UNANSWERED = stableStringify({ hidden: [], errors: {} });
 function createAnswerBook() {
   const byConfig = /* @__PURE__ */ new Map();
-  const listeners2 = /* @__PURE__ */ new Set();
+  const answered = createEmitter();
   const held = /* @__PURE__ */ new Map();
   const keyOf2 = (config) => stableStringify(storyConfig(config));
   const answerFor = (config) => byConfig.get(keyOf2(config));
@@ -1635,7 +1780,7 @@ function createAnswerBook() {
         const oldest = byConfig.keys().next().value;
         if (oldest !== void 0) byConfig.delete(oldest);
       }
-      if (changed && held.has(answers.configKey)) for (const fn of listeners2) fn();
+      if (changed && held.has(answers.configKey)) answered.emit();
     },
     hold(config) {
       const key = keyOf2(config);
@@ -1651,17 +1796,60 @@ function createAnswerBook() {
       return hidden?.some((h) => path === h || path.startsWith(`${h}.`)) ?? false;
     },
     errors: (path, config) => answerFor(config)?.errors[path] ?? [],
-    subscribe(fn) {
-      listeners2.add(fn);
-      return () => {
-        listeners2.delete(fn);
-      };
-    }
+    subscribe: answered.subscribe
   };
 }
 
 // src/shell/readyKey.ts
 var readyKey = (ready) => stableStringify({ schema: ready.schema, layout: ready.layout, viewport: ready.viewport });
+var kept = /* @__PURE__ */ new Map();
+var shelf = null;
+function shelfElement() {
+  if (!shelf) {
+    shelf = document.createElement("div");
+    shelf.className = "fg-frame-pool";
+    shelf.setAttribute("aria-hidden", "true");
+  }
+  if (!shelf.isConnected) document.body.append(shelf);
+  return shelf;
+}
+function adopt({ key, slot, frame, link, onAdopt }) {
+  const waiting = key === null ? void 0 : kept.get(key);
+  if (key === null || !waiting || !slot.current) return;
+  kept.delete(key);
+  moveFrame(slot.current, waiting.frame);
+  frame.current = waiting.frame;
+  link.current = waiting.link;
+  onAdopt(waiting.link);
+}
+function shelve(options) {
+  const { key, frame, link, onDrop } = options.current;
+  const element = frame.current;
+  const current = link.current;
+  if (key === null || !element?.isConnected || !current || !canMoveFrames()) return false;
+  if (current.awaiting === null && current.sent === null) return false;
+  const entry = { frame: element, link: current };
+  moveFrame(shelfElement(), element);
+  kept.set(key, entry);
+  queueMicrotask(() => {
+    if (kept.get(key) !== entry) return;
+    kept.delete(key);
+    onDrop();
+    element.remove();
+  });
+  return true;
+}
+function useKeptFrame(options) {
+  const handedOn = useRef(false);
+  const latest = useLatest(options);
+  useLayoutEffect(() => {
+    adopt(latest.current);
+    return () => {
+      if (shelve(latest)) handedOn.current = true;
+    };
+  }, [latest]);
+  return useCallback(() => handedOn.current, []);
+}
 var START_TIMEOUT_MS = 1e4;
 var requests = 0;
 function closeLink(link) {
@@ -1676,6 +1864,27 @@ function closeLink(link) {
 function mismatchMessage(mismatch) {
   return mismatch.reason === "version" ? `Frame speaks protocol ${String(mismatch.version)}; this workshop speaks ${PROTOCOL_VERSION}` : "Frame sent a message that is not a forge envelope";
 }
+function sendInputs(current, sent, next) {
+  const before = current.inputs;
+  const { state, globals } = next;
+  const config = storyConfig(next.config, sent.config);
+  if (config !== sent.config) {
+    sent.config = config;
+    current.channel.send({ type: "config", config });
+    current.inputs += 1;
+  }
+  if (state !== sent.state) {
+    sent.state = state;
+    current.channel.send({ type: "state", state });
+    current.inputs += 1;
+  }
+  if (globals !== sent.globals && stableStringify(globals) !== stableStringify(sent.globals)) {
+    sent.globals = globals;
+    current.channel.send({ type: "globals", globals });
+    current.inputs += 1;
+  }
+  return current.inputs !== before;
+}
 function FrameView(props) {
   const { entry, frameUrl, answers, descriptionKey, ctx } = props;
   const labGlobals2 = useContext(StoryGlobalsContext);
@@ -1693,29 +1902,29 @@ function FrameView(props) {
   const slotRef = useRef(null);
   const inView = useNearViewport(hostRef, IN_VIEW_MARGIN);
   const link = useRef(null);
-  const latest = useLatest({ ...props, globals, overrides, pool, lab, title });
+  const latestRef = useLatest({ ...props, globals, overrides, pool, lab, title });
   const [fault, setFault] = useState(null);
   const [pending, setPending] = useState(true);
   const init = useCallback((current) => {
-    const { ctx: live, globals: liveGlobals } = latest.current;
+    const { ctx: live, globals: liveGlobals } = latestRef.current;
     current.awaiting = null;
     current.sent = { config: storyConfig(live.config), state: live.state, globals: liveGlobals };
     current.inputs += 1;
     current.channel.send({ type: "init", ...current.sent });
-  }, [latest]);
+  }, [latestRef]);
   const receive = (current, msg) => {
-    const { ctx: live, answers: answers2, onReady } = latest.current;
+    const { ctx: live, answers: answers2, onReady } = latestRef.current;
     switch (msg.type) {
       case "ready": {
         clearTimeout(current.timer);
         setFault(null);
-        for (const [name, value] of Object.entries(latest.current.overrides)) {
+        for (const [name, value] of Object.entries(latestRef.current.overrides)) {
           current.channel.send({ type: "vars.set", name, value });
         }
         const key = readyKey(msg);
         current.awaiting = key;
-        onReady(latest.current.entry, msg);
-        if (current.awaiting === key && key === latest.current.descriptionKey) init(current);
+        onReady(latestRef.current.entry, msg);
+        if (current.awaiting === key && key === latestRef.current.descriptionKey) init(current);
         break;
       }
       case "rendered":
@@ -1744,7 +1953,7 @@ function FrameView(props) {
         break;
       }
       case "open": {
-        const { lab: liveLab } = latest.current;
+        const { lab: liveLab } = latestRef.current;
         if (!trialId || !liveLab.instruments.some((instrument) => instrument.name === msg.id)) break;
         liveLab.swapTrial(trialId, msg.id);
         setRoute(msg.id, { inPlace: true });
@@ -1782,6 +1991,7 @@ function FrameView(props) {
     };
     const current = {
       channel,
+      deliver: (msg) => receive(current, msg),
       timer,
       awaiting: null,
       sent: null,
@@ -1792,23 +2002,35 @@ function FrameView(props) {
       queued: []
     };
     link.current = current;
-    channel.on((msg) => receive(current, msg));
-    target.postMessage({ type: PORT_HANDOFF, id: latest.current.entry.id }, location.origin, [
+    channel.on((msg) => current.deliver(msg));
+    target.postMessage({ type: PORT_HANDOFF, id: latestRef.current.entry.id }, location.origin, [
       port2
     ]);
   };
   const connectRef = useLatest(connect);
+  const handedOn = useKeptFrame({
+    key: trialId ? `${trialId} ${src}` : null,
+    slot: slotRef,
+    frame: iframeRef,
+    link,
+    onAdopt: (adopted) => {
+      adopted.deliver = (msg) => receive(adopted, msg);
+      setPending(!adopted.hasRendered);
+    },
+    onDrop: () => closeLink(link)
+  });
   useEffect(() => {
     const slot = slotRef.current;
     if (!inView || !slot) return;
-    const claimed = latest.current.pool?.claim() ?? null;
-    const frame = claimed ?? document.createElement("iframe");
+    const adopted = iframeRef.current;
+    const claimed = adopted ? null : latestRef.current.pool?.claim() ?? null;
+    const frame = adopted ?? claimed ?? document.createElement("iframe");
     frame.className = "fg-frame-view";
-    frame.title = latest.current.title;
+    frame.title = latestRef.current.title;
     frame.removeAttribute("tabindex");
     frame.toggleAttribute("data-pending", true);
     iframeRef.current = frame;
-    const unheard = claimed ? void 0 : setTimeout(() => setFault({ phase: null, message: `Frame did not start: ${src}` }), HELLO_TIMEOUT_MS);
+    const unheard = adopted || claimed ? void 0 : setTimeout(() => setFault({ phase: null, message: `Frame did not start: ${src}` }), HELLO_TIMEOUT_MS);
     const onMessage = (event) => {
       if (event.source !== frame.contentWindow || event.origin !== location.origin) return;
       if (event.data?.type !== FRAME_HELLO) return;
@@ -1819,20 +2041,21 @@ function FrameView(props) {
     if (claimed) {
       moveFrame(slot, claimed);
       connectRef.current(claimed);
-    } else {
+    } else if (!adopted) {
       frame.src = src;
       slot.append(frame);
     }
     return () => {
       window.removeEventListener("message", onMessage);
       clearTimeout(unheard);
+      if (handedOn()) return;
       closeLink(link);
       frame.remove();
       iframeRef.current = null;
       setPending(true);
       setFault(null);
     };
-  }, [inView, src, connectRef, latest]);
+  }, [inView, src, connectRef, latestRef, handedOn]);
   useEffect(() => {
     iframeRef.current?.toggleAttribute("data-pending", pending && !fault);
   }, [pending, fault, inView, src]);
@@ -1847,29 +2070,9 @@ function FrameView(props) {
       if (current.awaiting === descriptionKey) init(current);
       return;
     }
-    const sent = current.sent;
-    if (!sent) return;
-    let input = false;
-    const config = storyConfig(ctx.config, sent.config);
-    if (config !== sent.config) {
-      sent.config = config;
-      current.channel.send({ type: "config", config });
-      current.inputs += 1;
-      input = true;
-    }
-    if (ctx.state !== sent.state) {
-      sent.state = ctx.state;
-      current.channel.send({ type: "state", state: ctx.state });
-      current.inputs += 1;
-      input = true;
-    }
-    if (globals !== sent.globals && stableStringify(globals) !== stableStringify(sent.globals)) {
-      sent.globals = globals;
-      current.channel.send({ type: "globals", globals });
-      current.inputs += 1;
-      input = true;
+    if (current.sent && sendInputs(current, current.sent, { config: ctx.config, state: ctx.state, globals })) {
+      setFault((shown) => shown?.phase === "render" ? null : shown);
     }
-    if (input) setFault((shown) => shown?.phase === "render" ? null : shown);
   }, [ctx.config, ctx.state, globals, descriptionKey, init]);
   return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "fg-frame-host", children: [
     /* @__PURE__ */ jsx("div", { ref: slotRef, className: "fg-frame-slot" }),
@@ -1939,21 +2142,21 @@ function useStoryRegistry(index, options) {
     setRevisions((prev) => pruned(prev, ids));
   }
   const imports = useRef(/* @__PURE__ */ new Map());
-  const live = useLatest({ index, importers, setup, load, libraries });
+  const liveRef = useLatest({ index, importers, setup, load, libraries });
   const missing = useRef(/* @__PURE__ */ new Set());
   const importOf = useCallback((file) => {
     let loading = imports.current.get(file);
     if (!loading) {
-      const importer = live.current.importers?.[file];
+      const importer = liveRef.current.importers?.[file];
       if (!importer) missing.current.add(file);
       loading = importer ? importer() : Promise.reject(new Error(`No importer for ${file}`));
       imports.current.set(file, loading);
     }
     return loading;
-  }, [live]);
+  }, [liveRef]);
   const request = useCallback(
     (entry) => {
-      const { setup: current, load: loadModule } = live.current;
+      const { setup: current, load: loadModule } = liveRef.current;
       const settle = (ids2, result) => {
         setLoaded((prev) => {
           const next = new Map(prev);
@@ -1971,7 +2174,7 @@ function useStoryRegistry(index, options) {
         });
       };
       if (isIndexId(entry.id)) {
-        const entries = live.current.index.filter((e) => !isIndexId(e.id) && indexId(e.title) === entry.id);
+        const entries = liveRef.current.index.filter((e) => !isIndexId(e.id) && indexId(e.title) === entry.id);
         const files = [...new Set(entries.map((e) => e.file))];
         void Promise.all(files.map(importOf)).then(async (mods) => {
           const byFile = new Map(files.map((file, i) => [file, loadModule(mods[i] ?? {}, entry.title, current.parameters)]));
@@ -1984,7 +2187,7 @@ function useStoryRegistry(index, options) {
             kind: "index",
             bundle: {
               title: entry.title,
-              library: live.current.libraries.of(entry),
+              library: liveRef.current.libraries.of(entry),
               ...entry.componentDescription === void 0 ? {} : { description: entry.componentDescription },
               ...entry.tags === void 0 ? {} : { tags: entry.tags },
               galleries: entries.filter(isGallery).map((e) => e.id),
@@ -1997,7 +2200,7 @@ function useStoryRegistry(index, options) {
         }).catch((error) => fail([entry.id], error));
         return;
       }
-      const siblings = live.current.index.filter((e) => e.file === entry.file && !isIndexId(e.id));
+      const siblings = liveRef.current.index.filter((e) => e.file === entry.file && !isIndexId(e.id));
       const ids = siblings.map((e) => e.id);
       void importOf(entry.file).then(async (mod) => {
         const stories = loadModule(mod, entry.title, current.parameters);
@@ -2012,18 +2215,18 @@ function useStoryRegistry(index, options) {
         settle(ids, result);
       }).catch((error) => fail(ids, error));
     },
-    [importOf, live]
+    [importOf, liveRef]
   );
   const reload = useCallback(
     (file) => {
       imports.current.delete(file);
-      const affected = live.current.index.filter((e) => e.file === file || isIndexId(e.id) && live.current.index.some((s) => s.file === file && indexId(s.title) === e.id));
+      const affected = liveRef.current.index.filter((e) => e.file === file || isIndexId(e.id) && liveRef.current.index.some((s) => s.file === file && indexId(s.title) === e.id));
       const ids = new Set(affected.map((e) => e.id));
       setLoaded((prev) => pruned(prev, new Set([...prev.keys()].filter((id) => !ids.has(id)))));
       setFaults((prev) => pruned(prev, new Set([...prev.keys()].filter((id) => !ids.has(id)))));
       setGenerations((prev) => new Map(prev).set(file, (prev.get(file) ?? 0) + 1));
     },
-    [live]
+    [liveRef]
   );
   useEffect(() => {
     for (const file of [...missing.current]) {
@@ -2048,7 +2251,7 @@ function useStoryRegistry(index, options) {
       const answers = previous.books.get(entry.id) ?? createAnswerBook();
       books.set(entry.id, answers);
       const held = previous.built.get(entry.id);
-      const kept = held && held.entryKey === entryKey && held.ready === ready && held.loaded === had && held.fault === fault && held.frameUrl === frameUrl && held.globals === globals && held.setup === setup && held.inDocument === inDocument && held.generation === generation && held.revision === revision ? held : {
+      const kept2 = held && held.entryKey === entryKey && held.ready === ready && held.loaded === had && held.fault === fault && held.frameUrl === frameUrl && held.globals === globals && held.setup === setup && held.inDocument === inDocument && held.generation === generation && held.revision === revision ? held : {
         entryKey,
         ready,
         loaded: had,
@@ -2061,8 +2264,8 @@ function useStoryRegistry(index, options) {
         revision,
         instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals }) : had ? documentInstrument({ entry, loaded: had, setup, globals }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
       };
-      built.set(entry.id, kept);
-      return kept.instrument;
+      built.set(entry.id, kept2);
+      return kept2.instrument;
     });
     const unchanged = list.length === previous.list.length && list.every((i, n) => i === previous.list[n]);
     return { built, books, list: unchanged ? previous.list : list };
@@ -2167,10 +2370,10 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
-      { id: "fg-info", region: "palette", item: infoCommand },
       ...config?.cssVars === false ? [] : [CSS_VARS_SECTION],
       A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
+      { id: "fg-info", region: "header", group: "story", item: infoCommand },
       ...config?.labChrome ?? []
     ],
     [index, infoCommand, declarations, config?.cssVars, config?.labChrome]