@weasel-js/forge 1.11.0 → 1.12.0

package/dist/shell/index.js

@@ -1,38 +1,58 @@
-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, createKitRoot, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-R5F44ECM.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-LTTEILXY.js';
+import { DEFAULT_TITLE, CAPTURE_PATH, messageOf, MIN_DPR, MAX_DPR } from '../chunk-ORMMZ5PV.js';
+import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, IndexPage, openChannel } from '../chunk-ATI7FYJ7.js';
 import { isGallery } from '../chunk-WEQSLPKT.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 { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, LiveLensesContext, trialAt, describeLens, createLiveLenses, useCopyConfig, useCssOverrides, LiveFrameCopies, useTrialClock, TrialHost, LiveCopies, resolveContextOf, resolveComparison, withArgs, scrollerOf } from '../chunk-YDLRSEUN.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-YDLRSEUN.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isForgePath, isGlobalsPath } from '../chunk-3BAM6M26.js';
+import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN, varRefs, cssRulesOf } from '../chunk-WMGEO5M6.js';
 import '../chunk-L5XM5VKB.js';
-import '../chunk-ZAWXMUGZ.js';
-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 '../chunk-5WS67HMU.js';
+import '../chunk-KEQBGDUZ.js';
+import { stableStringify, FRAME_HELLO, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-GH5RE5X5.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, ToggleBar as ToggleBar$1, Input, TokenPanel, useLabEntries, 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 { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useId, useContext, useReducer, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createEmitter } from '@weasel-js/registry';
 import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
-import { formatShortcut, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport } from '@weasel-js/ui';
+import { Slider } from '@weasel-js/ui/components/Slider';
+import { Transport } from '@weasel-js/ui/components/Timeline';
 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 { useLatest, useActionsRegistry, effectivePose, useMenuHost, useMenus, sceneToAdapter, parseColor, contrastRatio, wcagLevels, historyKey, isPlainObject, createHistory, keymapShortcuts, actionBindings, keySpecShortcut, keymapLeaderId, swapOp } from '@weasel-js/core';
+import { Button as Button$1 } from '@weasel-js/ui/components/Button';
+import { Checkbox } from '@weasel-js/ui/components/Checkbox';
+import { Icon } from '@weasel-js/ui/components/Icon';
+import { TOKEN_CATEGORIES, tokenCategory } from '@weasel-js/ui/components/TokenPanel';
+import { ToggleBar } from '@weasel-js/ui/components/ToggleBar';
 import { useResolvedColorMode } from '@weasel-js/theme/react';
+import { formatShortcut } from '@weasel-js/ui/components/ToolPalette';
+import { Dialog } from '@weasel-js/ui/components/Dialog';
+import { createLensScene, settingsOf, resolveSource, LensOverlay, LensActions, lensIdsOf, reticleAt, lensesOf, MAX_LENSES, addLensOps, unavailableText, useShownSource, requestsOf, BODY_SIZE, setLensOps, readBitmap, LENS_REST_MS, probeUnderLens } from '@weasel-js/labkit/loupe';
+import { KeymapHint } from '@weasel-js/ui/components/KeymapHint';
 import { pref } from '@weasel-js/prefs';
+import { splitTopLevel, specificity, compareSpecificity } from '@weasel-js/svg';
+import { Callout } from '@weasel-js/ui/components/Callout';
+import { DisclosureMark } from '@weasel-js/ui/components/Disclosure';
 
-function Finding({ finding }) {
-  return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
+function pointAt(point, nodes) {
+  const enter = (event) => {
+    event.stopPropagation();
+    point(nodes);
+  };
+  return { onMouseOver: enter, onFocus: enter, onMouseLeave: () => point(null), onBlur: () => point(null) };
+}
+function Finding({ finding, point }) {
+  return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", ...pointAt(point, finding.nodes), children: [
     /* @__PURE__ */ jsxs("p", { className: "fg-a11y__help", children: [
       /* @__PURE__ */ jsx("a", { href: finding.helpUrl, target: "_blank", rel: "noreferrer", children: finding.help }),
       finding.impact ? /* @__PURE__ */ jsx("span", { className: "fg-a11y__impact", "data-impact": finding.impact, children: finding.impact }) : null
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__nodes", children: finding.nodes.map((node) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: node.target.join(" ") }) }, `${finding.id}:${node.target.join(",")}`)) })
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__nodes", children: finding.nodes.map((node) => /* @__PURE__ */ jsx("li", { ...pointAt(point, [node]), children: /* @__PURE__ */ jsx("code", { children: node.target.join(" ") }) }, `${finding.id}:${node.target.join(",")}`)) })
   ] });
 }
-function Findings({ title, findings }) {
+function Findings({ title, findings, point }) {
   if (findings.length === 0) return null;
   return /* @__PURE__ */ jsxs("section", { className: "fg-a11y__group", children: [
     /* @__PURE__ */ jsxs("h3", { className: `fg-a11y__group-title ${num.numeric}`, children: [
@@ -41,7 +61,7 @@ function Findings({ title, findings }) {
       findings.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__findings", children: findings.map((finding) => /* @__PURE__ */ jsx(Finding, { finding }, finding.id)) })
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__findings", children: findings.map((finding) => /* @__PURE__ */ jsx(Finding, { finding, point }, finding.id)) })
   ] });
 }
 function A11yPanel() {
@@ -60,6 +80,13 @@ function A11yPanel() {
     ran.current = audit;
     start(audit);
   }, [audit, start]);
+  const send = frame.send;
+  const [pointed, setPointed] = useState(null);
+  useEffect(() => {
+    if (!send || !pointed) return;
+    send({ type: "a11y.highlight", targets: pointed.map((node) => node.target) });
+    return () => send({ type: "a11y.highlight", targets: [] });
+  }, [send, pointed]);
   const rerun = () => {
     if (audit) start(audit);
   };
@@ -82,8 +109,8 @@ function A11yPanel() {
         outcome.report.passes,
         " passes"
       ] }),
-      /* @__PURE__ */ jsx(Findings, { title: "Violations", findings: outcome.report.violations }),
-      /* @__PURE__ */ jsx(Findings, { title: "Needs review", findings: outcome.report.incomplete })
+      /* @__PURE__ */ jsx(Findings, { title: "Violations", findings: outcome.report.violations, point: setPointed }),
+      /* @__PURE__ */ jsx(Findings, { title: "Needs review", findings: outcome.report.incomplete, point: setPointed })
     ] }) : null
   ] });
 }
@@ -102,6 +129,56 @@ var A11Y_SECTION = {
   region: "aside",
   item: { title: "Accessibility", body: /* @__PURE__ */ jsx(FocusedA11y, {}) }
 };
+
+// src/shell/followEdits.ts
+function followEdits(hot, workshop) {
+  const stale = /* @__PURE__ */ new Set();
+  hot?.on("forge:index", (next) => workshop.setIndex(next));
+  hot?.on("forge:deps", (next) => workshop.setDependencies(next));
+  hot?.on("forge:story", ({ file }) => {
+    stale.add(file);
+    workshop.revise();
+  });
+  hot?.on("vite:beforeUpdate", () => workshop.revise());
+  return {
+    importers(next) {
+      if (!next) return;
+      workshop.setImporters(next);
+      for (const file of stale) workshop.reloadStory(file);
+      stale.clear();
+    }
+  };
+}
+function createRevision() {
+  let n = 0;
+  const bumped = createEmitter();
+  return {
+    get: () => n,
+    subscribe: bumped.subscribe,
+    bump() {
+      n += 1;
+      bumped.emit();
+    }
+  };
+}
+function createCaptureTrials() {
+  const trials = /* @__PURE__ */ new Map();
+  const changed = createEmitter();
+  return {
+    publish(trialId, inputs) {
+      trials.set(trialId, inputs);
+      changed.emit();
+      return () => {
+        if (trials.get(trialId) !== inputs) return;
+        trials.delete(trialId);
+        changed.emit();
+      };
+    },
+    get: (trialId) => trials.get(trialId) ?? null,
+    subscribe: changed.subscribe
+  };
+}
+var LoupeCaptureContext = createContext(null);
 function createStoryChanges() {
   const changes = createEmitter();
   return { subscribe: changes.subscribe, emit: changes.emit };
@@ -282,7 +359,38 @@ function IndexTrial({ bundle, setup, config }) {
     };
     return /* @__PURE__ */ jsx(IndexPage, { env, render: bundle.render });
   };
-  return /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render }),
+    /* @__PURE__ */ jsx(LiveCopies, { trialId, layout: "fullscreen", setup, trialConfig: config, children: render })
+  ] });
+}
+function CaptureInputs({ entry, layout, config, state }) {
+  const capture = useContext(LoupeCaptureContext);
+  const trialId = useContext(TrialIdContext);
+  const [overrides] = useCssOverrides();
+  const withdraw = useRef(null);
+  useEffect(() => {
+    if (capture && trialId) withdraw.current = capture.trials.publish(trialId, { entry, layout, config, state, overrides });
+  }, [capture, trialId, entry, layout, config, state, overrides]);
+  useEffect(
+    () => () => {
+      withdraw.current?.();
+      withdraw.current = null;
+    },
+    [capture, trialId]
+  );
+  return null;
+}
+var STILL = { get: () => 0, subscribe: () => () => {
+} };
+function LoupeProvider({ captureBase, revision = STILL, children }) {
+  const [lenses] = useState(createLiveLenses);
+  const [trials] = useState(createCaptureTrials);
+  const capture = useMemo(
+    () => captureBase === void 0 ? null : { base: captureBase, trials, revision },
+    [captureBase, trials, revision]
+  );
+  return /* @__PURE__ */ jsx(LiveLensesContext.Provider, { value: lenses, children: /* @__PURE__ */ jsx(LoupeCaptureContext.Provider, { value: capture, children }) });
 }
 function withPlayhead(schema) {
   return f.schema({ ...schema.nodes, [PLAYHEAD_KEY]: f.custom("forge-playhead", null).hidden() });
@@ -299,7 +407,10 @@ function documentInstrument(options) {
     config,
     defaultConfig: () => config.defaults(),
     initialState: (c) => initialState?.(c) ?? null,
-    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
+    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id),
+      /* @__PURE__ */ jsx(CaptureInputs, { entry, layout: loaded.story.layout, config: ctx.config, state: ctx.state })
+    ] }) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
     ...loaded.kind === "story" && loaded.story.viewport ? { stage: { size: { width: loaded.story.viewport.width, height: loaded.story.viewport.height } } } : {},
     ...timed ? { chrome: [{ id: "fg-transport", region: "status", render: (c) => /* @__PURE__ */ jsx(TrialTransport, { trialId: c.trialId }) }] } : {}
   };
