@weasel-js/forge 1.10.0 → 1.11.0

package/dist/shell/index.js

@@ -1,26 +1,27 @@
-import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-DKWHGSBZ.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-DPTECNYC.js';
 import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
-import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-V4RI7GWD.js';
+import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, createKitRoot, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-R5F44ECM.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-ENXU34PI.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-ENXU34PI.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-4NM3RTYK.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-J3GYSNCK.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-J3GYSNCK.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-7BQPHMA2.js';
+import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-NVNTQ4AT.js';
 import '../chunk-L5XM5VKB.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 '../chunk-SQ4KCIEH.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-2OJAV522.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, ToggleBar as ToggleBar$1, Input, TokenPanel, inferTokenType, 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 { formatShortcut, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport } from '@weasel-js/ui';
+import { TOKEN_MANIFEST, themeAxes, weaselTheme, THEME_SOURCES, resolveTheme, isColorModePreference, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
 import { useLatest, historyKey, createHistory, swapOp, isPlainObject } from '@weasel-js/core';
+import { useResolvedColorMode } from '@weasel-js/theme/react';
+import { pref } from '@weasel-js/prefs';
 
 function Finding({ finding }) {
   return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
@@ -339,12 +340,30 @@ function missingInstrument(id, globals = {}) {
   };
 }
 var ICONS = {
-  color: "drop",
-  type: "type",
-  size: "measure",
-  motion: "curveEaseInOut",
-  depth: "layers",
-  other: "more"
+  color: (
+    /* @icon */
+    "ui:drop"
+  ),
+  type: (
+    /* @icon */
+    "ui:type"
+  ),
+  size: (
+    /* @icon */
+    "core:measure"
+  ),
+  motion: (
+    /* @icon */
+    "ui:curveEaseInOut"
+  ),
+  depth: (
+    /* @icon */
+    "ui:layers"
+  ),
+  other: (
+    /* @icon */
+    "ui:more"
+  )
 };
 var PANEL = ".fg-css-vars";
 var HOST = ".lk-sidebar-section, .lk-panel-tile";
@@ -553,15 +572,24 @@ function applyTokenEdits(definition, edits, selection) {
   }
   return { ok: true, definition: root };
 }
+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(() => {
-    const definition = THEME_SOURCES[THEME_NAME];
     if (!definition) return {};
-    const selection = selectionFor(definition.axes ?? {}, globals);
     const generated = new Set(scales.flatMap((scale) => scale.tokens));
     return Object.fromEntries(
       Object.entries(overrides).flatMap(([name, value]) => {
@@ -570,7 +598,7 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
         return writtenOut(definition, token, selection) ? [[token, value]] : [];
       })
     );
-  }, [globals, scales, overrides]);
+  }, [definition, selection, scales, overrides]);
   const [saving, setSaving] = useState(false);
   const [held, setHeld] = useState(null);
   const setNotice = (next) => setHeld(next && { ...next, trialId });
@@ -585,7 +613,6 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
         setNotice({ tone: "error", text: `${file} has changed since this page loaded. Reload to edit against it.` });
         return;
       }
-      const selection = selectionFor(stored.definition.axes ?? {}, globals);
       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) {
@@ -627,6 +654,39 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
     save
   };
 }
+var MANIFEST = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
+function groupOf(name) {
+  const segments = name.replace(/^--/, "").split("-");
+  return segments.length > 1 ? segments.slice(0, -1).join("-") : name.replace(/^--/, "");
+}
+function useStoryTokens(vars) {
+  const [showUnused, setShowUnused] = usePersistedState("fg-css-vars-unused", false, { scope: "lab" });
+  const tokens = useMemo(
+    () => vars.flatMap(({ name, value, used }) => {
+      if (!used && !showUnused) return [];
+      const known = MANIFEST.get(name);
+      return [{ name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value }];
+    }),
+    [vars, showUnused]
+  );
+  const emptyText = vars.length > 0 && !showUnused ? "The story uses no variables." : "The story\u2019s frame has reported no variables.";
+  return { tokens, showUnused, setShowUnused, emptyText };
+}
+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;
@@ -690,13 +750,13 @@ var TABS = [
   { value: "theme", label: "Theme" },
   { value: "story", label: "Story" }
 ];
-var MANIFEST = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
+var MANIFEST2 = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
 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) => `${TOKEN_PREFIX}${name}-${step}`);
-  const group = MANIFEST.get(tokens[0] ?? "")?.group;
+  const group = MANIFEST2.get(tokens[0] ?? "")?.group;
   if (!group) return [];
   const factors = Array.isArray(def.factors) && def.factors.every(literal) ? def.factors : null;
   const rule = def.factors !== void 0 ? factors ? { kind: "factors", factors } : "factors" : def.ratio !== void 0 ? literal(def.ratio) ? { kind: "ratio", ratio: def.ratio } : "ratio" : literal(def.step) ? { kind: "step", step: def.step } : "step";
@@ -726,10 +786,6 @@ function standingScale(source, amounts) {
   const base = (amounts[at] ?? 0) / (rule.factors[at] ?? 1);
   return { ...seed, base: Math.round(base * 100) / 100, rule };
 }
