@weasel-js/forge 1.12.0 → 1.13.0

package/dist/shell/index.js

@@ -1,15 +1,16 @@
-import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-LTTEILXY.js';
+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, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, IndexPage, openChannel } from '../chunk-ATI7FYJ7.js';
-import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, LiveLensesContext, trialAt, describeLens, createLiveLenses, useCopyConfig, useCssOverrides, LiveFrameCopies, useTrialClock, TrialHost, LiveCopies, resolveContextOf, resolveComparison, withArgs, scrollerOf } from '../chunk-YDLRSEUN.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-YDLRSEUN.js';
+import { TITLE_LIBRARIES, loadIndexBundle, librariesFrom, LibrariesContext, LAB_DENSITY, createKitRoot, schemaFromDescription, LibraryBadge, Description, IndexPage, indexEnvOf, LabBadge, openChannel } from '../chunk-WFT5IOHX.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, indexRenderOf, useNearViewport, IN_VIEW_MARGIN, varRefs, cssRulesOf } from '../chunk-WMGEO5M6.js';
+import { loadStories, useNearViewport, IN_VIEW_MARGIN, applyGlobalsTo, varRefs, cssRulesOf } from '../chunk-GHPMNT2A.js';
 import '../chunk-L5XM5VKB.js';
 import '../chunk-5WS67HMU.js';
-import '../chunk-KEQBGDUZ.js';
-import { stableStringify, FRAME_HELLO, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-GH5RE5X5.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 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';
@@ -20,7 +21,7 @@ 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';
@@ -92,7 +93,7 @@ function A11yPanel() {
   };
   const outcome = frame.a11y;
   return /* @__PURE__ */ jsxs("div", { className: "fg-a11y", children: [
-    /* @__PURE__ */ jsx("div", { className: "fg-a11y__controls", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: rerun, disabled: !audit || running, children: running ? "Checking\u2026" : "Re-check" }) }),
+    /* @__PURE__ */ jsx("div", { className: "fg-a11y__controls", children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: rerun, disabled: !audit || running, children: running ? "Checking\u2026" : "Re-check" }) }),
     !audit ? /* @__PURE__ */ jsx("p", { className: "fg-a11y__note", children: "No frame is connected." }) : null,
     audit && !outcome ? /* @__PURE__ */ jsx("p", { className: "fg-a11y__note", children: running ? "Running axe\u2026" : "Not checked yet." }) : null,
     outcome && !outcome.ok ? /* @__PURE__ */ jsxs("p", { className: "fg-a11y__note", role: "alert", children: [
@@ -261,7 +262,9 @@ function TransportBar({ clock }) {
       {
         className: "fg-transport__scrub",
         ariaLabel: "Scrub",
-        density: "slim",
+        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,
@@ -293,10 +296,15 @@ function TrialTransport({ trialId }) {
 }
 
 // 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("/") }));
-  steps.push({ label: name, path: null });
+  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) {
@@ -334,31 +342,12 @@ 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,
-      ...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 })
@@ -407,10 +396,18 @@ 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
+        }
+      )
+    ] }),
     ...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 }) }] } : {}
   };
@@ -765,22 +762,22 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
       const stored = await api.get(THEME_NAME);
       const file = `themes/${THEME_NAME}.json`;
       if (JSON.stringify(stored.definition) !== JSON.stringify(THEME_SOURCES[THEME_NAME])) {
-        setNotice({ tone: "error", text: `${file} has changed since this page loaded. Reload to edit against it.` });
+        setNotice({ outcome: "error", text: `${file} has changed since this page loaded. Reload to edit against it.` });
         return;
       }
       const scaled = applyScaleEdits(stored.definition, Object.fromEntries(scales.map((s) => [s.name, s.edit])), selection);
       const next = scaled.ok ? applyTokenEdits(scaled.definition, tokens, selection) : scaled;
       if (!next.ok) {
-        setNotice({ tone: "error", text: next.message });
+        setNotice({ outcome: "error", text: next.message });
         return;
       }
       const result = await api.put(THEME_NAME, next.definition, stored.hash);
       if (result.status === "conflict") {
-        setNotice({ tone: "error", text: `${file} changed on disk while saving. Nothing was written; reload to edit against it.` });
+        setNotice({ outcome: "error", text: `${file} changed on disk while saving. Nothing was written; reload to edit against it.` });
         return;
       }
       if (result.status === "invalid") {
-        setNotice({ tone: "error", text: result.message });
+        setNotice({ outcome: "error", text: result.message });
         return;
       }
       const saved = /* @__PURE__ */ new Set([
@@ -788,16 +785,16 @@ 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 ? { tone: "saved", text: `Saved to ${file}.` } : { tone: "error", text: `Saved to ${file}, but the tokens were not regenerated: ${result.problems.join("; ")}` }
+        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("; ")}` }
       );
     } catch (e) {
-      setNotice({ tone: "error", text: `Saving needs forge's dev server, which did not answer: ${e.message}` });
+      setNotice({ outcome: "error", text: `Saving needs forge's dev server, which did not answer: ${e.message}` });
     } finally {
       setSaving(false);
     }