@@ -339,6 +450,50 @@ 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 listeners = /* @__PURE__ */ new Set();
+var pending = null;
+function revealVar(name) {
+  pending = name;
+  for (const fn of [...listeners]) fn(name);
+}
+function subscribeReveal(fn) {
+  listeners.add(fn);
+  if (pending !== null) fn(pending);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+var MARK = "data-revealed";
+function useRevealToken(list, tokens, show, storyReported) {
+  const asked = useRef(null);
+  const [, rerender] = useState(0);
+  useEffect(
+    () => subscribeReveal((name) => {
+      const tab = ["theme", "story"].find((t) => tokens[t].some((token2) => token2.name === name));
+      const token = tab && tokens[tab].find((t) => t.name === name);
+      if (!tab || !token) {
+        if (storyReported && pending === name) pending = null;
+        return;
+      }
+      show(name, tab, tokenCategory(token));
+      asked.current = name;
+      rerender((n) => n + 1);
+    }),
+    [tokens, show, storyReported]
+  );
+  useLayoutEffect(() => {
+    const root = list.current;
+    const revealed = asked.current;
+    if (!root || revealed === null) return;
+    const target = root.querySelector(`[aria-label="${revealed.replace(/["\\]/g, "\\$&")}"]`);
+    for (const el of Array.from(root.querySelectorAll(`[${MARK}]`))) if (el !== target) el.removeAttribute(MARK);
+    if (!target) return;
+    target.setAttribute(MARK, "");
+    target.scrollIntoView?.({ block: "nearest" });
+    if (pending === revealed) pending = null;
+    asked.current = null;
+  });
+}
 var ICONS = {
   color: (
     /* @icon */
@@ -485,8 +640,8 @@ function applyScaleEdits(definition, edits, selection) {
   const write = (slot, value) => {
     let byKey = writes.get(slot.holder);
     if (!byKey) writes.set(slot.holder, byKey = /* @__PURE__ */ new Map());
-    const pending = byKey.get(slot.key);
-    if (pending !== void 0 && pending !== value) throw new EditError(`${slot.where} would need to be both ${pending} and ${value}`);
+    const pending2 = byKey.get(slot.key);
+    if (pending2 !== void 0 && pending2 !== value) throw new EditError(`${slot.where} would need to be both ${pending2} and ${value}`);
     byKey.set(slot.key, value);
   };
   try {
@@ -786,6 +941,15 @@ function standingScale(source, amounts) {
   const base = (amounts[at] ?? 0) / (rule.factors[at] ?? 1);
   return { ...seed, base: Math.round(base * 100) / 100, rule };
 }
+function unsavedScales(edited, overrides) {
+  return SCALE_SOURCES.flatMap((source) => {
+    const edit = edited[source.group];
+    if (!edit || !source.tokens.some((name2) => overrides[name2] !== void 0)) return [];
+    const { name, group, tokens } = source;
+    const clean = scaleValues(source, edit).every(([token, value]) => overrides[token] === value);
+    return clean ? [{ name, group, tokens, edit: { base: edit.base, rule: edit.rule } }] : [];
+  });
+}
 var NO_GLOBALS = {};
 function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const trialId = useTrialId();
@@ -802,6 +966,14 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const themeTokens = useThemeTokens(globals, frame.vars);
   const story = useStoryTokens(frame.vars);
   const tokens = tab === "theme" ? themeTokens : story.tokens;
+  const listRef = useRef(null);
+  const byTab = useMemo(() => ({ theme: themeTokens, story: story.tokens }), [themeTokens, story.tokens]);
+  const show = useCallback((name, at, category) => {
+    setTab(at);
+    setFilter((was) => name.toLowerCase().includes(was.trim().toLowerCase()) ? was : "");
+    setFolds((prev) => prev[category] ? { ...prev, [category]: false } : prev);
+  }, [setFolds]);
+  useRevealToken(listRef, byTab, show, frame.vars.length > 0);
   const query = filter.trim().toLowerCase();
   const shown = tokens.map((token) => {
     const override = overrides[token.name];
@@ -842,17 +1014,8 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
       `scale:${group}`
     );
   };
-  const unsaved = useMemo(
-    () => SCALE_SOURCES.flatMap((source) => {
-      const edit = edited[source.group];
-      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 { pending, saving, notice, save } = useThemeSave({ trialId, globals, themeApi, scales: unsaved, overrides, history: history2 });
+  const unsaved = useMemo(() => unsavedScales(edited, overrides), [edited, overrides]);
+  const { pending: pending2, saving, notice, save } = useThemeSave({ trialId, globals, themeApi, scales: unsaved, overrides, history: history2 });
   const onCollapsedChange = useCallback(
     (category, collapsed) => setFolds((prev) => ({ ...prev, [category]: collapsed })),
     [setFolds]
@@ -911,9 +1074,9 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
               ] })
             ] }),
             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
+            tab === "theme" ? /* @__PURE__ */ jsx(SaveRow, { pending: pending2, saving, notice, onSave: () => void save() }) : null
           ] }),
-          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(
+          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", { ref: listRef, className: "fg-css-vars__list", children: /* @__PURE__ */ jsx(
             TokenPanel,
             {
               tokens: shown,
@@ -930,10 +1093,10 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     )
   );
 }
