@weasel-js/forge 1.13.0-rc.0 → 1.14.0

package/dist/shell/index.js

@@ -1,27 +1,25 @@
-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, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, Description, IndexPage, LabBadge, openChannel } from '../chunk-BUXUWAI4.js';
-import { isIndexId, indexId, indexEntries } from '../chunk-STF6NQ5N.js';
-import { taggedIds, isGallery, isLab } from '../chunk-VUPN73JP.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-RKQ277P5.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-RKQ277P5.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-35DOPXHZ.js';
-import '../chunk-L5XM5VKB.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, paramsToPins, knobsToParams, PLAYHEAD_PARAM, pinParams, withoutPins, reservedParams } from '../chunk-SFKDHXVE.js';
+import { DEFAULT_TITLE, ISSUES_PATH, issueLabel, CAPTURE_PATH, messageOf, MIN_DPR, MAX_DPR } from '../chunk-MRYXJTDO.js';
+import { TITLE_LIBRARIES, loadIndexBundle, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, Description, IndexPage, indexEnvOf, LabBadge, openChannel } from '../chunk-PPB7VP6R.js';
+import { isIndexId, indexId, indexEntries } from '../chunk-RVJHUY7W.js';
+import { isGallery, isLab } from '../chunk-VUPN73JP.js';
+import { useTrialFrame, createTrialFrames, createStoryHosts, StoryGlobalsContext, TrialFramesContext, StoryHostsContext, StoryTrial, LiveLensesContext, trialAt, describeLens, createLiveLenses, useCopyConfig, useCssOverrides, IN_VIEW_MARGIN, LiveFrameCopies, TrialHost, LiveCopies, resolveContextOf, resolveComparison, scrollerOf, withArgs } from '../chunk-UDEUT7AG.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-UDEUT7AG.js';
+import { labGlobals, withGlobals, storyConfig, followApp, GLOBALS_KEY, effectiveGlobals, labOptions, isForgePath, isGlobalsPath } from '../chunk-FPF2JSWB.js';
+import { loadStories, applyGlobalsTo, scanCssVars, varRefs, cssRulesOf } from '../chunk-PGLOYXDP.js';
+import { clockSpecOf, shownTime } from '../chunk-TT4ZOYB6.js';
 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 '../chunk-B26DWEYT.js';
+import { stableStringify, DEFAULT_LAYOUT, FRAME_HELLO, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-STK2AZH2.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, TrialTransport, usePersistedState, useTrialClockHandle, Select, useTrialState, ToggleBar as ToggleBar$1, Input as Input$1, 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, 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 { 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, useActionsRegistry, effectivePose, useMenuHost, useMenus, sceneToAdapter, parseColor, contrastRatio, wcagLevels, historyKey, isPlainObject, createHistory, keymapShortcuts, actionBindings, keySpecShortcut, keymapLeaderId, swapOp } from '@weasel-js/core';
+import { useLatest, useActionsRegistry, useVisibleRaf, 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';
@@ -29,14 +27,39 @@ import { TOKEN_CATEGORIES, tokenCategory } from '@weasel-js/ui/components/TokenP
 import { ToggleBar } from '@weasel-js/ui/components/ToggleBar';
 import { useResolvedColorMode } from '@weasel-js/theme/react';
 import { formatShortcut } from '@weasel-js/ui/components/ToolPalette';
+import { Input } from '@weasel-js/ui/components/Input';
+import { TextArea } from '@weasel-js/ui/components/TextArea';
 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 { holdAt } from '@weasel-js/clock';
 import { Callout } from '@weasel-js/ui/components/Callout';
-import { DisclosureMark } from '@weasel-js/ui/components/Disclosure';
+import { Tree } from '@weasel-js/ui/components/Tree';
+import { useNearViewport } from '@weasel-js/react';
 
+// src/shell/a11y/reasons.ts
+var PLAIN = {
+  bgOverlap: "axe couldn't tell the background: another element lies on top of this one.",
+  pseudoContent: "axe couldn't tell the background: a ::before or ::after box paints over or behind this text.",
+  bgGradient: "axe couldn't tell the background: it is a gradient.",
+  bgImage: "axe couldn't tell the background: it is an image.",
+  imgNode: "axe couldn't tell the background: an image or canvas sits behind this text.",
+  elmPartiallyObscured: "axe couldn't tell the background: it covers only part of this text.",
+  elmPartiallyObscuring: "axe couldn't tell the background: this text runs across more than one element.",
+  outsideViewport: "axe couldn't see this text: it is scrolled out of view.",
+  blended: "Couldn't tell the colors: this text or something around it is see-through, filtered, or blended.",
+  fgAlpha: "axe couldn't tell the text color: it is partly see-through.",
+  complexTextShadows: "axe couldn't tell the contrast: the text has a shadow.",
+  equalRatio: "The text is the same color as its background, so it may be hidden on purpose.",
+  shortTextContent: "Fails contrast, but is a single character that may be a symbol rather than text.",
+  nonBmp: "Holds only symbols or icons, not text."
+};
+function plainReason(reason) {
+  if (!reason) return null;
+  return (reason.key ? PLAIN[reason.key] : void 0) ?? reason.message ?? null;
+}
 function pointAt(point, nodes) {
   const enter = (event) => {
     event.stopPropagation();
@@ -50,7 +73,13 @@ function Finding({ finding, point }) {
       /* @__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", { ...pointAt(point, [node]), 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) => {
+      const reason = plainReason(node.reason);
+      return /* @__PURE__ */ jsxs("li", { ...pointAt(point, [node]), children: [
+        /* @__PURE__ */ jsx("code", { children: node.target.join(" ") }),
+        reason ? /* @__PURE__ */ jsx("p", { className: "fg-a11y__reason", children: reason }) : null
+      ] }, `${finding.id}:${node.target.join(",")}`);
+    }) })
   ] });
 }
 function Findings({ title, findings, point }) {
@@ -185,6 +214,50 @@ function createStoryChanges() {
   return { subscribe: changes.subscribe, emit: changes.emit };
 }
 var DependenciesContext = createContext(null);
+
+// src/shell/breadcrumb.ts
+var bare = (label) => label.toLowerCase().replace(/[^\p{L}\p{N}]/gu, "");
+function restatesTitle(title, name) {
+  return bare(title.slice(title.lastIndexOf("/") + 1)) === bare(name);
+}
+function crumbs(title, name) {
+  const segments = title.split("/");
+  const steps = segments.map((label, i) => ({ label, path: segments.slice(0, i + 1).join("/") }));
+  if (restatesTitle(title, name)) steps[steps.length - 1] = { label: segments[segments.length - 1], path: null };
+  else steps.push({ label: name, path: null });
+  return steps.filter((step, i) => i === 0 || step.label.toLowerCase() !== "index");
+}
+function breadcrumb(title, name) {
+  return crumbs(title, name).map((step) => step.label).join(" > ");
+}
+var reveals = createEmitter();
+function revealInTree(path) {
+  reveals.emit(path);
+}
+function onRevealInTree(listener) {
+  return reveals.subscribe(listener);
+}
+function Crumbs({ entry }) {
+  const steps = crumbs(entry.title, entry.name);
+  return /* @__PURE__ */ jsx("span", { className: "fg-crumbs", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    i > 0 ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__sep", "aria-hidden": "true", children: "\u203A" }) : null,
+    step.path === null ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__here", children: step.label }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "fg-crumbs__step",
+        title: `Show ${step.label} in the story tree`,
+        onPointerDown: (event) => event.stopPropagation(),
+        onClick: () => revealInTree(step.path),
+        children: step.label
+      }
+    )
+  ] }, step.path ?? `${step.label}:${i}`)) });
+}
+function crumbTitle(entry) {
+  const title = breadcrumb(entry.title, entry.name);
+  return { title, renderTitle: (shown) => shown === title ? /* @__PURE__ */ jsx(Crumbs, { entry }) : shown };
+}
 function readRoute() {
   return parseRoute(location.hash).story;
 }