@@ -1001,16 +998,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}`
     );
   };
@@ -1096,8 +1093,8 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
 function SaveRow({ pending: pending2, saving, notice, onSave }) {
   if (!pending2 && !notice) return null;
   return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
-    pending2 ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: onSave, children: "Save to theme" }) : null,
-    notice ? /* @__PURE__ */ jsx("p", { className: `fg-css-vars__notice fg-css-vars__notice--${notice.tone}`, role: notice.tone === "error" ? "alert" : "status", children: notice.text }) : null
+    pending2 ? /* @__PURE__ */ jsx(Button$1, { stance: "confirm", size: "sm", loading: saving, disabled: saving, onClick: onSave, children: "Save to theme" }) : null,
+    notice ? /* @__PURE__ */ jsx("p", { className: `fg-css-vars__notice fg-css-vars__notice--${notice.outcome}`, role: notice.outcome === "error" ? "alert" : "status", children: notice.text }) : null
   ] });
 }
 function FocusedCssVars() {
@@ -1345,8 +1342,8 @@ function ArgRows({ args }) {
 function StoryDossier({ dossier }) {
   return /* @__PURE__ */ jsxs("div", { className: "fg-info", children: [
     dossier.description || dossier.componentDescription ? /* @__PURE__ */ jsxs("section", { className: "fg-info__section", "aria-label": "Docs", children: [
-      dossier.description ? /* @__PURE__ */ jsx("p", { className: "fg-info__doc", children: dossier.description }) : null,
-      dossier.componentDescription ? /* @__PURE__ */ jsx("p", { className: "fg-info__doc fg-info__doc--component", children: dossier.componentDescription }) : null
+      dossier.description ? /* @__PURE__ */ jsx(Description, { text: dossier.description, className: "fg-info__doc" }) : null,
+      dossier.componentDescription ? /* @__PURE__ */ jsx(Description, { text: dossier.componentDescription, className: "fg-info__doc fg-info__doc--component" }) : null
     ] }) : null,
     /* @__PURE__ */ jsx("section", { className: "fg-info__section", "aria-label": "Identity", children: /* @__PURE__ */ jsxs("dl", { className: "fg-info__rows", children: [
       /* @__PURE__ */ jsx(Row, { label: "Story", children: dossier.name }),
@@ -1574,15 +1571,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 () => {
@@ -1597,10 +1619,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) => {
@@ -1611,6 +1632,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);
@@ -1638,7 +1660,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();
@@ -1977,6 +2000,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";
@@ -2016,7 +2055,6 @@ function capturePayload(input) {
   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,
@@ -2029,7 +2067,7 @@ function capturePayload(input) {
     box,
     layout,
     dpr: clampDpr(resolved.dpr ?? dpr),
-    scroll: { left: scroller?.scrollLeft ?? 0, top: scroller?.scrollTop ?? 0 },
+    scroll: scrollOf(host),
     lab,
     colorScheme
   };
@@ -2332,7 +2370,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");
@@ -2364,9 +2409,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: release,
     sourceAvailable: (kind) => refs.sources.current[kind]?.status() ?? "not provided",
     openCompareMenu: (lensId) => refs.compare?.current?.(lensId)
   };
@@ -2397,6 +2444,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);
@@ -2407,8 +2469,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(
@@ -2723,6 +2791,16 @@ function foldGalleries(nodes) {
     return { ...node, children };
   });
 }
+function hoistLoneStories(nodes) {
+  return nodes.map((node) => {
+    if (node.kind !== "folder") return node;
+    const [only] = node.children;
+    if (node.children.length === 1 && only?.kind === "story" && restatesTitle(node.path, only.entry.name)) {
+      return { kind: "story", entry: only.entry, label: node.label, tag: node.tag ?? only.tag };
+    }
+    return { ...node, children: hoistLoneStories(node.children) };
+  });
+}
 function buildTree(index) {
   const root = [];
   const folders = /* @__PURE__ */ new Map();
@@ -2743,7 +2821,7 @@ function buildTree(index) {
     }
     siblings.push({ kind: "story", entry });
   }
-  return sortFolder(root);
+  return hoistLoneStories(sortFolder(root));
 }
 function filterTree(nodes, query) {
   const needle = query.trim().toLowerCase();
@@ -2867,7 +2945,7 @@ function componentNodes(rows) {
       ...row.entries.map((entry) => ({ kind: "story", entry }))
     ];
   }
-  return foldGalleries(root);
+  return hoistLoneStories(foldGalleries(root));
 }
 function librariesIn(index, libraries) {
   return [...new Set(index.map(libraries.of))].sort((a, b) => a.localeCompare(b));
@@ -2891,6 +2969,12 @@ function ancestorsOf(entry) {
 function LibraryBadge2({ library }) {
   return /* @__PURE__ */ jsx(LibraryBadge, { library, className: "fg-tree__tag" });
 }
+function RowTags({ lab, library }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    lab ? /* @__PURE__ */ jsx(LabBadge, { className: "fg-tree__lab" }) : null,
+    library ? /* @__PURE__ */ jsx(LibraryBadge2, { library }) : null
+  ] });
+}
 function StoryTree({ ctx, index }) {
   const headingId = useId();
   const [route, setRoute2] = useRoute();
@@ -3098,7 +3182,7 @@ function StoryTree({ ctx, index }) {
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label }),
-                  node.tag ? /* @__PURE__ */ jsx(LibraryBadge2, { library: node.tag }) : null
+                  /* @__PURE__ */ jsx(RowTags, { lab: !!node.index && isLab(node.index), library: node.tag })
                 ]
               }
             ),
@@ -3124,7 +3208,7 @@ function StoryTree({ ctx, index }) {
         },
         children: [
           /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label ?? entry.name }),
-          node.tag ? /* @__PURE__ */ jsx(LibraryBadge2, { library: node.tag }) : null
+          /* @__PURE__ */ jsx(RowTags, { lab: isLab(entry), library: node.tag })
         ]
       },
       keyOf(node)
@@ -3250,7 +3334,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": {
@@ -3285,15 +3369,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;
@@ -3309,7 +3396,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;
@@ -3330,7 +3417,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,
@@ -3351,7 +3438,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;
@@ -3360,7 +3447,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);
@@ -3478,7 +3565,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();
@@ -3495,7 +3582,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,
@@ -3524,6 +3612,20 @@ 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 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: [
@@ -3534,7 +3636,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
@@ -3556,7 +3658,8 @@ function storyInstrument(options) {
           answers,
           onReady,
           descriptionKey,
-          ctx
+          ctx,
+          ...setup ? { setup } : {}
         }
       ),
       /* @__PURE__ */ jsx(CaptureInputs, { entry, layout: ready?.layout ?? "centered", config: ctx.config, state: ctx.state })
@@ -3628,30 +3731,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 },
-              galleries: entries.filter(isGallery).map((e) => e.id),
-              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));
@@ -3716,7 +3798,7 @@ 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 }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
       };
       built.set(entry.id, kept2);
       return kept2.instrument;
@@ -3773,7 +3855,7 @@ function Workshop(props) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const title = config?.title ?? DEFAULT_TITLE;
   useDocumentTitle(title);
-  const [frames] = useState(createTrialFrames);
+  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);
@@ -3833,7 +3915,7 @@ function Workshop(props) {
   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(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsx(LoupeProvider, { captureBase: props.captureBase, revision: props.revision, children: /* @__PURE__ */ jsxs(
     Lab,
     {
       title,