-function SaveRow({ pending, saving, notice, onSave }) {
-  if (!pending && !notice) return null;
+function SaveRow({ pending: pending2, saving, notice, onSave }) {
+  if (!pending2 && !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,
+    pending2 ? /* @__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
   ] });
 }
@@ -954,6 +1117,147 @@ var CSS_VARS_SECTION = {
   region: "aside",
   item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), fill: true, body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
+
+// src/shell/cssVars/cssVarsChrome.ts
+var RECORD = "fg-css-vars-shown";
+function cssVarsChrome(shown, toggle) {
+  return [
+    {
+      id: "fg-css-vars-toggle",
+      region: "header",
+      group: "story",
+      item: { icon: (
+        /* @icon */
+        "ui:typeBraces"
+      ), label: "CSS Vars panel", pressed: shown, onActivate: toggle }
+    },
+    ...shown ? [CSS_VARS_SECTION] : []
+  ];
+}
+function CssVarsChrome({ onChrome }) {
+  const [shown, setShown] = usePersistedState(RECORD, false, { scope: "lab" });
+  const chrome = useMemo(() => cssVarsChrome(shown, () => setShown((was) => !was)), [shown, setShown]);
+  useEffect(() => onChrome(chrome), [chrome, onChrome]);
+  useEffect(() => subscribeReveal(() => setShown(true)), [setShown]);
+  return null;
+}
+function describeBinding(spec) {
+  const chip = keySpecShortcut(spec);
+  if (chip) return spec.kind === "key-held" ? `Hold ${formatShortcut(chip)}` : formatShortcut(chip) ?? "";
+  switch (spec.kind) {
+    case "wheel":
+      return "Wheel";
+    case "hover":
+      return "Hover";
+    case "drag":
+      return "Drag";
+    case "click":
+      return "Click";
+    default:
+      return spec.kind[0].toUpperCase() + spec.kind.slice(1);
+  }
+}
+function keymapDefs(entries) {
+  const defs = [];
+  for (const entry of entries.values()) {
+    if (!entry.eligibility.keymap) continue;
+    const open = entries.get(`${entry.id}.leader`)?.actions?.find((a) => a.id === keymapLeaderId(entry.id));
+    const leader = open ? actionBindings(open).map((b) => b.spec) : [];
+    if (leader.length === 0) continue;
+    defs.push({ id: entry.id, label: entry.presentation?.label ?? entry.id, leader, bindings: entry.bindings ?? [] });
+  }
+  return defs;
+}
+function keyRows(actions, defs, overrides) {
+  const inKeymap = /* @__PURE__ */ new Map();
+  for (const def of defs) {
+    for (const [id, chips] of keymapShortcuts(def, overrides)) {
+      inKeymap.set(id, [...inKeymap.get(id) ?? [], ...chips.flatMap((c) => formatShortcut(c) ?? [])]);
+    }
+  }
+  const rows = [];
+  for (const action of actions) {
+    const keys = /* @__PURE__ */ new Set();
+    const others = /* @__PURE__ */ new Set();
+    for (const { spec } of actionBindings(action)) {
+      (keySpecShortcut(spec) ? keys : others).add(describeBinding(spec));
+    }
+    for (const chip of inKeymap.get(action.id) ?? []) keys.add(chip);
+    if (keys.size + others.size === 0) continue;
+    rows.push({ id: action.id, label: action.label, group: action.group ?? "other", keys: [...keys], others: [...others] });
+  }
+  return rows.sort((a, b) => a.group.localeCompare(b.group) || a.label.localeCompare(b.label));
+}
+function useKeyRows() {
+  const registry = useActionsRegistry();
+  const entries = useLabEntries();
+  const [version, bump] = useReducer((n) => n + 1, 0);
+  useEffect(() => registry?.subscribe(bump), [registry]);
+  return useMemo(
+    () => registry ? keyRows(registry.list(), keymapDefs(entries), registry.bindingOverrides()) : [],
+    // `version` is the registry's change signal: `list()` has no identity to key on.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [registry, entries, version]
+  );
+}
+function KeysPanel() {
+  const rows = useKeyRows();
+  if (rows.length === 0) return /* @__PURE__ */ jsx("p", { className: "fg-keys__empty", children: "No key bindings." });
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of rows) groups.set(row.group, [...groups.get(row.group) ?? [], row]);
+  return /* @__PURE__ */ jsx("div", { className: "fg-keys", children: [...groups].map(([group, members]) => /* @__PURE__ */ jsxs("section", { className: "fg-keys__group", "aria-label": group, children: [
+    /* @__PURE__ */ jsx("h3", { className: "fg-keys__heading", children: group }),
+    /* @__PURE__ */ jsx("ul", { className: "fg-keys__list", children: members.map((row) => /* @__PURE__ */ jsxs("li", { className: "fg-keys__row", children: [
+      /* @__PURE__ */ jsx("span", { className: "fg-keys__label", children: row.label }),
+      /* @__PURE__ */ jsxs("span", { className: "fg-keys__chips", children: [
+        row.keys.map((chip) => /* @__PURE__ */ jsx("kbd", { className: "fg-keys__chip", children: chip }, chip)),
+        row.others.map((chip) => /* @__PURE__ */ jsx("kbd", { className: "fg-keys__chip fg-keys__chip--gesture", children: chip }, chip))
+      ] })
+    ] }, row.id)) })
+  ] }, group)) });
+}
+var KEYS_SECTION = {
+  id: "fg-keys",
+  region: "aside",
+  item: { title: "Keys", body: /* @__PURE__ */ jsx(KeysPanel, {}) }
+};
+
+// src/shell/keys/keysChrome.ts
+var RECORD2 = "fg-keys-shown";
+var KEYS_TOGGLE_ID = "forge.keys.toggle";
+var OPEN_KEY = { kind: "key", key: "/", code: "Slash", mods: { alt: true } };
+function keysChrome(shown, toggle) {
+  return [
+    {
+      id: "fg-keys-toggle",
+      region: "header",
+      group: "story",
+      item: { icon: (
+        /* @icon */
+        "ui:keyboard"
+      ), label: "Keys panel", pressed: shown, onActivate: toggle }
+    },
+    ...shown ? [KEYS_SECTION] : []
+  ];
+}
+function KeysChrome({ onChrome }) {
+  const [shown, setShown] = usePersistedState(RECORD2, false, { scope: "lab" });
+  const registry = useActionsRegistry();
+  const chrome = useMemo(() => keysChrome(shown, () => setShown((was) => !was)), [shown, setShown]);
+  useEffect(() => onChrome(chrome), [chrome, onChrome]);
+  useEffect(() => {
+    if (!registry) return;
+    const action = {
+      id: KEYS_TOGGLE_ID,
+      label: "Toggle the keys panel",
+      group: "forge",
+      defaultBinding: [{ spec: OPEN_KEY, opts: { id: KEYS_TOGGLE_ID } }],
+      invoker: { timing: "immediate", run: () => setShown((was) => !was) }
+    };
+    return registry.register(action);
+  }, [registry, setShown]);
+  return null;
+}
 var KEYS = { kind: "key", key: "i", mods: { mod: true } };
 function infoItem(open) {
   return {
@@ -1155,6 +1459,1010 @@ function createFramePool(frameUrl, size = 2) {
   };
 }
 var FramePoolContext = createContext(null);
+var COMPARE_WITH_ID = "loupe.compare.with";
+var COMPARE_DPR_ID = "loupe.compare.dpr";
+var PIXELS_ONLY = "Pixels only";
+var COMPARE_MENU_ID = "loupe.compare";
+var DPRS = [1, 2, 3];
+function argChoices(shape, at) {
+  return Object.entries(shape).flatMap(([key, entry]) => {
+    const path = at === "" ? key : `${at}.${key}`;
+    if (isForgePath(path)) return [];
+    if (isConfigBranch(entry)) return argChoices(entry.children, path);
+    const options = entry.kind === "boolean" ? [
+      { value: true, label: "On" },
+      { value: false, label: "Off" }
+    ] : entry.annotations.options ?? [];
+    return options.map((o) => ({
+      action: COMPARE_WITH_ID,
+      key: `arg.${path}.${String(o.value)}`,
+      group: `Arg ${path}`,
+      label: o.label,
+      compare: { kind: "custom", args: { [path]: o.value } }
+    }));
+  });
+}
+function compareChoices(declarations, schema) {
+  const globals = Object.entries(declarations).flatMap(
+    ([key, declaration]) => declaration.options.map((o) => ({
+      action: COMPARE_WITH_ID,
+      key: `global.${key}.${o.value}`,
+      group: declaration.label,
+      label: o.label,
+      compare: { kind: "custom", globals: { [key]: o.value } }
+    }))
+  );
+  const dprs = DPRS.map((dpr) => ({
+    action: COMPARE_DPR_ID,
+    key: `dpr.${dpr}`,
+    group: "DPR",
+    label: `${dpr}\xD7`,
+    compare: { kind: "custom", dpr }
+  }));
+  return [...globals, ...dprs, ...schema ? argChoices(schema.nodes, "") : []];
+}
+function compareMenuDef(choices) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const choice of choices) {
+    const rows = groups.get(choice.group) ?? {};
+    rows[`c${Object.keys(rows).length}`] = pref.action(`${choice.action}:${choice.key}`);
+    groups.set(choice.group, rows);
+  }
+  const submenus = {};
+  [...groups].forEach(([label, rows], n) => {
+    submenus[`g${n}`] = pref.group(label, rows, { as: "menu" });
+  });
+  return { id: COMPARE_MENU_ID, menu: pref.group("", submenus) };
+}
+function compareActions(api, request) {
+  const one = (id, label, enabled) => ({
+    id,
+    label,
+    group: "loupe",
+    enabled,
+    variants: request.choices.filter((c) => c.action === id).map((c) => ({ key: c.key, label: `${c.group}: ${c.label}`, params: { compare: c.compare, lensId: request.lensId } })),
+    invoker: {
+      timing: "immediate",
+      run(_deps, params) {
+        const lensId = params?.lensId ?? api.current();
+        const compare = params?.compare;
+        if (lensId !== null && compare) api.apply(setLensOps(api.scene, lensId, { compare }));
+      }
+    }
+  });
+  return [
+    one(COMPARE_WITH_ID, "Compare with", () => true),
+    one(COMPARE_DPR_ID, "Compare at DPR", () => request.pixels ? true : PIXELS_ONLY)
+  ];
+}
+var NO_CHOICES = [];
+function CompareMenu({ api, request }) {
+  const registry = useActionsRegistry();
+  const host = useMenuHost();
+  const choices = request?.choices ?? NO_CHOICES;
+  const defs = useMemo(() => [compareMenuDef(choices)], [choices]);
+  useMenus(defs);
+  useEffect(() => {
+    if (!registry || !host || !request) return;
+    const offs = compareActions(api, request).map((a) => registry.register(a));
+    let held = true;
+    const drop = () => {
+      if (!held) return;
+      held = false;
+      for (const off of offs) off();
+    };
+    const opened = host.open({ menu: COMPARE_MENU_ID, client: request.client, source: "keyboard" }) ? host.current()?.seq : void 0;
+    if (opened === void 0) {
+      drop();
+      return;
+    }
+    const unsubscribe = host.subscribe(() => {
+      if (host.current()?.seq !== opened) queueMicrotask(drop);
+    });
+    return () => {
+      unsubscribe();
+      drop();
+    };
+  }, [registry, host, api, request]);
+  return null;
+}
+
+// src/shell/loupe/liveSource.ts
+var NOTHING_UNDER = "Nothing under the reticle";
+var sameContext = (a, b) => a.declarations === b.declarations && a.modeGlobal === b.modeGlobal && a.prefersDark === b.prefersDark && a.labMode === b.labMode;
+var liveCellId = (lensId, compare) => compare === null ? lensId : `${lensId}~compared`;
+function sameRequest(a, b) {
+  return a !== null && a.slot === b.slot && a.hit.host === b.hit.host && a.hit.trialId === b.hit.trialId && a.hit.local.x === b.hit.local.x && a.hit.local.y === b.hit.local.y && a.hit.scale === b.hit.scale && a.factor === b.factor && a.size.width === b.size.width && a.size.height === b.size.height && a.args === b.args && a.compare === b.compare && sameContext(a.ctx, b.ctx);
+}
+function createLiveSource(lenses, resolve, conditions) {
+  const measures = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
+  return {
+    kind: "live",
+    produces: "dom",
+    label: () => "Live",
+    status: () => true,
+    // A copy renders after the lens asks for it and changes as its story does; a reader of the copy hears of both.
+    subscribe(listener) {
+      listeners2.add(listener);
+      return () => {
+        listeners2.delete(listener);
+      };
+    },
+    attach(slot, first) {
+      const doc = slot.ownerDocument;
+      const target = doc.createElement("div");
+      target.className = "fg-lens-live";
+      const empty = doc.createElement("div");
+      empty.className = "fg-lens-empty";
+      empty.hidden = true;
+      slot.append(target, empty);
+      const watch = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+        for (const listener of [...listeners2]) listener();
+      });
+      watch?.observe(target, { subtree: true, childList: true, characterData: true, attributes: true });
+      let request = first;
+      let posted = null;
+      const post = (next) => {
+        if (next === null ? posted === null : sameRequest(posted, next)) return;
+        posted = next;
+        lenses.set(liveCellId(request.lensId, request.conditions), next);
+      };
+      const measure = () => {
+        const { lensId, reticle, conditions: compare } = request;
+        const hit = trialAt(reticle, doc);
+        empty.hidden = hit !== null;
+        if (!hit) {
+          post(null);
+          empty.textContent = NOTHING_UNDER;
+          return;
+        }
+        const { base, ctx } = conditions();
+        const resolved = resolve(compare, base, ctx);
+        post({
+          lensId: liveCellId(lensId, compare),
+          slot: target,
+          hit,
+          factor: request.factor,
+          size: request.size,
+          compare,
+          ctx,
+          args: resolved.args
+        });
+      };
+      measures.add(measure);
+      measure();
+      return {
+        update(next) {
+          request = next;
+          measure();
+        },
+        detach() {
+          watch?.disconnect();
+          measures.delete(measure);
+          lenses.set(liveCellId(request.lensId, request.conditions), null);
+          target.remove();
+          empty.remove();
+        }
+      };
+    },
+    remeasure() {
+      for (const measure of [...measures]) measure();
+    }
+  };
+}
+var INLINE = "style attribute";
+function topmostIn(within, client) {
+  return probeUnderLens(
+    within,
+    "interior",
+    () => (within.ownerDocument.elementsFromPoint?.(client.x, client.y) ?? []).find((el) => within.contains(el))
+  );
+}
+function backgroundOf(el, stop) {
+  for (let at = el; at; at = at === stop ? null : at.parentElement) {
+    const color = getComputedStyle(at).backgroundColor;
+    if (color.trim() === "") continue;
+    try {
+      if (parseColor(color)[3] === 1) return { element: at, color };
+    } catch {
+      return { unreadable: color };
+    }
+  }
+  return null;
+}
+var inside = (r, p) => p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+function textUnder(el, client) {
+  const range = el.ownerDocument.createRange();
+  return Array.from(el.childNodes).some((n) => {
+    if (n.nodeType !== Node.TEXT_NODE || (n.textContent ?? "").trim() === "") return false;
+    range.selectNodeContents(n);
+    return Array.from(range.getClientRects()).some((r) => inside(r, client));
+  });
+}
+function colorAt(client, within) {
+  const el = topmostIn(within, client);
+  if (!el) return null;
+  if (textUnder(el, client)) return { element: el, property: "color", value: getComputedStyle(el).color };
+  const bg = backgroundOf(el, within);
+  if (bg === null) return null;
+  if ("unreadable" in bg) return { element: el, property: "background-color", value: bg.unreadable };
+  return { element: bg.element, property: "background-color", value: bg.color };
+}
+var STYLE_RULE = 1;
+var SHORTHANDS = { "background-color": ["background"] };
+var INHERITED = (property) => property.startsWith("--") || property === "color";
+function applies(rule, doc) {
+  const media = rule.media;
+  if (media && media.mediaText && doc.defaultView && !doc.defaultView.matchMedia(media.mediaText).matches) return false;
+  if (typeof CSSSupportsRule !== "undefined" && rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText);
+  return true;
+}
+function nest(selector, parent) {
+  if (parent === void 0) return selector;
+  return splitTopLevel(selector, ",").map((s) => s.includes("&") ? s.replaceAll("&", `:is(${parent})`) : `:is(${parent}) ${s.trim()}`).join(", ");
+}
+function collect(rules, doc, into, parent) {
+  for (const rule of Array.from(rules)) {
+    if (!applies(rule, doc)) continue;
+    const imported = rule.styleSheet;
+    if (imported) {
+      const inner = cssRulesOf(imported);
+      if (inner) collect(inner, doc, into);
+      continue;
+    }
+    const children = rule.cssRules;
+    if (rule.type !== STYLE_RULE) {
+      if (children) collect(children, doc, into, parent);
+      continue;
+    }
+    const style = rule;
+    const selector = nest(style.selectorText, parent);
+    into.push({ selector, style: style.style });
+    if (children) collect(children, doc, into, selector);
+  }
+}
+function rulesOf(doc) {
+  const out = [];
+  for (const sheet of [...Array.from(doc.styleSheets), ...doc.adoptedStyleSheets ?? []]) {
+    if (sheet.disabled) continue;
+    const rules = cssRulesOf(sheet);
+    if (rules) collect(rules, doc, out);
+  }
+  return out;
+}
+function matching(el, list) {
+  let best = null;
+  for (const one of splitTopLevel(list, ",")) {
+    let hit = false;
+    try {
+      hit = el.matches(one);
+    } catch {
+    }
+    const s = hit ? specificity(one.trim()) : null;
+    if (s && (best === null || compareSpecificity(s, best) > 0)) best = s;
+  }
+  return best;
+}
+function declaredIn(style, property) {
+  for (const name of [property, ...SHORTHANDS[property] ?? []]) {
+    const value = style.getPropertyValue(name).trim();
+    if (value) return { value, important: style.getPropertyPriority(name) === "important" };
+  }
+  return null;
+}
+function indexOf(rules) {
+  const index = /* @__PURE__ */ new Map();
+  return (property) => {
+    let got = index.get(property);
+    if (!got) {
+      got = rules.flatMap((r) => {
+        const d = declaredIn(r.style, property);
+        return d ? [{ selector: r.selector, ...d }] : [];
+      });
+      index.set(property, got);
+    }
+    return got;
+  };
+}
+function winning(el, property, rules) {
+  let best = null;
+  for (const got of rules) {
+    const spec = matching(el, got.selector);
+    if (!spec) continue;
+    const wins = best === null || got.important && !best.important || got.important === best.important && compareSpecificity(spec, best.spec) >= 0;
+    if (wins) best = { ...got, spec };
+  }
+  const inline = el.style;
+  const own = inline ? declaredIn(inline, property) : null;
+  if (own && (best === null || own.important || !best.important)) return { property, declared: own.value, selector: INLINE, element: el };
+  return best ? { property, declared: best.value, selector: best.selector, element: el } : null;
+}
+function declarationOf(el, property, rules) {
+  for (let at = el; at; at = INHERITED(property) ? at.parentElement : null) {
+    const link = winning(at, property, rules);
+    if (link) return link;
+  }
+  return null;
+}
+var revisions = /* @__PURE__ */ new WeakMap();
+function revisionOf(doc) {
+  let r = revisions.get(doc);
+  if (!r) {
+    const made = { n: 0, observer: null };
+    if (typeof MutationObserver !== "undefined" && doc.head) {
+      made.observer = new MutationObserver(() => {
+        made.n += 1;
+      });
+      made.observer.observe(doc.head, { childList: true, subtree: true, characterData: true, attributes: true });
+    }
+    revisions.set(doc, made);
+    r = made;
+  }
+  if ((r.observer?.takeRecords().length ?? 0) > 0) r.n += 1;
+  return r.n;
+}
+var chains = /* @__PURE__ */ new WeakMap();
+function tokenChain(at) {
+  const doc = at.element.ownerDocument;
+  const key = `${at.value}|${revisionOf(doc)}|${doc.styleSheets.length}|${doc.adoptedStyleSheets?.length ?? 0}`;
+  let byProperty = chains.get(at.element);
+  const held = byProperty?.get(at.property);
+  if (held?.key === key) return held.chain;
+  const chain = chainOf(at);
+  if (!byProperty) {
+    byProperty = /* @__PURE__ */ new Map();
+    chains.set(at.element, byProperty);
+  }
+  byProperty.set(at.property, { key, chain });
+  return chain;
+}
+function chainOf(at) {
+  const declaring = indexOf(rulesOf(at.element.ownerDocument));
+  const chain = [];
+  const seen = /* @__PURE__ */ new Set();
+  const follow = (el, property) => {
+    if (seen.has(property)) return;
+    seen.add(property);
+    const link = declarationOf(el, property, declaring(property));
+    if (!link) return;
+    chain.push(link);
+    for (const name of varRefs(link.declared)) follow(link.element, name);
+  };
+  follow(at.element, at.property);
+  return chain;
+}
+var NO_TEXT = "No text under the aim";
+var NO_BACKGROUND = "No opaque background behind the text";
+var unreadable = (color) => `Cannot read the color "${color}"`;
+var NO_CAPTURE = "No capture to read";
+var OUTSIDE = "The aim is outside the capture";
+var NO_COLOR = "No color under the aim";
+var NEEDS_LIVE = "Token needs a Live source for changed conditions";
+var IN_FRAME = "Cannot read inside an isolated story's frame";
+var REACH = 2;
+function isLarge(style) {
+  const px = Number.parseFloat(style.fontSize);
+  const w = style.fontWeight === "bold" ? 700 : Number.parseInt(style.fontWeight, 10);
+  return px >= 24 || px >= 18.66 && w >= 700;
+}
+var rgb = (d, i) => `rgb(${d[i]}, ${d[i + 1]}, ${d[i + 2]})`;
+function ofPixels(capture, point) {
+  const img = capture ? readBitmap(capture.bitmap) : null;
+  if (!capture || !img) return { unavailable: NO_CAPTURE };
+  const px = Math.floor(point.x * capture.dpr);
+  const py = Math.floor(point.y * capture.dpr);
+  if (px < 0 || py < 0 || px >= img.width || py >= img.height) return { unavailable: OUTSIDE };
+  const { data, width, height } = img;
+  const center = (py * width + px) * 4;
+  let far = center;
+  let best = 0;
+  for (let y = Math.max(0, py - REACH); y <= Math.min(height - 1, py + REACH); y += 1) {
+    for (let x = Math.max(0, px - REACH); x <= Math.min(width - 1, px + REACH); x += 1) {
+      const i = (y * width + x) * 4;
+      const d = [0, 1, 2].reduce((sum, c) => sum + (data[i + c] - data[center + c]) ** 2, 0);
+      if (d > best) {
+        best = d;
+        far = i;
+      }
+    }
+  }
+  const ratio = contrastRatio(rgb(data, center), rgb(data, far));
+  return ratio === null ? { unavailable: NO_CAPTURE } : { ratio, ...wcagLevels(ratio, false), large: false };
+}
+function contrastAt(source, at) {
+  if (source === "pixels") return ofPixels(at.capture, at.point);
+  const text = at.within ? colorAt(at.point, at.within) : null;
+  if (!text || text.property !== "color") return { unavailable: NO_TEXT };
+  const style = getComputedStyle(text.element);
+  const background = backgroundOf(text.element, at.within);
+  if (background === null) return { unavailable: NO_BACKGROUND };
+  if ("unreadable" in background) return { unavailable: unreadable(background.unreadable) };
+  const ratio = contrastRatio(style.color, background.color);
+  if (ratio === null) return { unavailable: unreadable(style.color) };
+  const large = isLarge(style);
+  return { ratio, ...wcagLevels(ratio, large), large };
+}
+function copyIn(interior) {
+  const copies = Array.from(interior?.querySelectorAll("[data-fg-copy]") ?? []);
+  return copies.find((c) => (c.getAttribute("data-fg-host") ?? "").endsWith("~compared")) ?? copies[0];
+}
+function comparedAim(interior) {
+  const box = interior?.getBoundingClientRect();
+  return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : null;
+}
+function liveAim(interior, settings, reticle) {
+  const aim2 = settings.compare === null ? { within: trialAt(reticle)?.host, point: reticle } : { within: copyIn(interior), point: comparedAim(interior) ?? reticle };
+  return aim2.within?.classList.contains("fg-frame-host") ? { unavailable: IN_FRAME } : aim2;
+}
+var verdict = (pass) => pass ? "pass" : "fail";
+function textOf(reading) {
+  if ("unavailable" in reading) return reading.unavailable;
+  const base = `${reading.ratio.toFixed(2)}:1 \xB7 AA ${verdict(reading.aa)} \xB7 AAA ${verdict(reading.aaa)}`;
+  return reading.large ? `${base} \xB7 large text` : base;
+}
+function ContrastReadout({ lens, settings, sources, reticle, size, interior }) {
+  const { source } = useShownSource(settings, sources);
+  const kind = source?.kind;
+  const subscribe = useCallback((fn) => source?.subscribe(fn) ?? (() => {
+  }), [source]);
+  const live = useSyncExternalStore(subscribe, () => {
+    if (kind !== "live") return null;
+    const aim2 = liveAim(interior, settings, reticle);
+    return textOf("unavailable" in aim2 ? aim2 : contrastAt("live", aim2));
+  });
+  const [pixels, setPixels] = useState(null);
+  const [tick, setTick] = useState(0);
+  useEffect(() => source?.subscribe(() => setTick((n) => n + 1)), [source]);
+  const latest = useLatest({ lens, settings, reticle, size });
+  useEffect(() => {
+    if (kind !== "pixels" || !source?.capture) return;
+    const capture = source.capture.bind(source);
+    let current = true;
+    const timer = setTimeout(() => {
+      const { lens: ids, settings: s, reticle: r, size: box } = latest.current;
+      const [request] = requestsOf(source, ids, s, r, box);
+      if (!request) return;
+      void capture(request).then((got) => {
+        if (current) setPixels("reason" in got ? { unavailable: got.reason } : contrastAt("pixels", { capture: got, point: got.at }));
+      });
+    }, 0);
+    return () => {
+      current = false;
+      clearTimeout(timer);
+    };
+  }, [source, kind, reticle.x, reticle.y, settings.factor, settings.compare, tick, latest]);
+  const text = kind === "live" ? live : kind === "pixels" && pixels ? textOf(pixels) : null;
+  return text ? /* @__PURE__ */ jsx("span", { className: "fg-lens-contrast", children: text }) : null;
+}
+function tokenAt(kind, interior, settings, reticle) {
+  if (kind === "pixels" && settings.compare !== null) return { unavailable: NEEDS_LIVE };
+  const aim2 = liveAim(interior, settings, reticle);
+  if ("unavailable" in aim2) return aim2;
+  const { within, point } = aim2;
+  const at = within ? colorAt(point, within) : null;
+  if (!at) return { unavailable: NO_COLOR };
+  try {
+    parseColor(at.value);
+  } catch {
+    return { unavailable: unreadable(at.value) };
+  }
+  const chain = tokenChain(at);
+  const branches = chain.some((l) => varRefs(l.declared).size > 1);
+  const end = branches ? at.value : chain.at(-1)?.declared ?? at.value;
+  return { steps: [at.property, ...chain.slice(1).map((l) => l.property), end] };
+}
+var isToken = (step) => step.startsWith("--wzl-");
+function TokenReadout({ settings, sources, reticle, interior }) {
+  const { source } = useShownSource(settings, sources);
+  const kind = source?.kind;
+  const subscribe = useCallback((fn) => source?.subscribe(fn) ?? (() => {
+  }), [source]);
+  const json = useSyncExternalStore(
+    subscribe,
+    () => kind === "live" || kind === "pixels" ? JSON.stringify(tokenAt(kind, interior, settings, reticle)) : null
+  );
+  const reading = useMemo(() => json === null ? null : JSON.parse(json), [json]);
+  if (!reading) return null;
+  if ("unavailable" in reading) return /* @__PURE__ */ jsx("span", { className: "fg-lens-token", children: reading.unavailable });
+  return /* @__PURE__ */ jsx("span", { className: "fg-lens-token", children: reading.steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    i > 0 ? " \u2190 " : null,
+    isToken(step) && i < reading.steps.length - 1 ? /* @__PURE__ */ jsx("button", { type: "button", className: "fg-lens-token__link", onClick: () => revealVar(step), children: step }) : step
+  ] }, i)) });
+}
+function renderReadouts(props) {
+  const { readouts } = props.settings;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    readouts.includes("token") ? /* @__PURE__ */ jsx(TokenReadout, { ...props }) : null,
+    readouts.includes("contrast") ? /* @__PURE__ */ jsx(ContrastReadout, { ...props }) : null
+  ] });
+}
+var STATE_UNSENDABLE = "this story's state cannot be sent to a capture";
+var CONFIG_UNSENDABLE = "this story's config cannot be sent to a capture";
+var NO_STORY = "this trial shows no story to capture";
+var NO_BOX = "the story's box has no size";
+function survived(value, round) {
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value === round;
+  if (typeof value === "number") return Number.isFinite(value) && value === round;
+  if (Array.isArray(value)) {
+    if (!Array.isArray(round) || value.length !== round.length) return false;
+    for (let i = 0; i < value.length; i += 1) if (!(i in value) || !survived(value[i], round[i])) return false;
+    return true;
+  }
+  if (!isPlainObject(value) || !isPlainObject(round)) return false;
+  const keys = Object.keys(value);
+  return keys.length === Object.keys(round).length && keys.every((key) => key in round && survived(value[key], round[key]));
+}
+function sendable(state) {
+  try {
+    return survived(state, JSON.parse(JSON.stringify(state) ?? "undefined"));
+  } catch {
+    return false;
+  }
+}
+function withoutUndefined(value) {
+  if (Array.isArray(value)) return value.map(withoutUndefined);
+  if (!isPlainObject(value)) return value;
+  return Object.fromEntries(
+    Object.entries(value).flatMap(([key, v]) => v === void 0 ? [] : [[key, withoutUndefined(v)]])
+  );
+}
+var clampDpr = (dpr) => Math.min(Math.max(dpr, MIN_DPR), MAX_DPR);
+function capturePayload(input) {
+  const { entry, layout, config, state, globals, overrides, host, dpr, resolved, lab, colorScheme } = input;
+  if (!sendable(state)) return { unavailable: STATE_UNSENDABLE };
+  const sent = withoutUndefined(withArgs(storyConfig(config), resolved.args));
+  if (!sendable(sent)) return { unavailable: CONFIG_UNSENDABLE };
+  const box = { width: host.offsetWidth, height: host.offsetHeight };
+  if (!(box.width > 0 && box.height > 0)) return { unavailable: NO_BOX };
+  const isolate = entry.isolate !== void 0;
+  const scroller = scrollerOf(host);
+  const kept2 = config?.[PLAYHEAD_KEY];
+  return {
+    story: entry.id,
+    isolate,
+    config: sent,
+    state,
+    globals,
+    overrides,
+    playhead: !isolate && typeof kept2 === "number" && Number.isFinite(kept2) ? kept2 : null,
+    box,
+    layout,
+    dpr: clampDpr(resolved.dpr ?? dpr),
+    scroll: { left: scroller?.scrollLeft ?? 0, top: scroller?.scrollTop ?? 0 },
+    lab,
+    colorScheme
+  };
+}
+function trialPayload(trial, lab, hit, dpr, c) {
+  if (!trial) return { unavailable: NO_STORY };
+  const ctx = resolveContextOf(lab);
+  const own = effectiveGlobals(lab.labValues, trial.config?.[GLOBALS_KEY]);
+  const resolved = resolveComparison(c, own, ctx);
+  const colorScheme = ctx.prefersDark ? "dark" : "light";
+  return capturePayload({
+    ...trial,
+    globals: resolved.globals,
+    host: hit.host,
+    dpr,
+    resolved,
+    lab: { globals: lab.labValues, mode: lab.mode === "auto" ? colorScheme : lab.mode },
+    colorScheme
+  });
+}
+
+// src/shell/loupe/captureClient.ts
+var CHECKING = "checking for a capture browser";
+var UNAVAILABLE = "captures are unavailable";
+var NO_ENDPOINT = "this server takes no captures";
+function createCaptureClient(base, send) {
+  const url = `${base}${CAPTURE_PATH}`;
+  const listeners2 = /* @__PURE__ */ new Set();
+  let status = CHECKING;
+  let polling = null;
+  const setStatus = (next) => {
+    if (next === status) return;
+    status = next;
+    for (const listener of [...listeners2]) listener();
+  };
+  const poll = () => {
+    polling ??= (async () => {
+      try {
+        const res = await send(url);
+        if (!res.ok) return setStatus(NO_ENDPOINT);
+        const body = await res.json();
+        setStatus(body.available === true ? true : body.reason ?? UNAVAILABLE);
+      } catch (err) {
+        setStatus(`${NO_ENDPOINT}: ${messageOf(err)}`);
+      } finally {
+        polling = null;
+      }
+    })();
+  };
+  return {
+    status: () => status,
+    subscribe(listener) {
+      listeners2.add(listener);
+      poll();
+      return () => listeners2.delete(listener);
+    },
+    poll,
+    async take(payload) {
+      const res = await send(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
+      if (res.status === 503) {
+        setStatus((await res.json()).reason ?? UNAVAILABLE);
+        return null;
+      }
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error ?? `capture failed: ${res.status}`);
+      }
+      return createImageBitmap(await res.blob());
+    }
+  };
+}
+var sideOf = (r) => `${r.lensId}:${r.dpr}${r.conditions === null ? "" : ":compared"}`;
+function aim(shared, request, doc) {
+  const hit = trialAt(request.reticle, doc);
+  if (!hit) return { reason: NOTHING_UNDER };
+  const payload = shared.payloadFor(hit, request.dpr, request.conditions);
+  if ("unavailable" in payload) return { reason: unavailableText("pixels", payload.unavailable) };
+  return { hit, payload, key: stableStringify(payload) };
+}
+var fresh = (shared, shot, key) => shot?.key === key && shot.revision === shared.revision();
+function paint(canvas, shot, at, request) {
+  const sd = canvas.ownerDocument.defaultView?.devicePixelRatio ?? 1;
+  const width = Math.max(1, Math.round(request.size.width * sd));
+  const height = Math.max(1, Math.round(request.size.height * sd));
+  if (canvas.width !== width) canvas.width = width;
+  if (canvas.height !== height) canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.imageSmoothingEnabled = false;
+  ctx.clearRect(0, 0, width, height);
+  const scale = request.factor * sd / shot.payload.dpr;
+  const x = Math.round(width / 2 - at.x * request.factor * sd);
+  const y = Math.round(height / 2 - at.y * request.factor * sd);
+  ctx.drawImage(shot.bitmap, x, y, shot.bitmap.width * scale, shot.bitmap.height * scale);
+  canvas.toggleAttribute("data-shown", true);
+}
+function blank(canvas) {
+  canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+  canvas.toggleAttribute("data-shown", false);
+}
+function attachPixelsLens(slot, first, shared, onDetach) {
+  const doc = slot.ownerDocument;
+  const canvas = doc.createElement("canvas");
+  canvas.className = "fg-lens-pixels";
+  const empty = doc.createElement("div");
+  empty.className = "fg-lens-empty";
+  empty.hidden = true;
+  slot.append(canvas, empty);
+  let request = first;
+  let wanted = null;
+  let pending2 = null;
+  let timer;
+  let started = false;
+  let gone = false;
+  const say = (text) => {
+    empty.hidden = text === null;
+    empty.textContent = text ?? "";
+  };
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = void 0;
+  };
+  const run = async () => {
+    const target = wanted;
+    if (!target) return;
+    const token = {};
+    pending2 = token;
+    const at = shared.revision();
+    const side = sideOf(request);
+    try {
+      const bitmap = await shared.take(target.payload);
+      if (gone || pending2 !== token || bitmap === null || shared.revision() !== at) return;
+      shared.shots.set(side, { key: target.key, revision: at, bitmap, payload: target.payload });
+      measure();
+    } catch (err) {
+      if (!gone && pending2 === token) say(`Capture failed: ${messageOf(err)}`);
+    } finally {
+      if (pending2 === token) pending2 = null;
+    }
+  };
+  const schedule = () => {
+    cancel();
+    if (!started) {
+      started = true;
+      void run();
+      return;
+    }
+    timer = setTimeout(() => {
+      timer = void 0;
+      void run();
+    }, LENS_REST_MS);
+  };
+  const measure = () => {
+    const aimed = aim(shared, request, doc);
+    if ("reason" in aimed) {
+      wanted = null;
+      cancel();
+      blank(canvas);
+      say(aimed.reason);
+      return;
+    }
+    const { hit, payload, key } = aimed;
+    const shot = shared.shots.get(sideOf(request));
+    if (fresh(shared, shot, key)) {
+      wanted = { key, payload };
+      cancel();
+      say(null);
+      paint(canvas, shot, hit.local, request);
+      return;
+    }
+    say(null);
+    if (wanted?.key === key && pending2 !== null) return;
+    wanted = { key, payload };
+    schedule();
+  };
+  measure();
+  return {
+    measure,
+    revised() {
+      pending2 = null;
+      wanted = null;
+      blank(canvas);
+      measure();
+    },
+    update(next) {
+      request = next;
+      measure();
+    },
+    detach() {
+      gone = true;
+      cancel();
+      shared.shots.delete(sideOf(request));
+      canvas.remove();
+      empty.remove();
+      onDetach();
+    }
+  };
+}
+
+// src/shell/loupe/pixelsSource.ts
+var STORY_CHANGED = "the story changed while it was captured";
+function createPixelsSource(opts) {
+  const client = createCaptureClient(opts.base, opts.fetch ?? ((input, init) => globalThis.fetch(input, init)));
+  const shared = { take: client.take, payloadFor: opts.payloadFor, revision: opts.revision, shots: /* @__PURE__ */ new Map() };
+  const lenses = /* @__PURE__ */ new Set();
+  let unrevise = null;
+  const remeasured = createEmitter();
+  const revised = () => {
+    shared.shots.clear();
+    for (const lens of [...lenses]) lens.revised();
+  };
+  return {
+    kind: "pixels",
+    produces: "pixels",
+    // A DPR comparison captures at its own DPR, as the payload does.
+    label: ({ conditions, dpr }) => `Pixels ${(conditions?.kind === "custom" ? conditions.dpr : void 0) ?? dpr}\xD7`,
+    status: client.status,
+    // Also told whenever a capture may have gone stale, for a lens that captures without attaching, as Difference does.
+    subscribe(listener) {
+      const offs = [client.subscribe(listener), remeasured.subscribe(listener), opts.subscribeRevision(listener)];
+      return () => {
+        for (const off of offs) off();
+      };
+    },
+    attach(slot, first) {
+      client.poll();
+      unrevise ??= opts.subscribeRevision(revised);
+      const lens = attachPixelsLens(slot, first, shared, () => {
+        lenses.delete(lens);
+        if (lenses.size > 0) return;
+        unrevise?.();
+        unrevise = null;
+      });
+      lenses.add(lens);
+      return lens;
+    },
+    async capture(request) {
+      const aimed = aim(shared, request, document);
+      if ("reason" in aimed) return { reason: aimed.reason };
+      const side = sideOf(request);
+      let shot = shared.shots.get(side);
+      if (!fresh(shared, shot, aimed.key)) {
+        const at = opts.revision();
+        const bitmap = await client.take(aimed.payload);
+        if (bitmap === null) {
+          const status = client.status();
+          return { reason: unavailableText("pixels", status === true ? "the capture was refused" : status) };
+        }
+        if (opts.revision() !== at) return { reason: STORY_CHANGED };
+        shot = { key: aimed.key, revision: at, bitmap, payload: aimed.payload };
+        shared.shots.set(side, shot);
+      }
+      return { bitmap: shot.bitmap, dpr: aimed.payload.dpr, box: aimed.payload.box, at: aimed.hit.local };
+    },
+    remeasure() {
+      for (const lens of [...lenses]) lens.measure();
+      remeasured.emit();
+    }
+  };
+}
+
+// src/shell/loupe/usePixelsSource.ts
+function usePixelsSource(lab) {
+  const capture = useContext(LoupeCaptureContext);
+  const [source] = useState(
+    () => capture ? createPixelsSource({
+      base: capture.base,
+      payloadFor: (hit, dpr, c) => trialPayload(capture.trials.get(hit.trialId), lab.current, hit, dpr, c),
+      revision: capture.revision.get,
+      subscribeRevision: capture.revision.subscribe
+    }) : null
+  );
+  useEffect(() => source && capture ? capture.trials.subscribe(() => source.remeasure()) : void 0, [source, capture]);
+  return source;
+}
+var STAGGER = 24;
+var OPPOSITE = { kind: "opposite-mode" };
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function bodyBeside(reticle, box, n) {
+  const half = BODY_SIZE / 2;
+  const gap = BODY_SIZE * 0.75 + STAGGER * n;
+  const x = reticle.x + gap + half > box.width ? reticle.x - gap : reticle.x + gap;
+  return { x: clamp(x, half, box.width - half), y: clamp(reticle.y + STAGGER * n, half, box.height - half) };
+}
+function lensClient(scene, lensId, body) {
+  const ids = lensIdsOf(scene, `${lensId}:body`);
+  const reticle = ids ? scene.get(ids.reticle) : void 0;
+  const lens = ids ? scene.get(ids.body) : void 0;
+  if (!body || !reticle || !lens) return null;
+  const box = body.getBoundingClientRect();
+  const center = (p) => ({ x: box.left + p.x + p.width / 2, y: box.top + p.y + p.height / 2 });
+  return { reticle: center(effectivePose(scene, reticle)), body: center(effectivePose(scene, lens)) };
+}
+function useLensFocus() {
+  const focus = useRef(null);
+  const onFocusLens = useCallback((lensId) => {
+    focus.current = lensId;
+  }, []);
+  return { focus, onFocusLens };
+}
+function createApi(scene, refs) {
+  let next = 0;
+  let hold = null;
+  const toBody = (client, box) => ({ x: client.x - box.left, y: client.y - box.top });
+  const apply = (ops) => {
+    if (ops.length > 0) sceneToAdapter(scene).applyOps([...ops], "lens");
+  };
+  const current = () => {
+    const focused = refs.focus.current;
+    if (focused !== null && settingsOf(scene, focused)) return focused;
+    return lensesOf(scene).at(-1)?.lensId ?? null;
+  };
+  return {
+    scene,
+    current,
+    apply,
+    add(at) {
+      const body = refs.body.current;
+      const count = lensesOf(scene).length;
+      if (!body || count >= MAX_LENSES) return null;
+      const box = body.getBoundingClientRect();
+      const client = at ?? refs.pointer.current ?? { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+      const reticle = toBody(client, box);
+      const lensId = `lens-${next++}`;
+      apply(addLensOps(scene, lensId, { body: bodyBeside(reticle, box, count), reticle }));
+      refs.focus.current = lensId;
+      return lensId;
+    },
+    follow(client) {
+      const lensId = current();
+      const body = refs.body.current;
+      if (lensId === null || !body) return;
+      const pose = reticleAt(scene, lensId, toBody(client, body.getBoundingClientRect()));
+      if (pose === null) return;
+      hold ??= scene.overrides.hold();
+      hold.set([[`${lensId}:reticle`, pose]]);
+    },
+    sourceAvailable: (kind) => refs.sources.current[kind]?.status() ?? "not provided",
+    openCompareMenu: (lensId) => refs.compare?.current?.(lensId)
+  };
+}
+function useRemeasure(sources, body, rerender) {
+  const { trials, mode } = useLabContext();
+  const labValues = useContext(StoryGlobalsContext);
+  useEffect(() => {
+    for (const source of sources) source.remeasure();
+  }, [sources, trials, mode, labValues]);
+  useEffect(() => {
+    if (sources.length === 0 || !body) return;
+    const remeasure = () => {
+      for (const source of sources) source.remeasure();
+    };
+    const resize = () => {
+      rerender();
+      remeasure();
+    };
+    body.addEventListener("scroll", remeasure, { capture: true, passive: true });
+    window.addEventListener("resize", resize);
+    const unveiled = typeof MutationObserver === "undefined" ? null : new MutationObserver(remeasure);
+    unveiled?.observe(body, { subtree: true, attributes: true, attributeFilter: ["data-pending"] });
+    return () => {
+      body.removeEventListener("scroll", remeasure, { capture: true });
+      window.removeEventListener("resize", resize);
+      unveiled?.disconnect();
+    };
+  }, [sources, body, rerender]);
+}
+function ForgeLoupe({ declarations, modeGlobal }) {
+  const lenses = useContext(LiveLensesContext);
+  const labValues = useContext(StoryGlobalsContext);
+  const { mode, trials, instruments } = useLabContext();
+  const [scene] = useState(createLensScene);
+  const [body, setBody] = useState(null);
+  const bodyRef = useRef(null);
+  const pointer = useRef(null);
+  const { focus, onFocusLens } = useLensFocus();
+  const conditions = useLatest({ labValues, mode, declarations, modeGlobal });
+  const [live] = useState(
+    () => lenses ? createLiveSource(lenses, resolveComparison, () => ({ base: conditions.current.labValues, ctx: resolveContextOf(conditions.current) })) : null
+  );
+  const pixels = usePixelsSource(conditions);
+  const sources = useMemo(
+    () => ({ ...live ? { live } : {}, ...pixels ? { pixels } : {} }),
+    [live, pixels]
+  );
+  const remeasured = useMemo(() => [live, pixels].filter((s) => s !== null), [live, pixels]);
+  const sourcesRef = useLatest(sources);
+  const [menu, setMenu] = useState(null);
+  const compare = useLatest((lensId) => {
+    const at = lensClient(scene, lensId, bodyRef.current);
+    if (!at) return;
+    const trialId = trialAt(at.reticle)?.trialId;
+    const name = trials.find((t) => t.id === trialId)?.instrumentName;
+    const schema = instruments.find((i) => i.name === name)?.config ?? null;
+    const settings = settingsOf(scene, lensId);
+    const pixels2 = settings !== null && (settings.view === "difference" || resolveSource(settings.source, sourcesRef.current).source?.kind === "pixels");
+    const choices = compareChoices(declarations, schema);
+    setMenu((last) => ({ seq: (last?.seq ?? 0) + 1, client: at.body, lensId, pixels: pixels2, choices }));
+  });
+  const [api] = useState(() => createApi(scene, { body: bodyRef, pointer, focus, sources: sourcesRef, compare }));
+  const describe = useCallback(
+    (c, at) => {
+      const trialId = trialAt(at.reticle)?.trialId;
+      const config = trials.find((t) => t.id === trialId)?.config;
+      return describeLens(c, { labValues, mode, declarations, modeGlobal }, config, at.source === "pixels");
+    },
+    [declarations, labValues, mode, modeGlobal, trials]
+  );
+  const [, rerender] = useReducer((n) => n + 1, 0);
+  useSyncExternalStore(scene.overrides.subscribe, scene.overrides.getGeneration);
+  useRemeasure(remeasured, body, rerender);
+  useEffect(() => {
+    if (!body) return;
+    const track = (e) => {
+      pointer.current = { x: e.clientX, y: e.clientY };
+    };
+    body.addEventListener("pointermove", track, { passive: true });
+    return () => body.removeEventListener("pointermove", track);
+  }, [body]);
+  const attachMarker = useCallback((el) => {
+    const found = el?.closest(".lk-lab__body") ?? null;
+    bodyRef.current = found;
+    setBody(found);
+  }, []);
+  const opposite = useCallback(() => OPPOSITE, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { hidden: true, ref: attachMarker }),
+    /* @__PURE__ */ jsx(LensOverlay, { scene, sources, describe, renderReadouts, onFocusLens }),
+    /* @__PURE__ */ jsx(LensActions, { api, bodyRef, opposite }),
+    /* @__PURE__ */ jsx(CompareMenu, { api, request: menu }),
+    /* @__PURE__ */ jsx(KeymapHint, { className: "fg-loupe-hint" })
+  ] });
+}
 
 // src/shell/routedTrial.ts
 function routedTrial(trials, focusedTrialId, route) {
@@ -1206,9 +2514,9 @@ function RoutePlayhead() {
   if (!trial || route === null) return null;
   return /* @__PURE__ */ jsx(PlayheadSync, { trialId: trial.id, route, appliedRef: applied }, `${trial.id} ${route}`);
 }
-var RECORD = "fg-globals";
+var RECORD3 = "fg-globals";
 function useLabGlobals(declarations) {
-  const [stored, setStored] = usePersistedState(RECORD, null, { scope: "lab" });
+  const [stored, setStored] = usePersistedState(RECORD3, null, { scope: "lab" });
   const values = useMemo(() => labGlobals(declarations, stored), [declarations, stored]);
   const set = useCallback(
     (key, value) => setStored((prev) => ({ ...labGlobals(declarations, prev), [key]: value })),
@@ -1510,14 +2818,27 @@ function filterComponents(rows, query) {
   }
   return out;
 }
+function parentOf(row, byPath) {
+  const segments = row.path.split("/");
+  for (let take = segments.length - 1; take > 0; take--) {
+    const parent = byPath.get(segments.slice(0, take).join("/"));
+    if (parent && parent.library === row.library) return parent;
+  }
+  return void 0;
+}
 function componentNodes(rows) {
   const root = [];
   const folders = /* @__PURE__ */ new Map();
+  const byPath = new Map(rows.map((row) => [row.path, row]));
+  const nodes = /* @__PURE__ */ new Map();
+  const subs = /* @__PURE__ */ new Map();
+  for (const row of rows) subs.set(row.path, []);
   for (const row of rows) {
-    const labels = row.label.split("/");
+    const parent = parentOf(row, byPath);
     const title = row.path.split("/");
-    let siblings = root;
-    let tag = row.library;
+    const labels = parent ? title.slice(parent.path.split("/").length) : row.label.split("/");
+    let siblings = parent ? subs.get(parent.path) : root;
+    let tag = parent ? void 0 : row.library;
     for (let i = 0; i < labels.length - 1; i++) {
       const path = title.slice(0, title.length - labels.length + i + 1).join("/");
       let folder = folders.get(path);
@@ -1529,14 +2850,22 @@ function componentNodes(rows) {
       siblings = folder.children;
       tag = void 0;
     }
-    siblings.push({
+    const node = {
       kind: "folder",
       label: labels[labels.length - 1],
       path: row.path,
       tag,
       ...row.index ? { index: row.index } : {},
-      children: row.entries.map((entry) => ({ kind: "story", entry }))
-    });
+      children: []
+    };
+    nodes.set(row.path, node);
+    siblings.push(node);
+  }
+  for (const row of rows) {
+    nodes.get(row.path).children = [
+      ...subs.get(row.path),
+      ...row.entries.map((entry) => ({ kind: "story", entry }))
+    ];
   }
   return foldGalleries(root);
 }
@@ -1600,13 +2929,13 @@ function StoryTree({ ctx, index }) {
   const filtering = query.trim() !== "";
   const isOpen = (path) => filtering || (folds[path] ?? routeAncestors.has(path));
   const rows = [];
-  const collect = (nodes, parent) => {
+  const collect2 = (nodes, parent) => {
     for (const node of nodes) {
       rows.push({ key: keyOf(node), node, parent });
-      if (node.kind === "folder" && isOpen(node.path)) collect(node.children, keyOf(node));
+      if (node.kind === "folder" && isOpen(node.path)) collect2(node.children, keyOf(node));
     }
   };
-  collect(shown, null);
+  collect2(shown, null);
   const active = rows.some((row) => row.key === focusKey) ? focusKey : rows[0]?.key ?? null;
   const openIds = new Set(ctx.trials.map((trial) => trial.instrumentName));
   const setOpen = (path, open) => {
@@ -1885,6 +3214,171 @@ function createAnswerBook() {
 
 // src/shell/readyKey.ts
 var readyKey = (ready) => stableStringify({ schema: ready.schema, layout: ready.layout, viewport: ready.viewport });
+var START_TIMEOUT_MS = 1e4;
+var requests = 0;
+function closeLink(link) {
+  if (!link.current) return;
+  clearTimeout(link.current.timer);
+  for (const settle of link.current.pending.values()) settle({ ok: false, message: "The frame went away" });
+  link.current.pending.clear();
+  link.current.disconnect();
+  link.current.channel.close();
+  link.current = null;
+}
+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 receive(deps, current, msg) {
+  const { latest: latestRef, trialId, frames, setFault, setPending, init, copy } = deps;
+  const { ctx: live, answers, onReady } = latestRef.current;
+  switch (msg.type) {
+    case "ready": {
+      clearTimeout(current.timer);
+      setFault(null);
+      for (const [name, value] of Object.entries(latestRef.current.overrides)) {
+        current.channel.send({ type: "vars.set", name, value });
+      }
+      if (copy) {
+        init(current);
+        break;
+      }
+      const key = readyKey(msg);
+      current.awaiting = key;
+      onReady(latestRef.current.entry, msg);
+      if (current.awaiting === key && key === latestRef.current.descriptionKey) init(current);
+      break;
+    }
+    case "rendered":
+      setPending(false);
+      current.hasRendered = true;
+      for (const ask of current.queued.splice(0)) ask();
+      break;
+    case "setConfig":
+      if (!isGlobalsPath(msg.path)) live.setConfig(msg.path, msg.value);
+      break;
+    case "setState":
+      if (current.sent) current.sent.state = msg.state;
+      live.setState(msg.state);
+      break;
+    case "answers":
+      if (!copy) answers.record(msg.answers);
+      break;
+    case "vars":
+      if (trialId) frames?.report(trialId, msg.vars);
+      break;
+    case "a11y": {
+      const outcome = msg.ok ? { ok: true, report: msg.report } : { ok: false, message: msg.message };
+      if (trialId) frames?.reportA11y(trialId, outcome);
+      current.pending.get(msg.id)?.(outcome);
+      current.pending.delete(msg.id);
+      break;
+    }
+    case "open": {
+      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 });
+      break;
+    }
+    case "fault":
+      if (msg.phase === "render" && msg.seq !== void 0 && msg.seq < current.inputs) break;
+      clearTimeout(current.timer);
+      setFault({ phase: msg.phase, message: msg.message });
+      break;
+  }
+}
+function openLink(deps, link, frame) {
+  const { latest: latestRef, src, trialId, frames, setFault, setPending } = deps;
+  closeLink(link);
+  setPending(true);
+  const target = frame.contentWindow;
+  if (!target) return;
+  const { port1, port2 } = new MessageChannel();
+  const timer = setTimeout(() => setFault({ phase: null, message: `Frame did not start: ${src}` }), START_TIMEOUT_MS);
+  const channel = openChannel(port1, {
+    onMismatch: (mismatch) => {
+      clearTimeout(timer);
+      setFault({ phase: "protocol", message: mismatchMessage(mismatch) });
+    }
+  });
+  const waiting = /* @__PURE__ */ new Map();
+  const audit = () => new Promise((resolve) => {
+    const id = `a11y-${requests += 1}`;
+    waiting.set(id, resolve);
+    const ask = () => channel.send({ type: "a11y.run", id });
+    if (current.hasRendered) ask();
+    else current.queued.push(ask);
+  });
+  const disconnect = frames && trialId ? frames.connect(trialId, { send: channel.send, audit }) : () => {
+  };
+  const current = {
+    channel,
+    deliver: (msg) => receive(deps, current, msg),
+    timer,
+    awaiting: null,
+    sent: null,
+    inputs: 0,
+    disconnect,
+    pending: waiting,
+    hasRendered: false,
+    queued: []
+  };
+  link.current = current;
+  channel.on((msg) => current.deliver(msg));
+  target.postMessage({ type: PORT_HANDOFF, id: latestRef.current.entry.id }, location.origin, [
+    port2
+  ]);
+}
+function useFrameLink(opts) {
+  const { latest: latestRef, src, trialId, frames, setFault, setPending, copy, config, state, globals, descriptionKey } = opts;
+  const link = useRef(null);
+  const init = useCallback((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 });
+  }, [latestRef]);
+  const deps = { latest: latestRef, src, trialId, frames, setFault, setPending, copy, init };
+  const connect = (frame) => openLink(deps, link, frame);
+  const adopt2 = (adopted) => {
+    adopted.deliver = (msg) => receive(deps, adopted, msg);
+    setPending(!adopted.hasRendered);
+  };
+  useEffect(() => {
+    const current = link.current;
+    if (!current) return;
+    if (current.awaiting !== null) {
+      if (current.awaiting === descriptionKey) init(current);
+      return;
+    }
+    if (current.sent && sendInputs(current, current.sent, { config, state, globals })) {
+      setFault((shown) => shown?.phase === "render" ? null : shown);
+    }
+  }, [config, state, globals, descriptionKey, init, setFault]);
+  return { connect, adopt: adopt2, link };
+}
 var kept = /* @__PURE__ */ new Map();
 var shelf = null;
 function shelfElement() {
@@ -1933,46 +3427,56 @@ function useKeptFrame(options) {
   }, [latest]);
   return useCallback(() => handedOn.current, []);
 }
-var START_TIMEOUT_MS = 1e4;
-var requests = 0;
-function closeLink(link) {
-  if (!link.current) return;
-  clearTimeout(link.current.timer);
-  for (const settle of link.current.pending.values()) settle({ ok: false, message: "The frame went away" });
-  link.current.pending.clear();
-  link.current.disconnect();
-  link.current.channel.close();
-  link.current = null;
-}
-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;
+function mountFrame(m) {
+  const { inView, src, slotRef, iframeRef, latest: latestRef, connect: connectRef, link, handedOn, setFault, setPending } = m;
+  const slot = slotRef.current;
+  if (!inView || !slot) return void 0;
+  const adopted = iframeRef.current;
+  const claimed = adopted || latestRef.current.copy ? 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 = 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;
+    clearTimeout(unheard);
+    connectRef.current(frame);
+  };
+  window.addEventListener("message", onMessage);
+  if (claimed) {
+    moveFrame(slot, claimed);
+    connectRef.current(claimed);
+  } else if (!adopted) {
+    frame.src = src;
+    slot.append(frame);
   }
-  return current.inputs !== before;
+  return () => {
+    window.removeEventListener("message", onMessage);
+    clearTimeout(unheard);
+    if (handedOn()) return;
+    closeLink(link);
+    frame.remove();
+    iframeRef.current = null;
+    setPending(true);
+    setFault(null);
+  };
 }
+var NO_ARGS = {};
 function FrameView(props) {
-  const { entry, frameUrl, answers, descriptionKey, ctx } = props;
+  const { entry, frameUrl, answers, descriptionKey, ctx: trialCtx, copy } = props;
   const labGlobals2 = useContext(StoryGlobalsContext);
-  const pins = ctx.config?.[GLOBALS_KEY];
-  const globals = useMemo(() => effectiveGlobals(labGlobals2, pins), [labGlobals2, pins]);
+  const pins = trialCtx.config?.[GLOBALS_KEY];
+  const own = useMemo(() => effectiveGlobals(labGlobals2, pins), [labGlobals2, pins]);
+  const globals = copy ? copy.globals : own;
+  const { config: laidConfig, setConfig: laidSetConfig } = useCopyConfig(trialCtx.config, trialCtx.setConfig, copy?.args ?? NO_ARGS);
+  const ctx = useMemo(
+    () => copy ? { ...trialCtx, config: laidConfig, setConfig: laidSetConfig } : trialCtx,
+    [copy, trialCtx, laidConfig, laidSetConfig]
+  );
   const trialId = useContext(TrialIdContext);
   const frames = useContext(TrialFramesContext);
   const [overrides] = useCssOverrides();
@@ -1984,185 +3488,49 @@ function FrameView(props) {
   const hostRef = useRef(null);
   const slotRef = useRef(null);
   const inView = useNearViewport(hostRef, IN_VIEW_MARGIN);
-  const link = useRef(null);
-  const latestRef = useLatest({ ...props, globals, overrides, pool, lab, title });
+  const latestRef = useLatest({ ...props, ctx, globals, overrides, pool, lab, title });
   const [fault, setFault] = useState(null);
-  const [pending, setPending] = useState(true);
-  const init = useCallback((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 });
-  }, [latestRef]);
-  const receive = (current, msg) => {
-    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(latestRef.current.overrides)) {
-          current.channel.send({ type: "vars.set", name, value });
-        }
-        const key = readyKey(msg);
-        current.awaiting = key;
-        onReady(latestRef.current.entry, msg);
-        if (current.awaiting === key && key === latestRef.current.descriptionKey) init(current);
-        break;
-      }
-      case "rendered":
-        setPending(false);
-        current.hasRendered = true;
-        for (const ask of current.queued.splice(0)) ask();
-        break;
-      case "setConfig":
-        if (!isGlobalsPath(msg.path)) live.setConfig(msg.path, msg.value);
-        break;
-      case "setState":
-        if (current.sent) current.sent.state = msg.state;
-        live.setState(msg.state);
-        break;
-      case "answers":
-        answers2.record(msg.answers);
-        break;
-      case "vars":
-        if (trialId) frames?.report(trialId, msg.vars);
-        break;
-      case "a11y": {
-        const outcome = msg.ok ? { ok: true, report: msg.report } : { ok: false, message: msg.message };
-        if (trialId) frames?.reportA11y(trialId, outcome);
-        current.pending.get(msg.id)?.(outcome);
-        current.pending.delete(msg.id);
-        break;
-      }
-      case "open": {
-        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 });
-        break;
-      }
-      case "fault":
-        if (msg.phase === "render" && msg.seq !== void 0 && msg.seq < current.inputs) break;
-        clearTimeout(current.timer);
-        setFault({ phase: msg.phase, message: msg.message });
-        break;
-    }
-  };
-  const connect = (frame) => {
-    closeLink(link);
-    setPending(true);
-    const target = frame.contentWindow;
-    if (!target) return;
-    const { port1, port2 } = new MessageChannel();
-    const timer = setTimeout(() => setFault({ phase: null, message: `Frame did not start: ${src}` }), START_TIMEOUT_MS);
-    const channel = openChannel(port1, {
-      onMismatch: (mismatch) => {
-        clearTimeout(timer);
-        setFault({ phase: "protocol", message: mismatchMessage(mismatch) });
-      }
-    });
-    const waiting = /* @__PURE__ */ new Map();
-    const audit = () => new Promise((resolve) => {
-      const id = `a11y-${requests += 1}`;
-      waiting.set(id, resolve);
-      const ask = () => channel.send({ type: "a11y.run", id });
-      if (current.hasRendered) ask();
-      else current.queued.push(ask);
-    });
-    const disconnect = frames && trialId ? frames.connect(trialId, { send: channel.send, audit }) : () => {
-    };
-    const current = {
-      channel,
-      deliver: (msg) => receive(current, msg),
-      timer,
-      awaiting: null,
-      sent: null,
-      inputs: 0,
-      disconnect,
-      pending: waiting,
-      hasRendered: false,
-      queued: []
-    };
-    link.current = current;
-    channel.on((msg) => current.deliver(msg));
-    target.postMessage({ type: PORT_HANDOFF, id: latestRef.current.entry.id }, location.origin, [
-      port2
-    ]);
-  };
+  const [pending2, setPending] = useState(true);
+  const { connect, adopt: adopt2, link } = useFrameLink({
+    latest: latestRef,
+    src,
+    trialId: copy ? null : trialId,
+    frames: copy ? null : frames,
+    setFault,
+    setPending,
+    copy: copy !== void 0,
+    config: ctx.config,
+    state: ctx.state,
+    globals,
+    descriptionKey
+  });
   const connectRef = useLatest(connect);
   const handedOn = useKeptFrame({
-    key: trialId ? `${trialId} ${src}` : null,
+    key: trialId && !copy ? `${trialId} ${src}` : null,
     slot: slotRef,
     frame: iframeRef,
     link,
-    onAdopt: (adopted) => {
-      adopted.deliver = (msg) => receive(adopted, msg);
-      setPending(!adopted.hasRendered);
-    },
+    onAdopt: adopt2,
     onDrop: () => closeLink(link)
   });