-function groupOf(name) {
-  const segments = name.replace(/^--/, "").split("-");
-  return segments.length > 1 ? segments.slice(0, -1).join("-") : name.replace(/^--/, "");
-}
 var NO_GLOBALS = {};
 function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const trialId = useTrialId();
@@ -743,22 +799,9 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const [edited, setEdited] = usePersistedState("fg-css-vars-scales", {}, { scope: "trial" });
   const [tab, setTab] = useState("theme");
   const [filter, setFilter] = useState("");
-  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]);
+  const themeTokens = useThemeTokens(globals, frame.vars);
+  const story = useStoryTokens(frame.vars);
+  const tokens = tab === "theme" ? themeTokens : story.tokens;
   const query = filter.trim().toLowerCase();
   const shown = tokens.map((token) => {
     const override = overrides[token.name];
@@ -850,27 +893,27 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
                   placeholder: "Filter",
                   value: filter,
                   onChange: setFilter,
-                  leadingAdornment: /* @__PURE__ */ jsx(SearchIcon, { size: 12 })
+                  leadingAdornment: /* @__PURE__ */ jsx(Icon, { name: (
+                    /* @icon */
+                    "ui:search"
+                  ), 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 }) })
+                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Undo", variant: "ghost", size: "sm", disabled: !history2.canUndo, onClick: () => history2.step("undo"), children: /* @__PURE__ */ jsx(Icon, { name: (
+                  /* @icon */
+                  "core: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: (
+                  /* @icon */
+                  "core: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
+            tab === "story" ? /* @__PURE__ */ jsx(Checkbox, { className: "fg-css-vars__unused", isSelected: story.showUnused, onChange: story.setShowUnused, children: "Show variables the story doesn\u2019t use" }) : null,
+            tab === "theme" ? /* @__PURE__ */ jsx(SaveRow, { pending, saving, notice, onSave: () => void save() }) : 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(
+          shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: tokens.length > 0 ? "No variables match." : tab === "story" ? story.emptyText : "The story\u2019s frame has reported no variables." }) : /* @__PURE__ */ jsx("div", { className: "fg-css-vars__list", children: /* @__PURE__ */ jsx(
             TokenPanel,
             {
               tokens: shown,
@@ -887,6 +930,13 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     )
   );
 }
+function SaveRow({ pending, saving, notice, onSave }) {
+  if (!pending && !notice) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
+    pending ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: onSave, 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
+  ] });
+}
 function FocusedCssVars() {
   const { focusedTrialId, trials, instruments } = useLabContext();
   const labGlobals2 = useContext(StoryGlobalsContext);
@@ -904,6 +954,19 @@ var CSS_VARS_SECTION = {
   region: "aside",
   item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), fill: true, body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
+var KEYS = { kind: "key", key: "i", mods: { mod: true } };
+function infoItem(open) {
+  return {
+    icon: (
+      /* @icon */
+      "ui:info"
+    ),
+    label: "Info",
+    shortcut: formatShortcut({ key: KEYS.key, mod: KEYS.mods.mod }),
+    keys: KEYS,
+    onActivate: open
+  };
+}
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
   const out = [];
@@ -1036,10 +1099,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;
@@ -1066,7 +1129,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;
@@ -1087,7 +1150,7 @@ function createFramePool(frameUrl, size = 2) {
       disposed = true;
       cancelRefill?.();
       for (const stop of [...waits]) stop();
-      shelf.remove();
+      shelf2.remove();
     }
   };
 }
@@ -1097,7 +1160,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;
@@ -1115,8 +1178,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();
@@ -1132,7 +1195,7 @@ function PlayheadSync({ trialId, route, applied }) {
       off();
       window.removeEventListener("hashchange", onHashChange);
     };