@@ -236,151 +309,33 @@ function useRoute() {
   }, []);
   return [route, setRoute];
 }
-
-// src/timeline/playheadUrl.ts
-function formatSeconds(ms) {
-  const rounded = Math.round(ms) / 1e3;
-  return String(rounded === 0 ? 0 : rounded);
-}
-function parseSeconds(text) {
-  if (text == null || !/^\s*-?(\d+\.?\d*|\.\d+)\s*$/.test(text)) return null;
-  return Math.round(Number(text) * 1e3);
-}
-function readPlayheadParam() {
-  return parseSeconds(readRouteParams()[PLAYHEAD_PARAM]);
-}
-function writePlayheadParam(ms) {
-  replaceRouteParams(
-    ({ [PLAYHEAD_PARAM]: _held, ...rest }) => ms === null ? rest : { ...rest, [PLAYHEAD_PARAM]: formatSeconds(ms) }
-  );
-}
-function TransportBar({ clock }) {
-  const { time, playing, loop, rate, span } = useSyncExternalStore(clock.subscribe, clock.get);
-  return /* @__PURE__ */ jsxs("div", { className: "fg-transport", children: [
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        className: "fg-transport__scrub",
-        ariaLabel: "Scrub",
-        thumbShape: "dot",
-        trackHeight: "var(--wzl-slider-track-h)",
-        thumbSize: "var(--wzl-slider-thumb-size)",
-        readoutPlacement: "none",
-        min: span.start,
-        max: span.end > span.start ? span.end : span.start + 1,
-        thumbs: [{ value: time, valueText: `${formatSeconds(time)} seconds` }],
-        onInput: ([thumb]) => {
-          if (thumb) clock.seek(thumb.value);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Transport,
-      {
-        paused: !playing,
-        loop,
-        rate,
-        playhead: time,
-        duration: span.end,
-        onPlay: clock.play,
-        onPause: clock.pause,
-        onLoopChange: (next) => clock.setLoop(next !== false && next !== 0),
-        onRateChange: clock.setRate
-      }
-    )
-  ] });
-}
-function TrialTransport({ trialId }) {
-  const clock = useTrialClock(trialId);
-  return clock ? /* @__PURE__ */ jsx(TransportBar, { clock }) : null;
-}
-
-// src/shell/breadcrumb.ts
-var bare = (label) => label.toLowerCase().replace(/[^\p{L}\p{N}]/gu, "");
-function restatesTitle(title, name) {
-  return bare(title.slice(title.lastIndexOf("/") + 1)) === bare(name);
-}
-function crumbs(title, name) {
-  const segments = title.split("/");
-  const steps = segments.map((label, i) => ({ label, path: segments.slice(0, i + 1).join("/") }));
-  if (restatesTitle(title, name)) steps[steps.length - 1] = { label: segments[segments.length - 1], path: null };
-  else steps.push({ label: name, path: null });
-  return steps.filter((step, i) => i === 0 || step.label.toLowerCase() !== "index");
-}
-function breadcrumb(title, name) {
-  return crumbs(title, name).map((step) => step.label).join(" > ");
-}
-var reveals = createEmitter();
-function revealInTree(path) {
-  reveals.emit(path);
-}
-function onRevealInTree(listener) {
-  return reveals.subscribe(listener);
-}
-function Crumbs({ entry }) {
-  const steps = crumbs(entry.title, entry.name);
-  return /* @__PURE__ */ jsx("span", { className: "fg-crumbs", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    i > 0 ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__sep", "aria-hidden": "true", children: "\u203A" }) : null,
-    step.path === null ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__here", children: step.label }) : /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "fg-crumbs__step",
-        title: `Show ${step.label} in the story tree`,
-        onPointerDown: (event) => event.stopPropagation(),
-        onClick: () => revealInTree(step.path),
-        children: step.label
-      }
-    )
-  ] }, step.path ?? `${step.label}:${i}`)) });
-}
-function crumbTitle(entry) {
-  const title = breadcrumb(entry.title, entry.name);
-  return { title, renderTitle: (shown) => shown === title ? /* @__PURE__ */ jsx(Crumbs, { entry }) : shown };
-}
 function IndexTrial({ bundle, setup, config }) {
   const lab = useLabContext();
   const trialId = useContext(TrialIdContext);
   const graph = useContext(DependenciesContext);
-  const gallery = isGallery(bundle);
-  const dependencies = gallery ? void 0 : graph?.[bundle.title];
   const open = (id) => {
     if (!trialId || !lab.instruments.some((instrument) => instrument.name === id)) return;
     lab.swapTrial(trialId, id);
     setRoute(id, { inPlace: true });
   };
-  const render = (globals) => {
-    const env = {
-      title: bundle.title,
-      library: bundle.library,
-      ...bundle.description === void 0 ? {} : { description: bundle.description },
-      stories: bundle.stories,
-      descriptions: bundle.descriptions,
-      gallery,
-      galleries: bundle.galleries,
-      labs: bundle.labs,
-      ...dependencies ? { dependencies } : {},
-      globals,
-      decorators: setup.decorators ?? [],
-      open,
-      // A story that throws shows its error in its own cell; the rest of the page is still worth reading.
-      onError: (error) => console.error(error)
-    };
-    return /* @__PURE__ */ jsx(IndexPage, { env, render: bundle.render });
-  };
+  const render = (globals) => /* @__PURE__ */ jsx(IndexPage, { env: indexEnvOf(bundle, { graph, globals, decorators: setup.decorators ?? [], open }), render: bundle.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 }) {
+function CaptureInputs({ entry, layout, config, state, timed = false }) {
   const capture = useContext(LoupeCaptureContext);
   const trialId = useContext(TrialIdContext);
   const [overrides] = useCssOverrides();
   const withdraw = useRef(null);
+  const handle = useTrialClockHandle();
+  const clock = timed ? handle?.clock ?? null : null;
   useEffect(() => {
-    if (capture && trialId) withdraw.current = capture.trials.publish(trialId, { entry, layout, config, state, overrides });
-  }, [capture, trialId, entry, layout, config, state, overrides]);
+    if (!capture || !trialId) return;
+    const playhead = () => clock && clock.rate === 0 ? shownTime(clock) : null;
+    withdraw.current = capture.trials.publish(trialId, { entry, layout, config, state, overrides, playhead });
+  }, [capture, trialId, entry, layout, config, state, overrides, clock]);
   useEffect(
     () => () => {
       withdraw.current?.();
@@ -401,14 +356,81 @@ function LoupeProvider({ captureBase, revision = STILL, children }) {
   );
   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() });
+
+// src/shell/storyMarks.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function documentCss(doc) {
+  const out = [];
+  for (const sheet of Array.from(doc.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) out.push(rule.cssText);
+    } catch {
+    }
+  }
+  return out.join("\n");
+}
+function storyBox(host) {
+  const w = Math.max(1, host?.offsetWidth ?? 0);
+  const h = Math.max(1, host?.offsetHeight ?? 0);
+  const scroller = host?.querySelector(":scope > .fg-story__scroll") ?? null;
+  return {
+    content: { w: Math.max(w, scroller?.scrollWidth ?? 0), h: Math.max(h, scroller?.scrollHeight ?? 0) },
+    shown: { x: scroller?.scrollLeft ?? 0, y: scroller?.scrollTop ?? 0, w, h }
+  };
+}
+function captureHost(host) {
+  const doc = host.ownerDocument;
+  const { w, h } = storyBox(host).content;
+  const root = doc.createElement("div");
+  root.setAttribute("data-fg-capture", "");
+  const tokens = scanCssVars(doc, void 0, host).filter((v) => v.value).map((v) => `${v.name}: ${v.value};`).join("");
+  const style = doc.createElement("style");
+  style.textContent = [
+    documentCss(doc),
+    `[data-fg-capture]{${tokens}}`,
+    `[data-fg-capture] > .fg-story{width:${w}px;height:${h}px}`
+  ].join("\n");
+  const copy = host.cloneNode(true);
+  copy.removeAttribute("data-pending");
+  root.append(style, copy);
+  const inner = new XMLSerializer().serializeToString(root);
+  return {
+    kind: "svg",
+    markup: `<svg xmlns="${SVG_NS}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><foreignObject x="0" y="0" width="${w}" height="${h}">${inner}</foreignObject></svg>`
+  };
+}
+function storyMarks(hosts) {
+  return {
+    targets: (_state, _config, trial) => {
+      const ref = hosts.ref(trial.id);
+      const { content, shown } = storyBox(ref.current);
+      return [
+        {
+          id: "story",
+          ref,
+          content,
+          shown,
+          // Out of view, a host holds no content; it is rendered for the capture rather than scrolled to, which
+          // would move the reader's view.
+          base: async () => {
+            const release = await hosts.show(trial.id);
+            try {
+              if (!ref.current) throw new Error("[forge] the story has no host to capture");
+              return captureHost(ref.current);
+            } finally {
+              release();
+            }
+          }
+        }
+      ];
+    }
+  };
 }
 function documentInstrument(options) {
-  const { entry, loaded, setup, globals = {} } = options;
+  const { entry, loaded, setup, globals = {}, hosts } = options;
   const schema = loaded.kind === "story" ? loaded.story.config : f.schema({});
-  const timed = loaded.kind === "story" && loaded.story.timeline !== null;
-  const config = withGlobals(timed ? withPlayhead(schema) : schema, globals);
+  const timeline = loaded.kind === "story" ? loaded.story.timeline : null;
+  const config = withGlobals(schema, globals);
   const initialState = loaded.kind === "story" ? loaded.story.initialState : null;
   return {
     name: entry.id,
@@ -416,12 +438,25 @@ function documentInstrument(options) {
     config,
     defaultConfig: () => config.defaults(),
     initialState: (c) => initialState?.(c) ?? null,
-    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 }),
+    render: (ctx) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
+      /* @__PURE__ */ jsx(
+        CaptureInputs,
+        {
+          entry,
+          layout: loaded.kind === "story" ? loaded.story.layout : "fullscreen",
+          config: ctx.config,
+          state: ctx.state,
+          timed: timeline !== null
+        }
+      )
+    ] }),
+    ...hosts ? { annotations: storyMarks(hosts) } : {},
     ...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 }) }] } : {}