+  useEffect(
+    () => mountFrame({ inView, src, slotRef, iframeRef, latest: latestRef, connect: connectRef, link, handedOn, setFault, setPending }),
+    [inView, src, connectRef, latestRef, handedOn, link]
+  );
   useEffect(() => {
-    const slot = slotRef.current;
-    if (!inView || !slot) return;
-    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 = 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;
-      clearTimeout(unheard);
-      connectRef.current(frame);
-    };
-    window.addEventListener("message", onMessage);
-    if (claimed) {
-      moveFrame(slot, claimed);
-      connectRef.current(claimed);
-    } 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, handedOn]);
-  useEffect(() => {
-    iframeRef.current?.toggleAttribute("data-pending", pending && !fault);
-  }, [pending, fault, inView, src]);
+    iframeRef.current?.toggleAttribute("data-pending", pending2 && !fault);
+  }, [pending2, fault, inView, src]);
   useEffect(() => {
     if (iframeRef.current) iframeRef.current.title = title;
   }, [title]);
-  useEffect(() => answers.hold(ctx.config), [answers, ctx.config]);
-  useEffect(() => {
-    const current = link.current;
-    if (!current) return;
-    if (current.awaiting !== null) {
-      if (current.awaiting === descriptionKey) init(current);
-      return;
-    }
-    if (current.sent && sendInputs(current, current.sent, { config: ctx.config, state: ctx.state, globals })) {
-      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: [
+  useEffect(() => copy ? void 0 : answers.hold(ctx.config), [answers, ctx.config, copy]);
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "fg-frame-host", "data-fg-host": copy?.id ?? trialId ?? void 0, "data-fg-copy": copy ? "" : void 0, children: [
     /* @__PURE__ */ jsx("div", { ref: slotRef, className: "fg-frame-slot" }),
     fault ? /* @__PURE__ */ jsxs("div", { className: "fg-fault", role: "alert", children: [
       fault.phase ? /* @__PURE__ */ jsx("span", { className: "fg-fault__phase", children: fault.phase }) : null,
       /* @__PURE__ */ jsx("p", { className: "fg-fault__message", children: fault.message })
-    ] }) : null
+    ] }) : null,
+    copy ? null : /* @__PURE__ */ jsx(LiveFrameCopies, { trialId, trialConfig: trialCtx.config, children: (lensCopy) => /* @__PURE__ */ jsx(FrameView, { ...props, copy: lensCopy }) })
   ] });
 }
 function storyInstrument(options) {
@@ -2179,17 +3547,20 @@ function storyInstrument(options) {
     config,
     defaultConfig: () => config.defaults(),
     initialState: () => null,
-    render: (ctx) => /* @__PURE__ */ jsx(
-      FrameView,
-      {
-        entry,
-        frameUrl,
-        answers,
-        onReady,
-        descriptionKey,
-        ctx
-      }
-    ),
+    render: (ctx) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        FrameView,
+        {
+          entry,
+          frameUrl,
+          answers,
+          onReady,
+          descriptionKey,
+          ctx
+        }
+      ),
+      /* @__PURE__ */ jsx(CaptureInputs, { entry, layout: ready?.layout ?? "centered", config: ctx.config, state: ctx.state })
+    ] }),
     // Taken from the index until the frame reports, so the trial does not move the frame into a stage and reload it.
     ...viewport ? { stage: { size: { width: viewport.width, height: viewport.height } } } : {}
   };
