@weasel-js/forge 1.13.0 → 1.14.1

package/dist/shell/index.js

@@ -1,24 +1,22 @@
-import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-COT4I347.js';
-import { DEFAULT_TITLE, CAPTURE_PATH, messageOf, MIN_DPR, MAX_DPR } from '../chunk-ORMMZ5PV.js';
-import { TITLE_LIBRARIES, loadIndexBundle, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, Description, IndexPage, indexEnvOf, LabBadge, openChannel } from '../chunk-WFT5IOHX.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, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, LiveLensesContext, trialAt, describeLens, createLiveLenses, useCopyConfig, useCssOverrides, LiveFrameCopies, useTrialClock, TrialHost, LiveCopies, resolveContextOf, resolveComparison, scrollerOf, withArgs } from '../chunk-XIBKYSRU.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-XIBKYSRU.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isForgePath, isGlobalsPath } from '../chunk-3BAM6M26.js';
-import { loadStories, useNearViewport, IN_VIEW_MARGIN, applyGlobalsTo, varRefs, cssRulesOf } from '../chunk-GHPMNT2A.js';
-import '../chunk-L5XM5VKB.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-7XJNVJB5.js';
-import { stableStringify, FRAME_HELLO, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-2ZBZRBHI.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, useVisibleRaf, effectivePose, useMenuHost, useMenus, sceneToAdapter, parseColor, contrastRatio, wcagLevels, historyKey, isPlainObject, createHistory, keymapShortcuts, actionBindings, keySpecShortcut, keymapLeaderId, swapOp } from '@weasel-js/core';
@@ -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,108 +309,6 @@ 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);
@@ -353,14 +324,18 @@ function IndexTrial({ bundle, setup, config }) {
     /* @__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?.();
@@ -381,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,
@@ -404,12 +446,17 @@ function documentInstrument(options) {
           entry,
           layout: loaded.kind === "story" ? loaded.story.layout : "fullscreen",
           config: ctx.config,
-          state: ctx.state
+          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 }) {
@@ -1046,7 +1093,7 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
                 }
               ),
               /* @__PURE__ */ jsx(
-                Input,
+                Input$1,
                 {
                   className: "fg-css-vars__filter",
                   "aria-label": "Filter",
@@ -1268,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 = [];
@@ -2048,14 +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 kept2 = config?.[PLAYHEAD_KEY];
   return {
     story: entry.id,
     isolate,
@@ -2063,7 +2240,7 @@ 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),
@@ -2078,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,
@@ -2536,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);
@@ -2569,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() {
@@ -2726,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;
@@ -2735,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;
 }
@@ -2956,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;
@@ -2969,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
@@ -2982,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(() => {
@@ -3011,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);
@@ -3044,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);
@@ -3085,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: [
@@ -3255,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;
@@ -3618,6 +3744,10 @@ function FrameView(props) {
     () => 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;
@@ -3662,7 +3792,7 @@ function storyInstrument(options) {
           ...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 } } } : {}
@@ -3675,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());
@@ -3798,14 +3928,14 @@ function useStoryRegistry(index, options) {
         inDocument,
         generation,
         revision,
-        instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals, setup }) : 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]);
@@ -3844,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" }),
@@ -3856,18 +3999,8 @@ function Workshop(props) {
   const title = config?.title ?? DEFAULT_TITLE;
   useDocumentTitle(title);
   const [frames2] = 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 [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]);
@@ -3875,6 +4008,7 @@ function Workshop(props) {
     frameUrl,
     globals: declarations,
     libraries,
+    hosts,
     ...importers ? { importers } : {},
     ...setup ? { setup } : {}
   });
@@ -3904,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: frames2, 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,
@@ -3927,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 } : {},