-  }, [clock, route, applied]);
+  }, [clock, route, appliedRef]);
   return null;
 }
 function RoutePlayhead() {
@@ -1141,7 +1204,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) {
@@ -1177,7 +1240,8 @@ function GlobalsToolbar({ declarations }) {
         NestedGlobals,
         {
           label: declaration.label,
-          icon: declaration.icon ?? "tune",
+          icon: declaration.icon ?? /* @icon */
+          "core:tune",
           nested,
           values,
           set
@@ -1235,6 +1299,41 @@ function LabGlobals({
   useEffect(() => onChange(resolved), [resolved, onChange]);
   return null;
 }
+var leafPath = (n) => `globals.d${n}.v`;
+function globalsMenu(declarations, values, set) {
+  const entries = Object.entries(declarations);
+  if (entries.length === 0) return void 0;
+  const submenus = {};
+  const current = {};
+  const keys = /* @__PURE__ */ new Map();
+  entries.forEach(([key, declaration], n) => {
+    const options = labOptions(declaration, values);
+    submenus[`d${n}`] = pref.group(
+      declaration.label,
+      { v: pref.enum(declaration.label, declaration.default, options) },
+      { as: "menu" }
+    );
+    current[leafPath(n)] = values[key];
+    keys.set(leafPath(n), key);
+  });
+  return {
+    schema: pref.group("", { globals: pref.group("Globals", submenus, { as: "menu" }) }),
+    values: current,
+    onChange: (path, value) => {
+      const key = keys.get(path);
+      if (key !== void 0 && typeof value === "string") set(key, value);
+    }
+  };
+}
+function GlobalsMenus({
+  declarations,
+  onMenus
+}) {
+  const [values, set] = useLabGlobals(declarations);
+  const menus = useMemo(() => globalsMenu(declarations, values, set), [declarations, values, set]);
+  useEffect(() => onMenus(menus), [menus, onMenus]);
+  return null;
+}
 function KnobSync({ schema, config }) {
   const { setConfig } = useTrialState();
   const reading = useRef(true);
@@ -1481,13 +1580,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]);
@@ -1495,7 +1594,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() !== "";
@@ -1786,6 +1885,54 @@ function createAnswerBook() {
 
 // 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) {
@@ -1800,6 +1947,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);
@@ -1906,6 +2074,7 @@ function FrameView(props) {
     };
     const current = {
       channel,
+      deliver: (msg) => receive(current, msg),
       timer,
       awaiting: null,
       sent: null,
@@ -1916,23 +2085,35 @@ function FrameView(props) {
       queued: []
     };
     link.current = current;
-    channel.on((msg) => receive(current, msg));
+    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 = latestRef.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 = 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;
@@ -1943,20 +2124,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, latestRef]);
+  }, [inView, src, connectRef, latestRef, handedOn]);
   useEffect(() => {
     iframeRef.current?.toggleAttribute("data-pending", pending && !fault);
   }, [pending, fault, inView, src]);
@@ -1971,29 +2153,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 (current.sent && sendInputs(current, current.sent, { config: ctx.config, state: ctx.state, globals })) {
+      setFault((shown) => shown?.phase === "render" ? null : shown);
     }
-    if (globals !== sent.globals && stableStringify(globals) !== stableStringify(sent.globals)) {
-      sent.globals = globals;
-      current.channel.send({ type: "globals", globals });
-      current.inputs += 1;
-      input = true;
-    }
-    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" }),
@@ -2172,7 +2334,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,
@@ -2185,8 +2347,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 };
@@ -2224,26 +2386,15 @@ function RouteOpener() {
   }, [route, lab]);
   return null;
 }
-function useInfoShortcut(open) {
+function useDocumentTitle(title) {
   useEffect(() => {
-    const onKeyDown = (event) => {
-      if (event.key !== "i" && event.key !== "I") return;
-      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
-      const target = event.target;
-      if (target?.isContentEditable || /^(input|textarea|select)$/i.test(target?.tagName ?? "")) return;
-      event.preventDefault();
-      open(true);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open]);
+    document.title = title;
+  }, [title]);
 }
 function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies }) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const title = config?.title ?? DEFAULT_TITLE;
-  useEffect(() => {
-    document.title = title;
-  }, [title]);
+  useDocumentTitle(title);
   const [frames] = useState(createTrialFrames);
   const [clocks] = useState(createTrialClocks);
   const [pool, setPool] = useState(null);
@@ -2279,15 +2430,11 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
   const themeFor = config?.labTheme;
   const labTheme = useMemo(() => themeFor?.(labValues), [themeFor, labValues]);
   const [infoOpen, setInfoOpen] = useState(false);
-  useInfoShortcut(setInfoOpen);
   const reportLabValues = useCallback(
     (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
     []
   );
-  const infoCommand = useMemo(
-    () => ({ icon: InfoIcon, label: "Info", shortcut: "\u2318I", onActivate: () => setInfoOpen(true) }),
-    []
-  );
+  const infoCommand = useMemo(() => infoItem(() => setInfoOpen(true)), []);
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
@@ -2299,6 +2446,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
     ],
     [index, infoCommand, declarations, config?.cssVars, config?.labChrome]
   );
+  const [menus, setMenus] = useState();
   const first = index[0];
   if (!first) {
     return /* @__PURE__ */ jsxs("div", { className: "fg-empty", children: [
@@ -2318,6 +2466,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       ...storage ? { storage } : {},
       labChrome,
       addTrial: false,
+      ...menus ? { menus } : {},
       ...config?.controls ? { controls: config.controls } : {},
       ...config?.pages ? { pages: config.pages } : {},
       ...config?.path !== void 0 ? { path: config.path } : {},
@@ -2334,7 +2483,8 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
             onOpenChange: setInfoOpen
           }
         ),
-        /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
+        /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues }),
+        /* @__PURE__ */ jsx(GlobalsMenus, { declarations, onMenus: setMenus })
       ]
     }
   ) }) }) }) }) }) });
@@ -2342,7 +2492,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
 function mountWorkshop({ container, ...props }) {
   const target = container ?? document.getElementById("root");
   if (!target) throw new Error("mountWorkshop: no container given and no #root element");
-  const root = createRoot(target);
+  const root = createKitRoot(target, props.setup?.icons);
   const changes = createStoryChanges();
   let current = { ...props, changes };
   root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));