@@ -2206,7 +3577,7 @@ function useStoryRegistry(index, options) {
   const [loaded, setLoaded] = useState(() => /* @__PURE__ */ new Map());
   const [faults, setFaults] = useState(() => /* @__PURE__ */ new Map());
   const [generations, setGenerations] = useState(() => /* @__PURE__ */ new Map());
-  const [revisions, setRevisions] = useState(() => /* @__PURE__ */ new Map());
+  const [revisions2, setRevisions] = useState(() => /* @__PURE__ */ new Map());
   const onReady = useCallback((entry, ready) => {
     setReadies((prev) => {
       const held = prev.get(entry.id);
@@ -2329,7 +3700,7 @@ function useStoryRegistry(index, options) {
       const had = loaded.get(entry.id);
       const fault = faults.get(entry.id);
       const generation = generations.get(entry.file) ?? 0;
-      const revision = revisions.get(entry.id) ?? 0;
+      const revision = revisions2.get(entry.id) ?? 0;
       const entryKey = stableStringify(entry);
       const answers = previous.books.get(entry.id) ?? createAnswerBook();
       books.set(entry.id, answers);
@@ -2352,7 +3723,7 @@ function useStoryRegistry(index, options) {
     });
     const unchanged = list.length === previous.list.length && list.every((i, n) => i === previous.list[n]);
     return { built, books, list: unchanged ? previous.list : list };
-  }, [index, readies, loaded, faults, generations, revisions, frameUrl, globals, setup, importers, onReady, request]);
+  }, [index, readies, loaded, faults, generations, revisions2, frameUrl, globals, setup, importers, onReady, request]);
   useLayoutEffect(() => {
     committed.current = cache;
   }, [cache]);
@@ -2391,7 +3762,14 @@ function useDocumentTitle(title) {
     document.title = title;
   }, [title]);
 }