+    ...timeline ? {
+      clock: (c) => clockSpecOf(timeline(storyConfig(c))),
+      chrome: [{ id: "fg-transport", region: "status", render: (c) => /* @__PURE__ */ jsx(TrialTransport, { trialId: c.trialId, className: "fg-transport" }) }]
+    } : {}
   };
 }
 function Fault({ phase, message }) {
@@ -797,10 +832,10 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
         ...Object.keys(tokens).map((token) => `${TOKEN_PREFIX}${token}`)
       ]);
       const groups = new Set(scales.map((scale) => scale.group));
-      const now = history2.current();
+      const now2 = history2.current();
       history2.reset({
-        overrides: Object.fromEntries(Object.entries(now.overrides).filter(([name]) => !saved.has(name))),
-        scales: Object.fromEntries(Object.entries(now.scales).filter(([group]) => !groups.has(group)))
+        overrides: Object.fromEntries(Object.entries(now2.overrides).filter(([name]) => !saved.has(name))),
+        scales: Object.fromEntries(Object.entries(now2.scales).filter(([group]) => !groups.has(group)))
       });
       setNotice(
         result.regenerated || result.problems.length === 0 ? { outcome: "saved", text: `Saved to ${file}.` } : { outcome: "error", text: `Saved to ${file}, but the tokens were not regenerated: ${result.problems.join("; ")}` }
@@ -1010,16 +1045,16 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     }
   });
   const write = (name, value) => {
-    const now = history2.current();
-    const { [name]: _dropped, ...rest } = now.overrides;
-    history2.commit({ ...now, overrides: value === null ? rest : { ...rest, [name]: value } }, `token:${name}`);
+    const now2 = history2.current();
+    const { [name]: _dropped, ...rest } = now2.overrides;
+    history2.commit({ ...now2, overrides: value === null ? rest : { ...rest, [name]: value } }, `token:${name}`);
   };
   const onScaleChange = (group, next) => {
     const source = SCALE_SOURCES.find((sc) => sc.group === group);
     if (!source) return;
-    const now = history2.current();
+    const now2 = history2.current();
     history2.commit(
-      { overrides: { ...now.overrides, ...Object.fromEntries(scaleValues(source, next)) }, scales: { ...now.scales, [group]: next } },
+      { overrides: { ...now2.overrides, ...Object.fromEntries(scaleValues(source, next)) }, scales: { ...now2.scales, [group]: next } },
       `scale:${group}`
     );
   };