-function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies }) {
+function NoStories({ stories }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fg-empty", children: [
+    /* @__PURE__ */ jsx("p", { className: "fg-empty__title", children: "No stories found" }),
+    stories.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "fg-empty__globs", "aria-label": "Story globs", children: stories.map((glob) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: glob }) }, glob)) }) : null
+  ] });
+}
+function Workshop(props) {
+  const { index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies } = props;
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const title = config?.title ?? DEFAULT_TITLE;
   useDocumentTitle(title);
@@ -2435,30 +3813,31 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
     []
   );
   const infoCommand = useMemo(() => infoItem(() => setInfoOpen(true)), []);
+  const showsCssVars = config?.cssVars !== false;
+  const modeGlobal = config?.loupe?.modeGlobal ?? "mode";
+  const [cssVarsChrome2, setCssVarsChrome] = useState([]);
+  const [keysChrome2, setKeysChrome] = useState([]);
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
-      ...config?.cssVars === false ? [] : [CSS_VARS_SECTION],
+      ...showsCssVars ? cssVarsChrome2 : [],
       A11Y_SECTION,
+      ...keysChrome2,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       { id: "fg-info", region: "header", group: "story", item: infoCommand },
+      { id: "fg-loupe", region: "overlay", render: () => /* @__PURE__ */ jsx(ForgeLoupe, { declarations, modeGlobal }) },
       ...config?.labChrome ?? []
     ],