@@ -1058,7 +1093,7 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
                 }
               ),
               /* @__PURE__ */ jsx(
-                Input,
+                Input$1,
                 {
                   className: "fg-css-vars__filter",
                   "aria-label": "Filter",
@@ -1280,6 +1315,137 @@ function infoItem(open) {
     onActivate: open
   };
 }
+var dateFormat = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+function IssueList({ component, issues, note }) {
+  if (!issues) return /* @__PURE__ */ jsx("p", { className: "fg-issues__note", children: note ?? "Not connected to an issue tracker." });
+  if (issues.length === 0) return /* @__PURE__ */ jsxs("p", { className: "fg-issues__note", children: [
+    "No open issues for ",
+    component,
+    "."
+  ] });
+  return /* @__PURE__ */ jsx("ul", { className: "fg-issues__list", children: issues.map((issue) => /* @__PURE__ */ jsxs("li", { className: "fg-issues__item", children: [
+    /* @__PURE__ */ jsxs("a", { href: issue.url, target: "_blank", rel: "noreferrer", className: "fg-issues__link", children: [
+      /* @__PURE__ */ jsxs("span", { className: `fg-issues__number ${num.numeric}`, children: [
+        "#",
+        issue.number
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "fg-issues__title", children: issue.title })
+    ] }),
+    /* @__PURE__ */ jsx("time", { className: `fg-issues__opened ${num.numeric}`, dateTime: issue.opened, children: dateFormat.format(new Date(issue.opened)) })
+  ] }, issue.number)) });
+}
+function IssuesPanel({ component, storyId, issues, listNote, onReport }) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const canReport = onReport !== void 0 && title.trim() !== "";
+  const submit = (event) => {
+    event.preventDefault();
+    if (!canReport) return;
+    onReport({ component, storyId, title: title.trim(), body });
+    setTitle("");
+    setBody("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fg-issues", children: [
+    /* @__PURE__ */ jsxs("section", { className: "fg-issues__group", "aria-label": "Open issues", children: [
+      /* @__PURE__ */ jsx("h3", { className: "fg-issues__heading", children: "Open" }),
+      /* @__PURE__ */ jsx(IssueList, { component, ...issues ? { issues } : {}, ...listNote ? { note: listNote } : {} })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "fg-issues__group", "aria-label": "Report an issue", onSubmit: submit, children: [
+      /* @__PURE__ */ jsx("h3", { className: "fg-issues__heading", children: "Report" }),
+      /* @__PURE__ */ jsx(Input, { label: "Title", value: title, onChange: setTitle }),
+      /* @__PURE__ */ jsx(TextArea, { label: "Description", value: body, onChange: setBody, placeholder: "What did you expect, and what happened?" }),
+      /* @__PURE__ */ jsx("div", { className: "fg-issues__actions", children: /* @__PURE__ */ jsx(Button$1, { size: "sm", type: "submit", disabled: !canReport, children: "Report" }) }),
+      onReport ? null : /* @__PURE__ */ jsx("p", { className: "fg-issues__note", children: "Reporting is not connected yet." })
+    ] })
+  ] });
+}
+
+// src/shell/issues/tracker.ts
+async function fetchIssues(base, component, signal) {
+  const res = await fetch(`${base}${ISSUES_PATH}?${new URLSearchParams({ component })}`, signal ? { signal } : {});
+  const type = res.headers.get("Content-Type") ?? "";
+  if (!type.includes("application/json")) throw new Error(`The dev server answered ${res.status} with no issues.`);
+  return await res.json();
+}
+function reopenLink(page, story, schema, config, globals) {
+  return `${page}${formatRoute({ story, params: { ...knobsToParams(schema, config), ...pinParams(globals) } })}`;
+}
+function reportBody(report, context) {
+  const code = (text) => `\`${text}\``;
+  const checkout = [
+    context.branch === null ? null : `**Branch:** ${code(context.branch)}`,
+    context.commit === null ? null : `**Commit:** ${context.commit}`
+  ].filter((line) => line !== null);
+  return [
+    report.body.trim(),
+    "---",
+    [`**Story:** ${code(report.storyId)}`, `**Reopen:** ${context.link}`, ...checkout].join("\n"),
+    "<!-- Paste a screenshot here. -->"
+  ].filter((part) => part !== "").join("\n\n");
+}
+function newIssueUrl(repo, report, context) {
+  const params = new URLSearchParams({
+    title: report.title,
+    body: reportBody(report, context),
+    labels: issueLabel(report.component)
+  });
+  return `${repo.url}/issues/new?${params}`;
+}
+var couldNot = (reason) => ({ note: `Could not list issues: ${reason}` });
+var listingOf = (answer) => answer.issues ? { issues: answer.issues } : answer.unavailable ? { note: answer.unavailable } : couldNot(answer.error ?? "no reason given");
+var NO_KNOBS = { nodes: {} };
+function TrackedIssues({ base, storyId, component }) {
+  const lab = useLabContext();
+  const labGlobals2 = useContext(StoryGlobalsContext);
+  const [answer, setAnswer] = useState(null);
+  const [listing, setListing] = useState({ note: "Listing issues\u2026" });
+  useEffect(() => {
+    const abort = new AbortController();
+    fetchIssues(base, component, abort.signal).then(
+      (next) => {
+        setAnswer(next);
+        setListing(listingOf(next));
+      },
+      (err) => {
+        if (!abort.signal.aborted) setListing(couldNot(err instanceof Error ? err.message : String(err)));
+      }
+    );
+    return () => abort.abort();
+  }, [base, component]);
+  const report = (made) => {
+    if (!answer?.repo) return;
+    const trial = lab.trials.find((t) => t.id === lab.focusedTrialId);
+    const config = trial?.config ?? null;
+    const schema = lab.instruments.find((instrument) => instrument.name === storyId)?.config;
+    const globals = effectiveGlobals(labGlobals2, config?.[GLOBALS_KEY]);
+    const page = `${location.origin}${location.pathname}${location.search}`;
+    const link = reopenLink(page, storyId, schema ?? NO_KNOBS, config, globals);
+    window.open(newIssueUrl(answer.repo, made, { link, branch: answer.branch, commit: answer.commit }), "_blank", "noopener");
+  };
+  return /* @__PURE__ */ jsx(
+    IssuesPanel,
+    {
+      component,
+      storyId,
+      ..."issues" in listing ? { issues: listing.issues } : { listNote: listing.note },
+      ...answer?.repo ? { onReport: report } : {}
+    }
+  );
+}
+function FocusedIssues({ index, base }) {
+  const { focusedTrialId, trials } = useLabContext();
+  const record = trials.find((trial) => trial.id === focusedTrialId);
+  const entry = record && index.find((e) => e.id === record.instrumentName);
+  if (!entry) return null;
+  const component = entry.componentName ?? entry.title.split("/").at(-1) ?? entry.title;
+  return /* @__PURE__ */ jsxs("section", { className: "fg-issues-focus", "aria-label": "Issues", children: [
+    /* @__PURE__ */ jsx("p", { className: "fg-issues__component", children: component }),
+    base === void 0 ? /* @__PURE__ */ jsx(IssuesPanel, { component, storyId: entry.id }, entry.id) : /* @__PURE__ */ jsx(TrackedIssues, { base, storyId: entry.id, component }, entry.id)
+  ] });
+}
+function issuesSection(index, base) {
+  return { id: "fg-issues", region: "aside", item: { title: "Issues", body: /* @__PURE__ */ jsx(FocusedIssues, { index, base }) } };
+}
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
   const out = [];
@@ -1583,15 +1749,40 @@ var liveCellId = (lensId, compare) => compare === null ? lensId : `${lensId}~com
 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) {
+var LOOK_EVENTS = ["pointerover", "pointerout", "focusin", "focusout", "transitionend"];
+function watchOf(notify) {
+  const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(notify);
+  let watched = null;
+  return (el) => {
+    if (el === watched) return;
+    observer?.disconnect();
+    for (const type of LOOK_EVENTS) watched?.removeEventListener(type, notify);
+    watched = el;
+    if (!el) return;
+    observer?.observe(el, { subtree: true, childList: true, characterData: true, attributes: true });
+    for (const type of LOOK_EVENTS) el.addEventListener(type, notify);
+  };
+}
+var now = (run) => run();
+function createLiveSource(lenses, resolve, conditions, schedule = now) {
   const measures = /* @__PURE__ */ new Set();
   const listeners2 = /* @__PURE__ */ new Set();
+  let due = false;
+  const flush = () => {
+    due = false;
+    for (const listener of [...listeners2]) listener();
+  };
+  const notify = () => {
+    if (due) return;
+    due = true;
+    schedule(flush);
+  };
   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.
+    // A reader hears of what it reads: the lens's copy, and with nothing compared, the main story under the reticle.
     subscribe(listener) {
       listeners2.add(listener);
       return () => {
@@ -1606,10 +1797,9 @@ function createLiveSource(lenses, resolve, conditions) {
       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 });
+      const watchCopy = watchOf(notify);
+      watchCopy(target);
+      const watchStory = watchOf(notify);
       let request = first;
       let posted = null;
       const post = (next) => {
@@ -1620,6 +1810,7 @@ function createLiveSource(lenses, resolve, conditions) {
       const measure = () => {
         const { lensId, reticle, conditions: compare } = request;
         const hit = trialAt(reticle, doc);
+        watchStory(compare === null ? hit?.host ?? null : null);
         empty.hidden = hit !== null;
         if (!hit) {
           post(null);
@@ -1647,7 +1838,8 @@ function createLiveSource(lenses, resolve, conditions) {
           measure();
         },
         detach() {
-          watch?.disconnect();
+          watchCopy(null);
+          watchStory(null);
           measures.delete(measure);
           lenses.set(liveCellId(request.lensId, request.conditions), null);
           target.remove();
@@ -1986,6 +2178,22 @@ function renderReadouts(props) {
     readouts.includes("contrast") ? /* @__PURE__ */ jsx(ContrastReadout, { ...props }) : null
   ] });
 }
+
+// src/shell/loupe/frameScroll.ts
+var ORIGIN = { left: 0, top: 0 };
+var frames = /* @__PURE__ */ new Map();
+var trialOf = (host) => host.dataset.fgHost ?? "";
+function reportFrameScroll(host, scroll) {
+  frames.set(trialOf(host), { left: scroll.left, top: scroll.top });
+  host.dispatchEvent(new Event("scroll"));
+}
+function scrollOf(host) {
+  const scroller = scrollerOf(host);
+  if (scroller) return { left: scroller.scrollLeft, top: scroller.scrollTop };
+  return frames.get(trialOf(host)) ?? ORIGIN;
+}
+
+// src/shell/loupe/capturePayload.ts
 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";
@@ -2018,15 +2226,13 @@ function withoutUndefined(value) {
 }
 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;
+  const { entry, layout, config, state, globals, overrides, host, dpr, resolved, lab, colorScheme, playhead } = 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,
@@ -2034,11 +2240,11 @@ function capturePayload(input) {
     state,
     globals,
     overrides,
-    playhead: !isolate && typeof kept2 === "number" && Number.isFinite(kept2) ? kept2 : null,
+    playhead: isolate ? null : playhead,
     box,
     layout,
     dpr: clampDpr(resolved.dpr ?? dpr),
-    scroll: { left: scroller?.scrollLeft ?? 0, top: scroller?.scrollTop ?? 0 },
+    scroll: scrollOf(host),
     lab,
     colorScheme
   };
@@ -2049,8 +2255,10 @@ function trialPayload(trial, lab, hit, dpr, c) {
   const own = effectiveGlobals(lab.labValues, trial.config?.[GLOBALS_KEY]);
   const resolved = resolveComparison(c, own, ctx);
   const colorScheme = ctx.prefersDark ? "dark" : "light";
+  const { playhead, ...inputs } = trial;
   return capturePayload({
-    ...trial,
+    ...inputs,
+    playhead: playhead(),
     globals: resolved.globals,
     host: hit.host,
     dpr,
@@ -2341,7 +2549,14 @@ function useLensFocus() {
 }
 function createApi(scene, refs) {
   let next = 0;
-  let hold = null;
+  const holds = /* @__PURE__ */ new Map();
+  const release = (lensId) => {
+    holds.get(lensId)?.drop();
+    holds.delete(lensId);
+  };
+  scene.subscribe(() => {
+    for (const lensId of [...holds.keys()]) if (settingsOf(scene, lensId)?.aim !== "follow") release(lensId);
+  });
   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");
@@ -2373,10 +2588,11 @@ function createApi(scene, refs) {
       if (lensId === null || !body) return;
       const pose = reticleAt(scene, lensId, toBody(client, body.getBoundingClientRect()));
       if (pose === null) return;
-      hold ??= scene.overrides.hold();
+      const hold = holds.get(lensId) ?? scene.overrides.hold();
+      holds.set(lensId, hold);
       hold.set([[`${lensId}:reticle`, pose]]);
     },
-    unfollow: () => hold?.drop(),
+    unfollow: release,
     sourceAvailable: (kind) => refs.sources.current[kind]?.status() ?? "not provided",
     openCompareMenu: (lensId) => refs.compare?.current?.(lensId)
   };
@@ -2407,6 +2623,21 @@ function useRemeasure(sources, body, rerender) {
     };
   }, [sources, body, rerender]);
 }
+function useFrameSchedule() {
+  const next = useRef(null);
+  const frame = useVisibleRaf(() => {
+    const run = next.current;
+    next.current = null;
+    run?.();
+  });
+  return useCallback(
+    (run) => {
+      next.current = run;
+      frame.request();
+    },
+    [frame]
+  );
+}
 function ForgeLoupe({ declarations, modeGlobal }) {
   const lenses = useContext(LiveLensesContext);
   const labValues = useContext(StoryGlobalsContext);
@@ -2417,8 +2648,14 @@ function ForgeLoupe({ declarations, modeGlobal }) {
   const pointer = useRef(null);
   const { focus, onFocusLens } = useLensFocus();
   const conditions = useLatest({ labValues, mode, declarations, modeGlobal });
+  const onFrame = useFrameSchedule();
   const [live] = useState(
-    () => lenses ? createLiveSource(lenses, resolveComparison, () => ({ base: conditions.current.labValues, ctx: resolveContextOf(conditions.current) })) : null
+    () => lenses ? createLiveSource(
+      lenses,
+      resolveComparison,
+      () => ({ base: conditions.current.labValues, ctx: resolveContextOf(conditions.current) }),
+      onFrame
+    ) : null
   );
   const pixels = usePixelsSource(conditions);
   const sources = useMemo(
@@ -2478,20 +2715,41 @@ function ForgeLoupe({ declarations, modeGlobal }) {
 function routedTrial(trials, focusedTrialId, route) {
   return trials.find((t) => t.id === focusedTrialId && t.instrumentName === route) ?? trials.find((t) => t.instrumentName === route);
 }
+
+// src/timeline/playheadUrl.ts
+function formatSeconds(ms) {
+  const rounded = Math.round(ms) / 1e3;
+  return String(rounded === 0 ? 0 : rounded);
+}
+function parseSeconds(text) {
+  if (text == null || !/^\s*-?(\d+\.?\d*|\.\d+)\s*$/.test(text)) return null;
+  return Math.round(Number(text) * 1e3);
+}
+function readPlayheadParam() {
+  return parseSeconds(readRouteParams()[PLAYHEAD_PARAM]);
+}
+function writePlayheadParam(ms) {
+  replaceRouteParams(
+    ({ [PLAYHEAD_PARAM]: _held, ...rest }) => ms === null ? rest : { ...rest, [PLAYHEAD_PARAM]: formatSeconds(ms) }
+  );
+}
 function PlayheadSync({ trialId, route, appliedRef }) {
-  const clock = useTrialClock(trialId);
+  const handle = useTrialClockHandle(trialId);
   useEffect(() => {
-    if (!clock) return;
+    if (!handle) return;
+    const { clock } = handle;
+    let hold = null;
     const fromUrl = () => {
       const t = readPlayheadParam();
-      if (t === null || t === clock.get().time) return;
-      clock.request(t);
+      if (t === null || t === shownTime(clock)) return;
+      hold?.release();
+      hold = holdAt(handle, t);
     };
     let held;
     const toUrl = () => {
-      if (clock.pending() !== null) return;
-      const { playing, time, span } = clock.get();
-      const next = playing || time === span.start ? null : time;
+      if (hold && hold.pending() !== null) return;
+      const time = shownTime(clock);
+      const next = clock.rate !== 0 || time === clock.origin ? null : time;
       if (next === held) return;
       held = next;
       writePlayheadParam(next);
@@ -2511,9 +2769,10 @@ function PlayheadSync({ trialId, route, appliedRef }) {
     window.addEventListener("hashchange", onHashChange);
     return () => {
       off();
+      hold?.release();
       window.removeEventListener("hashchange", onHashChange);
     };
-  }, [clock, route, appliedRef]);
+  }, [handle, route, appliedRef]);
   return null;
 }
 function RoutePlayhead() {
@@ -2668,7 +2927,8 @@ function KnobSync({ schema, config }) {
     if (reading.current && takeRouteFromTrial()) reading.current = false;
     if (reading.current) {
       reading.current = false;
-      const knobs2 = paramsToKnobs(schema, readRouteParams());
+      const params = readRouteParams();
+      const knobs2 = paramsToKnobs(schema, params);
       let wrote = false;
       for (const { path, leaf } of knobPaths(schema)) {
         const target = path in knobs2 ? knobs2[path] : leaf.default;
@@ -2677,10 +2937,15 @@ function KnobSync({ schema, config }) {
         setConfig(path, target);
         wrote = true;
       }
+      for (const [path, pin] of Object.entries(paramsToPins(schema, params))) {
+        if (valueAtPath(config, path) === pin) continue;
+        setConfig(path, pin);
+        wrote = true;
+      }
       if (wrote) return;
     }
     const knobs = knobsToParams(schema, config);
-    replaceRouteParams((params) => ({ ...knobs, ...reservedParams(params) }));
+    replaceRouteParams((params) => ({ ...knobs, ...withoutPins(reservedParams(params)) }));
   }, [schema, config, setConfig, typed]);
   return null;
 }
@@ -2898,6 +3163,8 @@ var VIEWS = [
   { value: "gallery", label: "Gallery" }
 ];
 var keyOf = (node) => node.kind === "folder" ? `folder:${node.path}` : `story:${node.entry.id}`;
+var pathOf = (folderKey) => folderKey.slice("folder:".length);
+var hrefOf = (entry) => `#/${encodeURIComponent(entry.id)}`;
 function ancestorsOf(entry) {
   const paths = /* @__PURE__ */ new Set();
   if (!entry) return paths;
@@ -2911,7 +3178,8 @@ function ancestorsOf(entry) {
 function LibraryBadge2({ library }) {
   return /* @__PURE__ */ jsx(LibraryBadge, { library, className: "fg-tree__tag" });
 }
-function RowTags({ lab, library }) {
+function rowTags(lab, library) {
+  if (!lab && !library) return void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     lab ? /* @__PURE__ */ jsx(LabBadge, { className: "fg-tree__lab" }) : null,
     library ? /* @__PURE__ */ jsx(LibraryBadge2, { library }) : null
@@ -2924,8 +3192,6 @@ function StoryTree({ ctx, index }) {
   const [folds, setFolds] = usePersistedState("fg-tree-open", {}, { scope: "lab" });
   const [chosen, setView] = usePersistedState("fg-tree-view", "components", { scope: "lab" });
   const [hidden, setHidden] = usePersistedState("fg-tree-libraries", {}, { scope: "lab" });
-  const [focusKey, setFocusKey] = useState(null);
-  const items = useRef(/* @__PURE__ */ new Map());
   const table = useContext(LibrariesContext);
   const libraries = useMemo(() => librariesIn(index, table), [index, table]);
   const views = useMemo(() => {
@@ -2953,24 +3219,45 @@ function StoryTree({ ctx, index }) {
   const routed = routable.find((entry) => entry.id === route);
   const routeAncestors = useMemo(() => ancestorsOf(routed), [routed]);
   const filtering = query.trim() !== "";
-  const isOpen = (path) => filtering || (folds[path] ?? routeAncestors.has(path));
-  const rows = [];
-  const collect2 = (nodes, parent) => {
-    for (const node of nodes) {
-      rows.push({ key: keyOf(node), node, parent });
-      if (node.kind === "folder" && isOpen(node.path)) collect2(node.children, keyOf(node));
-    }
-  };
-  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) => {
-    if (!filtering) setFolds((prev) => ({ ...prev, [path]: open }));
-  };
-  const moveTo = (key) => {
-    if (key === void 0) return;
-    setFocusKey(key);
-    items.current.get(key)?.focus();
+  const openKey = ctx.trials.map((trial) => trial.instrumentName).join("\n");
+  const openIds = useMemo(() => new Set(openKey.split("\n")), [openKey]);
+  const { nodes, byId, folders: folderIds } = useMemo(() => {
+    const ids = /* @__PURE__ */ new Map();
+    const folders = [];
+    const convert = (list) => list.map((node) => {
+      const id = keyOf(node);
+      ids.set(id, node);
+      if (node.kind === "folder") {
+        folders.push(id);
+        return {
+          id,
+          label: node.label,
+          className: "fg-tree__folder",
+          href: node.index ? hrefOf(node.index) : void 0,
+          current: !!node.index && openIds.has(node.index.id),
+          trailing: rowTags(!!node.index && isLab(node.index), node.tag),
+          children: convert(node.children)
+        };
+      }
+      return {
+        id,
+        label: node.label ?? node.entry.name,
+        className: "fg-tree__story",
+        href: hrefOf(node.entry),
+        current: openIds.has(node.entry.id),
+        trailing: rowTags(isLab(node.entry), node.tag)
+      };
+    });
+    return { nodes: convert(shown), byId: ids, folders };
+  }, [shown, openIds]);
+  const expanded = useMemo(
+    () => new Set(folderIds.filter((id) => filtering || (folds[pathOf(id)] ?? routeAncestors.has(pathOf(id))))),
+    [folderIds, filtering, folds, routeAncestors]
+  );
+  const onExpandedChange = (next) => {
+    if (filtering) return;
+    const changed = folderIds.filter((id) => next.has(id) !== expanded.has(id));
+    if (changed.length) setFolds((prev) => ({ ...prev, ...Object.fromEntries(changed.map((id) => [pathOf(id), next.has(id)])) }));
   };
   const activate = (entry, another) => {
     const focused = ctx.trials.find((trial) => trial.id === ctx.focusedTrialId);
@@ -2986,20 +3273,29 @@ function StoryTree({ ctx, index }) {
     }
     setRoute2(entry.id);
   };
-  const openFolder = (node, another) => {
-    if (!node.index) {
-      setOpen(node.path, !isOpen(node.path));
-      return;
-    }
-    if (folds[node.path] === false) {
-      setFolds(({ [node.path]: _dropped, ...rest2 }) => rest2);
-    }
-    activate(node.index, another);
+  const openIndex = (path, page, another) => {
+    const was = folds[path];
+    setFolds(({ [path]: _toggled, ...rest2 }) => was ? { ...rest2, [path]: was } : rest2);
+    activate(page, another);
+  };
+  const onAction = (id, mods) => {
+    const node = byId.get(id);
+    if (node?.kind === "story") activate(node.entry, mods.shiftKey);
+    else if (node?.index) openIndex(node.path, node.index, mods.shiftKey);
   };
+  const treeEl = useRef(null);
   const scrollTo = useRef(null);
+  useEffect(() => {
+    const id = scrollTo.current;
+    if (id == null) return;
+    const row = [...treeEl.current?.querySelectorAll("[data-tree-id]") ?? []].find((el) => el.dataset.treeId === id);
+    if (!row) return;
+    scrollTo.current = null;
+    row.firstElementChild?.scrollIntoView({ block: "nearest" });
+  });
   const reveal = (path) => {
-    const find = (nodes, at) => {
-      for (const node2 of nodes) {
+    const find = (list, at) => {
+      for (const node2 of list) {
         if (node2.kind !== "folder") continue;
         if (node2.path === at) return node2;
         const inner = find(node2.children, at);
@@ -3027,135 +3323,11 @@ function StoryTree({ ctx, index }) {
     const segments = found.path.split("/");
     const above = segments.slice(0, -1).map((_, i) => segments.slice(0, i + 1).join("/"));
     setFolds((prev) => ({ ...prev, ...Object.fromEntries(above.map((p) => [p, true])) }));
-    setFocusKey(keyOf(found));
     scrollTo.current = keyOf(found);
-    if (found.index) openFolder(found, false);
+    if (found.index) openIndex(found.path, found.index, false);
     else setFolds((prev) => ({ ...prev, [found.path]: true }));
   };
   useEffect(() => onRevealInTree(reveal));
-  const onKeyDown = (event) => {
-    const at = rows.findIndex((row2) => row2.key === active);
-    const row = rows[at];
-    if (!row) return;
-    const { node } = row;
-    switch (event.key) {
-      case "ArrowDown":
-        moveTo(rows[at + 1]?.key);
-        break;
-      case "ArrowUp":
-        moveTo(rows[at - 1]?.key);
-        break;
-      case "Home":
-        moveTo(rows[0]?.key);
-        break;
-      case "End":
-        moveTo(rows[rows.length - 1]?.key);
-        break;
-      case "ArrowRight":
-        if (node.kind !== "folder") break;
-        if (!isOpen(node.path)) setOpen(node.path, true);
-        else if (rows[at + 1]?.parent === row.key) moveTo(rows[at + 1]?.key);
-        break;
-      case "ArrowLeft":
-        if (node.kind === "folder" && isOpen(node.path) && !filtering) setOpen(node.path, false);
-        else moveTo(row.parent ?? void 0);
-        break;
-      case "Enter":
-      case " ":
-        if (node.kind === "story") activate(node.entry, event.shiftKey);
-        else openFolder(node, event.shiftKey);
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-  };
-  const itemProps = (node, level) => {
-    const key = keyOf(node);
-    return {
-      role: "treeitem",
-      "aria-level": level,
-      tabIndex: key === active ? 0 : -1,
-      ref: (el) => {
-        if (el) items.current.set(key, el);
-        else items.current.delete(key);
-        if (el && scrollTo.current === key) {
-          scrollTo.current = null;
-          el.scrollIntoView({ block: "nearest" });
-        }
-      },
-      // A folder item contains its children, so their focus bubbles through it.
-      onFocus: (event) => {
-        if (event.target === event.currentTarget) setFocusKey(key);
-      }
-    };
-  };
-  const renderNodes = (nodes, level) => nodes.map((node) => {
-    if (node.kind === "folder") {
-      const open = isOpen(node.path);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ...itemProps(node, level),
-          "aria-expanded": open,
-          "aria-label": node.label,
-          "aria-current": node.index && openIds.has(node.index.id) ? "true" : void 0,
-          className: "fg-tree__node",
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "fg-tree__item fg-tree__folder",
-                onClick: (event) => {
-                  setFocusKey(keyOf(node));
-                  openFolder(node, event.shiftKey);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: "fg-tree__fold",
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        setOpen(node.path, !open);
-                      },
-                      children: /* @__PURE__ */ jsx(DisclosureMark, { open })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label }),
-                  /* @__PURE__ */ jsx(RowTags, { lab: !!node.index && isLab(node.index), library: node.tag })
-                ]
-              }
-            ),
-            open ? /* @__PURE__ */ jsx("div", { role: "group", className: "fg-tree__group", children: renderNodes(node.children, level + 1) }) : null
-          ]
-        },
-        keyOf(node)
-      );
-    }
-    const { entry } = node;
-    return /* @__PURE__ */ jsxs(
-      "a",
-      {
-        ...itemProps(node, level),
-        href: `#/${encodeURIComponent(entry.id)}`,
-        "aria-current": openIds.has(entry.id) ? "true" : void 0,
-        className: "fg-tree__item fg-tree__story",
-        onClick: (event) => {
-          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey) return;
-          event.preventDefault();
-          setFocusKey(keyOf(node));
-          activate(entry, event.shiftKey);
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label ?? entry.name }),
-          /* @__PURE__ */ jsx(RowTags, { lab: isLab(entry), library: node.tag })
-        ]
-      },
-      keyOf(node)
-    );
-  });
   return /* @__PURE__ */ jsxs("section", { className: "fg-tree", children: [
     /* @__PURE__ */ jsx("h2", { id: headingId, className: "fg-tree__heading", children: "Stories" }),
     route && !routed ? /* @__PURE__ */ jsxs("p", { className: "fg-route-miss", children: [
@@ -3197,7 +3369,19 @@ function StoryTree({ ctx, index }) {
         onChange: (event) => setQuery(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsx("div", { role: "tree", "aria-labelledby": headingId, className: "fg-tree__items", onKeyDown, children: renderNodes(shown, 1) })
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        ref: treeEl,
+        "aria-labelledby": headingId,
+        className: "fg-tree__items",
+        nodes,
+        empty: filtering ? "No stories match" : "No stories",
+        expandedIds: expanded,
+        onExpandedChange,
+        onAction
+      }
+    )
   ] });
 }
 var KEPT_CONFIGS = 50;
@@ -3276,7 +3460,7 @@ function sendInputs(current, sent, next) {
   return current.inputs !== before;
 }
 function receive(deps, current, msg) {
-  const { latest: latestRef, trialId, frames, setFault, setPending, init, copy } = deps;
+  const { latest: latestRef, trialId, frames: frames2, host, setFault, setPending, init, copy } = deps;
   const { ctx: live, answers, onReady } = latestRef.current;
   switch (msg.type) {
     case "ready": {
@@ -3311,15 +3495,18 @@ function receive(deps, current, msg) {
       if (!copy) answers.record(msg.answers);
       break;
     case "vars":
-      if (trialId) frames?.report(trialId, msg.vars);
+      if (trialId) frames2?.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);
+      if (trialId) frames2?.reportA11y(trialId, outcome);
       current.pending.get(msg.id)?.(outcome);
       current.pending.delete(msg.id);
       break;
     }
+    case "scroll":
+      if (!copy && host.current) reportFrameScroll(host.current, msg);
+      break;
     case "open": {
       const { lab: liveLab } = latestRef.current;
       if (!trialId || !liveLab.instruments.some((instrument) => instrument.name === msg.id)) break;
@@ -3335,7 +3522,7 @@ function receive(deps, current, msg) {
   }
 }
 function openLink(deps, link, frame) {
-  const { latest: latestRef, src, trialId, frames, setFault, setPending } = deps;
+  const { latest: latestRef, src, trialId, frames: frames2, setFault, setPending } = deps;
   closeLink(link);
   setPending(true);
   const target = frame.contentWindow;
@@ -3356,7 +3543,7 @@ function openLink(deps, link, frame) {
     if (current.hasRendered) ask();
     else current.queued.push(ask);
   });
-  const disconnect = frames && trialId ? frames.connect(trialId, { send: channel.send, audit }) : () => {
+  const disconnect = frames2 && trialId ? frames2.connect(trialId, { send: channel.send, audit }) : () => {
   };
   const current = {
     channel,
@@ -3377,7 +3564,7 @@ function openLink(deps, link, frame) {
   ]);
 }
 function useFrameLink(opts) {
-  const { latest: latestRef, src, trialId, frames, setFault, setPending, copy, config, state, globals, descriptionKey } = opts;
+  const { latest: latestRef, src, trialId, frames: frames2, host, setFault, setPending, copy, config, state, globals, descriptionKey } = opts;
   const link = useRef(null);
   const init = useCallback((current) => {
     const { ctx: live, globals: liveGlobals } = latestRef.current;
@@ -3386,7 +3573,7 @@ function useFrameLink(opts) {
     current.inputs += 1;
     current.channel.send({ type: "init", ...current.sent });
   }, [latestRef]);
-  const deps = { latest: latestRef, src, trialId, frames, setFault, setPending, copy, init };
+  const deps = { latest: latestRef, src, trialId, frames: frames2, host, setFault, setPending, copy, init };
   const connect = (frame) => openLink(deps, link, frame);
   const adopt2 = (adopted) => {
     adopted.deliver = (msg) => receive(deps, adopted, msg);
@@ -3504,7 +3691,7 @@ function FrameView(props) {
     [copy, trialCtx, laidConfig, laidSetConfig]
   );
   const trialId = useContext(TrialIdContext);
-  const frames = useContext(TrialFramesContext);
+  const frames2 = useContext(TrialFramesContext);
   const [overrides] = useCssOverrides();
   const pool = useContext(FramePoolContext);
   const lab = useLabContext();
@@ -3521,7 +3708,8 @@ function FrameView(props) {
     latest: latestRef,
     src,
     trialId: copy ? null : trialId,
-    frames: copy ? null : frames,
+    frames: copy ? null : frames2,
+    host: hostRef,
     setFault,
     setPending,
     copy: copy !== void 0,
@@ -3550,6 +3738,24 @@ function FrameView(props) {
     if (iframeRef.current) iframeRef.current.title = title;
   }, [title]);
   useEffect(() => copy ? void 0 : answers.hold(ctx.config), [answers, ctx.config, copy]);
+  const setup = props.setup;
+  const copyId = copy?.id;
+  useLayoutEffect(
+    () => copyId && setup && hostRef.current ? applyGlobalsTo(hostRef.current, copyId, globals, setup) : void 0,
+    [copyId, globals, setup]
+  );
+  const factor = copy?.factor;
+  useEffect(() => {
+    if (factor !== void 0) iframeRef.current?.contentWindow?.dispatchEvent(new Event("resize"));
+  }, [factor]);
+  const main = copy?.main;
+  useEffect(() => {
+    if (!main || pending2) return void 0;
+    const follow = () => link.current?.channel.send({ type: "scroll", ...scrollOf(main) });
+    follow();
+    main.addEventListener("scroll", follow, { passive: true });
+    return () => main.removeEventListener("scroll", follow);
+  }, [main, pending2, link]);
   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: [
@@ -3560,7 +3766,7 @@ function FrameView(props) {
   ] });
 }
 function storyInstrument(options) {
-  const { entry, ready, answers, frameUrl, onReady, globals = {} } = options;
+  const { entry, ready, answers, frameUrl, onReady, globals = {}, setup } = options;
   const config = withGlobals(
     ready ? schemaFromDescription(ready.schema, answers) : f.schema({}),
     globals
@@ -3582,10 +3788,11 @@ function storyInstrument(options) {
           answers,
           onReady,
           descriptionKey,
-          ctx
+          ctx,
+          ...setup ? { setup } : {}
         }
       ),
-      /* @__PURE__ */ jsx(CaptureInputs, { entry, layout: ready?.layout ?? "centered", config: ctx.config, state: ctx.state })
+      /* @__PURE__ */ jsx(CaptureInputs, { entry, layout: ready?.layout ?? DEFAULT_LAYOUT, 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 } } } : {}
@@ -3598,7 +3805,7 @@ var NO_SETUP = {};
 var pruned = (map, ids) => [...map.keys()].every((id) => ids.has(id)) ? map : new Map([...map].filter(([id]) => ids.has(id)));
 var toError = (error) => error instanceof Error ? error : new Error(String(error));
 function useStoryRegistry(index, options) {
-  const { frameUrl, globals = NO_GLOBALS2, importers, setup = NO_SETUP, libraries = TITLE_LIBRARIES, load = loadStories } = options;
+  const { frameUrl, globals = NO_GLOBALS2, importers, setup = NO_SETUP, libraries = TITLE_LIBRARIES, load = loadStories, hosts } = options;
   const [readies, setReadies] = useState(() => /* @__PURE__ */ new Map());
   const [loaded, setLoaded] = useState(() => /* @__PURE__ */ new Map());
   const [faults, setFaults] = useState(() => /* @__PURE__ */ new Map());
@@ -3654,30 +3861,9 @@ function useStoryRegistry(index, options) {
         });
       };
       if (isIndexId(entry.id)) {
-        const entries = liveRef.current.index.filter((e) => !isIndexId(e.id) && indexId(e.title) === entry.id);
-        const files = [...new Set(entries.map((e) => e.file))];
-        void Promise.all(files.map(importOf)).then(async (mods) => {
-          const byFile = new Map(files.map((file, i) => [file, loadModule(mods[i] ?? {}, entry.title, current.parameters)]));
-          const stories = entries.flatMap(
-            (e) => byFile.get(e.file)?.find((s) => s.exportName === e.exportName) ?? []
-          );
-          for (const story of stories) await current.prepare?.(story);
-          const result = /* @__PURE__ */ new Map();
-          result.set(entry.id, {
-            kind: "index",
-            bundle: {
-              title: entry.title,
-              library: liveRef.current.libraries.of(entry),
-              ...entry.componentDescription === void 0 ? {} : { description: entry.componentDescription },
-              ...entry.tags === void 0 ? {} : { tags: entry.tags },
-              ...taggedIds(entries),
-              stories,
-              descriptions: Object.fromEntries(entries.flatMap((e) => e.description ? [[e.id, e.description]] : [])),
-              render: mods.map(indexRenderOf).find((render) => render !== null) ?? null
-            }
-          });
-          settle([entry.id], result);
-        }).catch((error) => fail([entry.id], error));
+        const { index: entries, libraries: libraries2 } = liveRef.current;
+        const source = { index: entries, importOf, load: loadModule, parameters: current.parameters, prepare: current.prepare, libraries: libraries2 };
+        void loadIndexBundle(entry.id, source).then((bundle) => settle([entry.id], /* @__PURE__ */ new Map([[entry.id, { kind: "index", bundle }]]))).catch((error) => fail([entry.id], error));
         return;
       }
       const siblings = liveRef.current.index.filter((e) => e.file === entry.file && !isIndexId(e.id));
@@ -3742,14 +3928,14 @@ function useStoryRegistry(index, options) {
         inDocument,
         generation,
         revision,
-        instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals }) : had ? documentInstrument({ entry, loaded: had, setup, globals }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
+        instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals, setup }) : had ? documentInstrument({ entry, loaded: had, setup, globals, ...hosts ? { hosts } : {} }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
       };
       built.set(entry.id, kept2);
       return kept2.instrument;
     });
     const unchanged = list.length === previous.list.length && list.every((i, n) => i === previous.list[n]);
     return { built, books, list: unchanged ? previous.list : list };
-  }, [index, readies, loaded, faults, generations, revisions2, frameUrl, globals, setup, importers, onReady, request]);
+  }, [index, readies, loaded, faults, generations, revisions2, frameUrl, globals, setup, hosts, importers, onReady, request]);
   useLayoutEffect(() => {
     committed.current = cache;
   }, [cache]);
@@ -3788,6 +3974,19 @@ function useDocumentTitle(title) {
     document.title = title;
   }, [title]);
 }
+function useFramePool(frameUrl, framed) {
+  const [pool, setPool] = useState(null);
+  useEffect(() => {
+    if (!framed) return;
+    const next = createFramePool(frameUrl);
+    setPool(next);
+    return () => {
+      next.dispose();
+      setPool(null);
+    };
+  }, [frameUrl, framed]);
+  return pool;
+}
 function NoStories({ stories }) {
   return /* @__PURE__ */ jsxs("div", { className: "fg-empty", children: [
     /* @__PURE__ */ jsx("p", { className: "fg-empty__title", children: "No stories found" }),
@@ -3799,19 +3998,9 @@ function Workshop(props) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const title = config?.title ?? DEFAULT_TITLE;
   useDocumentTitle(title);
-  const [frames] = useState(createTrialFrames);
-  const [clocks] = useState(createTrialClocks);
-  const [pool, setPool] = useState(null);
-  const framed = importers === void 0 || index.some((entry) => entry.isolate !== void 0);
-  useEffect(() => {
-    if (!framed) return;
-    const next = createFramePool(frameUrl);
-    setPool(next);
-    return () => {
-      next.dispose();
-      setPool(null);
-    };
-  }, [frameUrl, framed]);
+  const [frames2] = useState(createTrialFrames);
+  const [hosts] = useState(createStoryHosts);
+  const pool = useFramePool(frameUrl, importers === void 0 || index.some((entry) => entry.isolate !== void 0));
   const entries = useMemo(() => [...index, ...indexEntries(index)], [index]);
   const table = config?.libraries;
   const libraries = useMemo(() => librariesFrom(table), [table]);
@@ -3819,6 +4008,7 @@ function Workshop(props) {
     frameUrl,
     globals: declarations,
     libraries,
+    hosts,
     ...importers ? { importers } : {},
     ...setup ? { setup } : {}
   });
@@ -3848,18 +4038,19 @@ function Workshop(props) {
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
       ...showsCssVars ? cssVarsChrome2 : [],
       A11Y_SECTION,
+      issuesSection(index, props.issuesBase),
       ...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, showsCssVars, cssVarsChrome2, keysChrome2, config?.labChrome, modeGlobal]
+    [index, props.issuesBase, infoCommand, declarations, showsCssVars, cssVarsChrome2, keysChrome2, config?.labChrome, modeGlobal]
   );
   const [menus, setMenus] = useState();
   const first = index[0];
   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(
+  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: frames2, children: /* @__PURE__ */ jsx(StoryHostsContext.Provider, { value: hosts, children: /* @__PURE__ */ jsx(LoupeProvider, { captureBase: props.captureBase, revision: props.revision, children: /* @__PURE__ */ jsxs(
     Lab,
     {
       title,
@@ -3871,6 +4062,7 @@ function Workshop(props) {
       ...storage ? { storage } : {},
       labChrome,
       addTrial: false,
+      marks: false,
       ...menus ? { menus } : {},
       ...config?.controls ? { controls: config.controls } : {},
       ...config?.pages ? { pages: config.pages } : {},