-    [index, infoCommand, declarations, config?.cssVars, config?.labChrome]
+    [index, infoCommand, declarations, showsCssVars, cssVarsChrome2, keysChrome2, config?.labChrome, modeGlobal]
   );
   const [menus, setMenus] = useState();
   const first = index[0];
-  if (!first) {
-    return /* @__PURE__ */ jsxs("div", { className: "fg-empty", children: [
-      /* @__PURE__ */ jsx("p", { className: "fg-empty__title", children: "No stories found" }),
-      stories.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "fg-empty__globs", "aria-label": "Story globs", children: stories.map((glob) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: glob }) }, glob)) }) : null
-    ] });
-  }
-  return /* @__PURE__ */ jsx(LibrariesContext.Provider, { value: libraries, children: /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsxs(
+  if (!first) return /* @__PURE__ */ jsx(NoStories, { stories });
+  return /* @__PURE__ */ jsx(LibrariesContext.Provider, { value: libraries, children: /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsx(LoupeProvider, { captureBase: props.captureBase, revision: props.revision, children: /* @__PURE__ */ jsxs(
     Lab,
     {
       title,
-      density: "roomy",
+      density: LAB_DENSITY,
       ...labTheme ? { theme: labTheme } : {},
       instruments,
       defaultInstrument: readRoute() ?? first.id,
@@ -2484,17 +3863,20 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
           }
         ),
         /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues }),
-        /* @__PURE__ */ jsx(GlobalsMenus, { declarations, onMenus: setMenus })
+        /* @__PURE__ */ jsx(GlobalsMenus, { declarations, onMenus: setMenus }),
+        showsCssVars ? /* @__PURE__ */ jsx(CssVarsChrome, { onChrome: setCssVarsChrome }) : null,
+        /* @__PURE__ */ jsx(KeysChrome, { onChrome: setKeysChrome })
       ]
     }
-  ) }) }) }) }) }) });
+  ) }) }) }) }) }) }) });
 }
 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 = createKitRoot(target, props.setup?.icons);
   const changes = createStoryChanges();
-  let current = { ...props, changes };
+  const revision = createRevision();
+  let current = { ...props, changes, revision };
   root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
   return {
     setIndex(index) {
@@ -2510,10 +3892,11 @@ function mountWorkshop({ container, ...props }) {
       current = { ...current, dependencies };
       root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
     },
+    revise: () => revision.bump(),
     unmount: () => root.unmount()
   };
 }
 
-export { A11Y_SECTION, A11yPanel, Workshop, mountWorkshop, useStoryRegistry };
+export { A11Y_SECTION, A11yPanel, Workshop, followEdits, mountWorkshop, useStoryRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map