@weasel-js/forge 1.9.2 → 1.9.4

package/dist/shell/index.js

@@ -1,23 +1,24 @@
-import { parseRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, formatRoute, PLAYHEAD_PARAM, reservedParams } from '../chunk-CJX3W5HY.js';
-import { isIndexId, indexId, libraryOf, indexEntries, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-JVRHBI3V.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-FRUA5WJF.js';
+import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
+import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-MQSFPRF6.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useNearViewport, IN_VIEW_MARGIN, useTrialClock, TrialHost } from '../chunk-BGOHALHO.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-BGOHALHO.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-GZPQMGXJ.js';
-import { loadStories, indexRenderOf } from '../chunk-Q2EZXJFE.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-ZZCCIXEJ.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-ZZCCIXEJ.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-JHL4ERDA.js';
+import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-B3PPHJTS.js';
 import '../chunk-L5XM5VKB.js';
 import '../chunk-HRGPFQBW.js';
-import '../chunk-MGQWCPYE.js';
-import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-KJGXJD3U.js';
+import '../chunk-5KI5YSQ5.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-TXLWQFF6.js';
 import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
 import num from '@weasel-js/theme/numeric.module.css';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useId, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useId, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
+import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
 import { InfoIcon, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport, SearchIcon } from '@weasel-js/ui';
 import { TOKEN_MANIFEST, THEME_SOURCES, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
-import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
 import { useLatest } from '@weasel-js/core';
 
 function Finding({ finding }) {
@@ -44,19 +45,21 @@ function Findings({ title, findings }) {
 function A11yPanel() {
   const trialId = useTrialId();
   const frame = useTrialFrame(trialId);
-  const [running, setRunning] = useState(false);
+  const [inFlight, setInFlight] = useState(0);
+  const running = inFlight > 0;
   const audit = frame.audit;
   const ran = useRef(null);
+  const start = useCallback((run) => {
+    setInFlight((n) => n + 1);
+    void run().finally(() => setInFlight((n) => n - 1));
+  }, []);
   useEffect(() => {
     if (!audit || ran.current === audit) return;
     ran.current = audit;
-    setRunning(true);
-    void audit().finally(() => setRunning(false));
-  }, [audit]);
+    start(audit);
+  }, [audit, start]);
   const rerun = () => {
-    if (!audit) return;
-    setRunning(true);
-    void audit().finally(() => setRunning(false));
+    if (audit) start(audit);
   };
   const outcome = frame.a11y;
   return /* @__PURE__ */ jsxs("div", { className: "fg-a11y", children: [
@@ -112,6 +115,243 @@ function createStoryChanges() {
   };
 }
 var DependenciesContext = createContext(null);
+function readRoute() {
+  return parseRoute(location.hash).story;
+}
+function readRouteParams() {
+  return { ...parseRoute(location.hash).params };
+}
+function replaceRouteParams(update) {
+  const { story, params } = parseRoute(location.hash);
+  if (story === null) return;
+  const next = formatRoute({ story, params: update({ ...params }) });
+  if (next !== location.hash) history.replaceState(history.state, "", next);
+}
+function readRouteEntry() {
+  const state = history.state;
+  const entry = state?.forgeRoute;
+  return typeof entry?.step === "number" ? entry : null;
+}
+function crossesInPlace(from, to) {
+  if (!from || !to || from.step === to.step) return false;
+  return to.step < from.step ? from.inPlace : to.inPlace;
+}
+function stamp(entry, hash) {
+  history.replaceState({ ...history.state ?? {}, forgeRoute: entry }, "", hash);
+}
+function setRoute(id, options = {}) {
+  if (readRoute() === id) {
+    history.replaceState(history.state, "", formatRoute({ story: id, params: readRouteParams() }));
+    return;
+  }
+  const hash = formatRoute({ story: id, params: {} });
+  const from = readRouteEntry() ?? { step: 0, inPlace: false };
+  stamp(from, location.hash);
+  location.hash = hash;
+  stamp({ step: from.step + 1, inPlace: options.inPlace ?? false, ...options.fromTrial ? { fromTrial: true } : {} }, hash);
+}
+function takeRouteFromTrial() {
+  const entry = readRouteEntry();
+  if (!entry?.fromTrial) return false;
+  stamp({ step: entry.step, inPlace: entry.inPlace }, location.hash);
+  return true;
+}
+function useRoute() {
+  const [route, setCurrent] = useState(readRoute);
+  useEffect(() => {
+    const sync = () => setCurrent(readRoute());
+    window.addEventListener("hashchange", sync);
+    sync();
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+  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",
+        density: "slim",
+        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
+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 });
+  return steps.filter((step, i) => i === 0 || step.label.toLowerCase() !== "index");
+}
+function breadcrumb(title, name) {
+  return crumbs(title, name).map((step) => step.label).join(" > ");
+}
+
+// src/shell/treeReveal.ts
+var listeners = /* @__PURE__ */ new Set();
+function revealInTree(path) {
+  for (const listener of listeners) listener(path);
+}
+function onRevealInTree(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(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,
+      ...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 });
+  };
+  return /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render });
+}
+function withPlayhead(schema) {
+  return f.schema({ ...schema.nodes, [PLAYHEAD_KEY]: f.custom("forge-playhead", null).hidden() });
+}
+function documentInstrument(options) {
+  const { entry, loaded, setup, globals = {} } = 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 initialState = loaded.kind === "story" ? loaded.story.initialState : null;
+  return {
+    name: entry.id,
+    ...crumbTitle(entry),
+    config,
+    defaultConfig: () => config.defaults(),
+    initialState: (c) => initialState?.(c) ?? null,
+    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
+    ...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 }) }] } : {}
+  };
+}
+function Fault({ phase, message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fg-fault", role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { className: "fg-fault__phase", children: phase }),
+    /* @__PURE__ */ jsx("p", { className: "fg-fault__message", children: message })
+  ] });
+}
+function StoryLoad({ entry, load, fault }) {
+  useEffect(() => {
+    if (!fault) load(entry);
+  }, [entry, load, fault]);
+  return /* @__PURE__ */ jsx("div", { className: "fg-story fg-story--loading", "data-fg-layout": "fullscreen", children: fault ? /* @__PURE__ */ jsx(Fault, { phase: "import", message: fault.message }) : null });
+}
+function pendingInstrument(options) {
+  const { entry, globals = {} } = options;
+  const config = withGlobals(f.schema({}), globals);
+  return {
+    name: entry.id,
+    ...crumbTitle(entry),
+    config,
+    defaultConfig: () => config.defaults(),
+    initialState: () => null,
+    render: () => /* @__PURE__ */ jsx(StoryLoad, { ...options }, options.generation ?? 0)
+  };
+}
+function missingInstrument(id, globals = {}) {
+  const config = withGlobals(f.schema({}), globals);
+  return {
+    name: id,
+    title: `No story ${id}`,
+    config,
+    defaultConfig: () => config.defaults(),
+    initialState: () => null,
+    render: () => /* @__PURE__ */ jsx("div", { className: "fg-story fg-story--loading", "data-fg-layout": "fullscreen", children: /* @__PURE__ */ jsx(Fault, { phase: "route", message: `No story ${id}` }) })
+  };
+}
 var SEED_REF = /^\{seeds\.([^}]+)\}$/;
 var RULE_KEYS = { factors: "factors", ratio: "ratio", step: "step" };
 function selectionFor(axes, globals) {
@@ -533,17 +773,6 @@ var CSS_VARS_SECTION = {
   region: "aside",
   item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
-
-// src/shell/breadcrumb.ts
-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 });
-  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 GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
   const out = [];
@@ -556,7 +785,7 @@ function leaves(shape, prefix = "") {
   return out;
 }
 function storyDossier(input) {
-  const { entry, instrument, config, ready = true } = input;
+  const { entry, libraries = TITLE_LIBRARIES, instrument, config, ready = true } = input;
   const schema = ready ? instrument?.config : void 0;
   const args = schema ? leaves(schema.nodes).map(({ path, node }) => {
     const value = valueAtPath(config, path);
@@ -575,7 +804,7 @@ function storyDossier(input) {
     name: entry.name,
     exportName: entry.exportName,
     file: entry.file,
-    library: libraryOf(entry),
+    library: libraries.of(entry),
     ...entry.componentName === void 0 ? {} : { componentName: entry.componentName },
     ...entry.description === void 0 ? {} : { description: entry.description },
     ...entry.componentDescription === void 0 ? {} : { componentDescription: entry.componentDescription },
@@ -638,11 +867,13 @@ function StoryDossier({ dossier }) {
 }
 function StoryInfoDialog({ index, isReady, isOpen, onOpenChange }) {
   const { focusedTrialId, trials, instruments } = useLabContext();
+  const libraries = useContext(LibrariesContext);
   const trial = trials.find((record) => record.id === focusedTrialId);
   const entry = trial ? index.find((candidate) => candidate.id === trial.instrumentName) : void 0;
   if (!entry) return null;
   const dossier = storyDossier({
     entry,
+    libraries,
     instrument: instruments.find((candidate) => candidate.name === entry.id),
     config: trial?.config,
     ready: isReady(entry.id)
@@ -658,6 +889,7 @@ function StoryInfoDialog({ index, isReady, isOpen, onOpenChange }) {
     }
   );
 }
+var HELLO_TIMEOUT_MS = 3e4;
 function canMoveFrames() {
   return typeof Element !== "undefined" && "moveBefore" in Element.prototype;
 }
@@ -678,21 +910,30 @@ function createFramePool(frameUrl, size = 2) {
   shelf.setAttribute("aria-hidden", "true");
   document.body.append(shelf);
   const warm = [];
-  let loading = 0;
+  const waits = /* @__PURE__ */ new Set();
   let cancelRefill = null;
   let disposed = false;
   const load = () => {
-    loading += 1;
     const frame = document.createElement("iframe");
     frame.tabIndex = -1;
     frame.src = frameUrl;
+    const stop = () => {
+      window.removeEventListener("message", onMessage);
+      clearTimeout(timer);
+      waits.delete(stop);
+    };
     const onMessage = (event) => {
       if (event.source !== frame.contentWindow || event.origin !== location.origin) return;
       if (event.data?.type !== FRAME_HELLO) return;
-      window.removeEventListener("message", onMessage);
-      loading -= 1;
+      stop();
       warm.push(frame);
     };
+    const timer = setTimeout(() => {
+      stop();
+      frame.remove();
+      refill();
+    }, HELLO_TIMEOUT_MS);
+    waits.add(stop);
     window.addEventListener("message", onMessage);
     shelf.append(frame);
   };
@@ -700,7 +941,7 @@ function createFramePool(frameUrl, size = 2) {
     if (disposed || cancelRefill) return;
     cancelRefill = whenIdle(() => {
       cancelRefill = null;
-      while (!disposed && warm.length + loading < size) load();
+      while (!disposed && warm.length + waits.size < size) load();
     });
   };
   if (canMoveFrames()) refill();
@@ -714,6 +955,7 @@ function createFramePool(frameUrl, size = 2) {
     dispose() {
       disposed = true;
       cancelRefill?.();
+      for (const stop of [...waits]) stop();
       shelf.remove();
     }
   };
@@ -724,69 +966,6 @@ var FramePoolContext = createContext(null);
 function routedTrial(trials, focusedTrialId, route) {
   return trials.find((t) => t.id === focusedTrialId && t.instrumentName === route) ?? trials.find((t) => t.instrumentName === route);
 }
-function readRoute() {
-  return parseRoute(location.hash).story;
-}
-function readRouteParams() {
-  return { ...parseRoute(location.hash).params };
-}
-function replaceRouteParams(update) {
-  const { story, params } = parseRoute(location.hash);
-  if (story === null) return;
-  const next = formatRoute({ story, params: update({ ...params }) });
-  if (next !== location.hash) history.replaceState(history.state, "", next);
-}
-function readRouteEntry() {
-  const state = history.state;
-  const entry = state?.forgeRoute;
-  return typeof entry?.step === "number" ? entry : null;
-}
-function crossesInPlace(from, to) {
-  if (!from || !to || from.step === to.step) return false;
-  return to.step < from.step ? from.inPlace : to.inPlace;
-}
-function stamp(entry, hash) {
-  history.replaceState({ ...history.state ?? {}, forgeRoute: entry }, "", hash);
-}
-function setRoute(id, options = {}) {
-  if (readRoute() === id) {
-    history.replaceState(history.state, "", formatRoute({ story: id, params: readRouteParams() }));
-    return;
-  }
-  const hash = formatRoute({ story: id, params: {} });
-  const from = readRouteEntry() ?? { step: 0, inPlace: false };
-  stamp(from, location.hash);
-  location.hash = hash;
-  stamp({ step: from.step + 1, inPlace: options.inPlace ?? false }, hash);
-}
-function useRoute() {
-  const [route, setCurrent] = useState(readRoute);
-  useEffect(() => {
-    const sync = () => setCurrent(readRoute());
-    window.addEventListener("hashchange", sync);
-    sync();
-    return () => window.removeEventListener("hashchange", sync);
-  }, []);
-  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 PlayheadSync({ trialId, route, applied }) {
   const clock = useTrialClock(trialId);
   useEffect(() => {
@@ -938,6 +1117,7 @@ function KnobSync({ schema, config }) {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
   useEffect(() => {
+    if (reading.current && takeRouteFromTrial()) reading.current = false;
     if (reading.current) {
       reading.current = false;
       const knobs2 = paramsToKnobs(schema, readRouteParams());
@@ -987,18 +1167,6 @@ function revealTrial(trialId, root = document) {
   return true;
 }
 
-// src/shell/treeReveal.ts
-var listeners = /* @__PURE__ */ new Set();
-function revealInTree(path) {
-  for (const listener of listeners) listener(path);
-}
-function onRevealInTree(listener) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-
 // src/shell/tree/buildTree.ts
 function sortFolder(nodes) {
   const folders = nodes.filter((n) => n.kind === "folder");
@@ -1055,7 +1223,7 @@ function filterTree(nodes, query) {
 }
 
 // src/shell/tree/buildComponents.ts
-function buildComponents(index) {
+function buildComponents(index, libraries) {
   const byTitle = /* @__PURE__ */ new Map();
   const pages = new Map(indexEntries(index).map((page) => [page.title, page]));
   for (const entry of index) {
@@ -1065,7 +1233,7 @@ function buildComponents(index) {
       row = {
         path: entry.title,
         label: segments[segments.length - 1],
-        library: libraryOf(entry),
+        library: libraries.of(entry),
         index: pages.get(entry.title),
         entries: []
       };
@@ -1142,8 +1310,8 @@ function componentNodes(rows) {
   }
   return foldGalleries(root);
 }
-function librariesIn(index) {
-  return [...new Set(index.map(libraryOf))].sort((a, b) => a.localeCompare(b));
+function librariesIn(index, libraries) {
+  return [...new Set(index.map(libraries.of))].sort((a, b) => a.localeCompare(b));
 }
 var VIEWS = [
   { value: "tree", label: "Tree" },
@@ -1173,7 +1341,8 @@ function StoryTree({ ctx, index }) {
   const [hidden, setHidden] = usePersistedState("fg-tree-libraries", {}, { scope: "lab" });
   const [focusKey, setFocusKey] = useState(null);
   const items = useRef(/* @__PURE__ */ new Map());
-  const libraries = useMemo(() => librariesIn(index), [index]);
+  const table = useContext(LibrariesContext);
+  const libraries = useMemo(() => librariesIn(index, table), [index, table]);
   const views = useMemo(() => {
     const hasGallery = index.some(isGallery);
     const hasOther = index.some((entry) => !isGallery(entry));
@@ -1181,7 +1350,7 @@ function StoryTree({ ctx, index }) {
   }, [index]);
   const enabled = (value) => views.some((item) => item.value === value && !item.disabled);
   const view = [chosen, "components", "gallery"].find(enabled) ?? chosen;
-  const kept = useMemo(() => index.filter((entry) => !hidden[libraryOf(entry)]), [index, hidden]);
+  const kept = useMemo(() => index.filter((entry) => !hidden[table.of(entry)]), [index, hidden, table]);
   const [galleryEntries, rest] = useMemo(() => {
     const yes = [];
     const no = [];
@@ -1189,8 +1358,8 @@ function StoryTree({ ctx, index }) {
     return [yes, no];
   }, [kept]);
   const tree = useMemo(() => buildTree(rest), [rest]);
-  const components = useMemo(() => buildComponents(rest), [rest]);
-  const galleries = useMemo(() => buildComponents(galleryEntries), [galleryEntries]);
+  const components = useMemo(() => buildComponents(rest, table), [rest, table]);
+  const galleries = useMemo(() => buildComponents(galleryEntries, table), [galleryEntries, table]);
   const shown = useMemo(
     () => view === "tree" ? filterTree(tree, query) : componentNodes(filterComponents(view === "gallery" ? galleries : components, query)),
     [view, components, galleries, tree, query]
@@ -1221,8 +1390,11 @@ function StoryTree({ ctx, index }) {
   const activate = (entry, another) => {
     const focused = ctx.trials.find((trial) => trial.id === ctx.focusedTrialId);
     if (another || !focused) ctx.addTrial(entry.id);
-    else if (focused.instrumentName === entry.id) revealTrial(focused.id);
-    else {
+    else if (focused.instrumentName === entry.id) {
+      revealTrial(focused.id);
+      setRoute2(entry.id, { fromTrial: true });
+      return;
+    } else {
       ctx.swapTrial(focused.id, entry.id);
       setRoute2(entry.id, { inPlace: true });
       return;
@@ -1487,156 +1659,20 @@ function createAnswerBook() {
     }
   };
 }
-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",
-        density: "slim",
-        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;
-}
-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,
-      ...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 });
-  };
-  return /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render });
-}
-function withPlayhead(schema) {
-  return f.schema({ ...schema.nodes, [PLAYHEAD_KEY]: f.custom("forge-playhead", null).hidden() });
-}
-function documentInstrument(options) {
-  const { entry, loaded, setup, globals = {} } = 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 initialState = loaded.kind === "story" ? loaded.story.initialState : null;
-  return {
-    name: entry.id,
-    ...crumbTitle(entry),
-    config,
-    defaultConfig: () => config.defaults(),
-    initialState: (c) => initialState?.(c) ?? null,
-    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
-    ...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 }) }] } : {}
-  };
-}
-function StoryLoad({ entry, load, fault }) {
-  useEffect(() => {
-    if (!fault) load(entry);
-  }, [entry, load, fault]);
-  return /* @__PURE__ */ jsx("div", { className: "fg-story fg-story--loading", "data-fg-layout": "fullscreen", children: fault ? /* @__PURE__ */ jsxs("div", { className: "fg-fault", role: "alert", children: [
-    /* @__PURE__ */ jsx("span", { className: "fg-fault__phase", children: "import" }),
-    /* @__PURE__ */ jsx("p", { className: "fg-fault__message", children: fault.message })
-  ] }) : null });
-}
-function pendingInstrument(options) {
-  const { entry, globals = {} } = options;
-  const config = withGlobals(f.schema({}), globals);
-  return {
-    name: entry.id,
-    ...crumbTitle(entry),
-    config,
-    defaultConfig: () => config.defaults(),
-    initialState: () => null,
-    render: () => /* @__PURE__ */ jsx(StoryLoad, { ...options }, options.generation ?? 0)
-  };
-}
 
 // src/shell/readyKey.ts
 var readyKey = (ready) => stableStringify({ schema: ready.schema, layout: ready.layout, viewport: ready.viewport });
 var START_TIMEOUT_MS = 1e4;
-var HELLO_TIMEOUT_MS = 3e4;
 var requests = 0;
 function closeLink(link) {
   if (!link.current) return;
   clearTimeout(link.current.timer);
-  for (const settle2 of link.current.pending.values()) settle2.gone();
+  for (const settle of link.current.pending.values()) settle({ ok: false, message: "The frame went away" });
   link.current.pending.clear();
   link.current.disconnect();
   link.current.channel.close();
   link.current = null;
 }
-function settle(link, id, value) {
-  link.pending.get(id)?.resolve?.(value);
-  link.pending.delete(id);
-}
 function mismatchMessage(mismatch) {
   return mismatch.reason === "version" ? `Frame speaks protocol ${String(mismatch.version)}; this workshop speaks ${PROTOCOL_VERSION}` : "Frame sent a message that is not a forge envelope";
 }
@@ -1700,20 +1736,13 @@ function FrameView(props) {
       case "vars":
         if (trialId) frames?.report(trialId, msg.vars);
         break;
-      case "size":
-        if (trialId) frames?.reportSize(trialId, { width: msg.width, height: msg.height });
-        break;
       case "a11y": {
         const outcome = msg.ok ? { ok: true, report: msg.report } : { ok: false, message: msg.message };
         if (trialId) frames?.reportA11y(trialId, outcome);
-        settle(current, msg.id, outcome);
-        break;
-      }
-      case "capture":
-        if (msg.ok) settle(current, msg.id, msg.picture);
-        else current.pending.get(msg.id)?.fail(new Error(msg.message));
+        current.pending.get(msg.id)?.(outcome);
         current.pending.delete(msg.id);
         break;
+      }
       case "open": {
         const { lab: liveLab } = latest.current;
         if (!trialId || !liveLab.instruments.some((instrument) => instrument.name === msg.id)) break;
@@ -1742,33 +1771,14 @@ function FrameView(props) {
       }
     });
     const waiting = /* @__PURE__ */ new Map();
-    const request = (id, msg, gone) => new Promise((resolve, reject) => {
-      waiting.set(id, {
-        resolve,
-        fail: reject,
-        gone: () => gone(resolve, reject)
-      });
-      const ask = () => channel.send(msg);
+    const audit = () => new Promise((resolve) => {
+      const id = `a11y-${requests += 1}`;
+      waiting.set(id, resolve);
+      const ask = () => channel.send({ type: "a11y.run", id });
       if (current.hasRendered) ask();
       else current.queued.push(ask);
     });
-    const audit = () => {
-      const id = `a11y-${requests += 1}`;
-      return request(
-        id,
-        { type: "a11y.run", id },
-        (resolve) => resolve({ ok: false, message: "The frame went away" })
-      );
-    };
-    const capture = () => {
-      const id = `capture-${requests += 1}`;
-      return request(
-        id,
-        { type: "capture.run", id },
-        (_resolve, fail) => fail(new Error("The frame could not draw itself"))
-      );
-    };
-    const disconnect = frames && trialId ? frames.connect(trialId, { send: channel.send, audit, capture }) : () => {
+    const disconnect = frames && trialId ? frames.connect(trialId, { send: channel.send, audit }) : () => {
     };
     const current = {
       channel,
@@ -1861,23 +1871,13 @@ function FrameView(props) {
     }
     if (input) setFault((shown) => shown?.phase === "render" ? null : shown);
   }, [ctx.config, ctx.state, globals, descriptionKey, init]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: (el) => {
-        hostRef.current = el;
-        if (trialId && frames) frames.hostRef(trialId).current = el;
-      },
-      className: "fg-frame-host",
-      children: [
-        /* @__PURE__ */ jsx("div", { ref: slotRef, className: "fg-frame-slot" }),
-        fault ? /* @__PURE__ */ jsxs("div", { className: "fg-fault", role: "alert", children: [
-          fault.phase ? /* @__PURE__ */ jsx("span", { className: "fg-fault__phase", children: fault.phase }) : null,
-          /* @__PURE__ */ jsx("p", { className: "fg-fault__message", children: fault.message })
-        ] }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "fg-frame-host", children: [
+    /* @__PURE__ */ jsx("div", { ref: slotRef, className: "fg-frame-slot" }),
+    fault ? /* @__PURE__ */ jsxs("div", { className: "fg-fault", role: "alert", children: [
+      fault.phase ? /* @__PURE__ */ jsx("span", { className: "fg-fault__phase", children: fault.phase }) : null,
+      /* @__PURE__ */ jsx("p", { className: "fg-fault__message", children: fault.message })
+    ] }) : null
+  ] });
 }
 function storyInstrument(options) {
   const { entry, ready, answers, frameUrl, onReady, globals = {} } = options;
@@ -1915,7 +1915,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, load = loadStories } = options;
+  const { frameUrl, globals = NO_GLOBALS2, importers, setup = NO_SETUP, libraries = TITLE_LIBRARIES, load = loadStories } = options;
   const [readies, setReadies] = useState(() => /* @__PURE__ */ new Map());
   const [loaded, setLoaded] = useState(() => /* @__PURE__ */ new Map());
   const [faults, setFaults] = useState(() => /* @__PURE__ */ new Map());
@@ -1939,11 +1939,13 @@ function useStoryRegistry(index, options) {
     setRevisions((prev) => pruned(prev, ids));
   }
   const imports = useRef(/* @__PURE__ */ new Map());
-  const live = useLatest({ index, importers, setup, load });
+  const live = useLatest({ index, importers, setup, load, libraries });
+  const missing = useRef(/* @__PURE__ */ new Set());
   const importOf = useCallback((file) => {
     let loading = imports.current.get(file);
     if (!loading) {
       const importer = live.current.importers?.[file];
+      if (!importer) missing.current.add(file);
       loading = importer ? importer() : Promise.reject(new Error(`No importer for ${file}`));
       imports.current.set(file, loading);
     }
@@ -1952,7 +1954,7 @@ function useStoryRegistry(index, options) {
   const request = useCallback(
     (entry) => {
       const { setup: current, load: loadModule } = live.current;
-      const settle2 = (ids2, result) => {
+      const settle = (ids2, result) => {
         setLoaded((prev) => {
           const next = new Map(prev);
           for (const [id, value] of result) next.set(id, value);
@@ -1982,7 +1984,7 @@ function useStoryRegistry(index, options) {
             kind: "index",
             bundle: {
               title: entry.title,
-              library: libraryOf(entry),
+              library: live.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),
@@ -1991,7 +1993,7 @@ function useStoryRegistry(index, options) {
               render: mods.map(indexRenderOf).find((render) => render !== null) ?? null
             }
           });
-          settle2([entry.id], result);
+          settle([entry.id], result);
         }).catch((error) => fail([entry.id], error));
         return;
       }
@@ -2007,7 +2009,7 @@ function useStoryRegistry(index, options) {
           result.set(sibling.id, { kind: "story", story });
         }
         if (!result.has(entry.id)) throw new Error(`${entry.file} has no story export "${entry.exportName}"`);
-        settle2(ids, result);
+        settle(ids, result);
       }).catch((error) => fail(ids, error));
     },
     [importOf, live]
@@ -2023,6 +2025,13 @@ function useStoryRegistry(index, options) {
     },
     [live]
   );
+  useEffect(() => {
+    for (const file of [...missing.current]) {
+      if (!importers?.[file]) continue;
+      missing.current.delete(file);
+      reload(file);
+    }
+  }, [importers, reload]);
   const committed = useRef({ built: /* @__PURE__ */ new Map(), books: /* @__PURE__ */ new Map(), list: [] });
   const cache = useMemo(() => {
     const previous = committed.current;
@@ -2073,12 +2082,7 @@ function useStoryRegistry(index, options) {
   return { instruments: cache.list, isReady, onReady, reload };
 }
 var NO_DECLARATIONS = {};
-var DEFAULT_TITLE = "weaselforge";
-function initialStory(entries, fallback) {
-  const route = readRoute();
-  return route !== null && entries.some((entry) => entry.id === route) ? route : fallback;
-}
-function RouteOpener({ index }) {
+function RouteOpener() {
   const lab = useLabContext();
   const [route] = useRoute();
   const handled = useRef(null);
@@ -2086,14 +2090,14 @@ function RouteOpener({ index }) {
   useEffect(() => {
     const from = last.current;
     if (route !== from.route) last.current = { route, entry: readRouteEntry() };
-    if (route === null || handled.current === route || !index.some((e) => e.id === route)) return;
+    if (route === null || handled.current === route || !lab.instruments.some((i) => i.name === route)) return;
     handled.current = route;
     if (lab.trials.some((trial) => trial.instrumentName === route)) return;
     const previous = lab.trials.find((trial) => trial.instrumentName === from.route);
     const target = (previous && crossesInPlace(from.entry, last.current.entry) ? previous : void 0) ?? lab.trials.find((trial) => trial.id === lab.focusedTrialId) ?? lab.trials[0];
     if (target) lab.swapTrial(target.id, route);
     else lab.addTrial(route);
-  }, [route, index, lab]);
+  }, [route, lab]);
   return null;
 }
 function useInfoShortcut(open) {
@@ -2130,12 +2134,21 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
     };
   }, [frameUrl, framed]);
   const entries = useMemo(() => [...index, ...indexEntries(index)], [index]);
+  const table = config?.libraries;
+  const libraries = useMemo(() => librariesFrom(table), [table]);
   const registry = useStoryRegistry(entries, {
     frameUrl,
     globals: declarations,
+    libraries,
     ...importers ? { importers } : {},
     ...setup ? { setup } : {}
   });
+  const [route] = useRoute();
+  const missing = route !== null && !entries.some((entry) => entry.id === route) ? route : null;
+  const instruments = useMemo(
+    () => missing === null ? registry.instruments : [...registry.instruments, missingInstrument(missing, declarations)],
+    [registry.instruments, missing, declarations]
+  );
   const reload = registry.reload;
   useEffect(() => changes?.subscribe(reload), [changes, reload]);
   const [labValues, setLabValues] = useState(() => labGlobals(declarations, void 0));
@@ -2147,20 +2160,20 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
     (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
     []
   );
+  const infoCommand = useMemo(
+    () => ({ icon: InfoIcon, label: "Info", shortcut: "\u2318I", onActivate: () => setInfoOpen(true) }),
+    []
+  );
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
-      {
-        id: "fg-info",
-        region: "palette",
-        item: { icon: InfoIcon, label: "Info", shortcut: "\u2318I", onActivate: () => setInfoOpen(true) }
-      },
+      { id: "fg-info", region: "palette", item: infoCommand },
       ...config?.cssVars === false ? [] : [CSS_VARS_SECTION],
       A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       ...config?.labChrome ?? []
     ],
-    [index, declarations, config?.cssVars, config?.labChrome]
+    [index, infoCommand, declarations, config?.cssVars, config?.labChrome]
   );
   const first = index[0];
   if (!first) {
@@ -2169,14 +2182,14 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       stories.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "fg-empty__globs", "aria-label": "Story globs", children: stories.map((glob) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: glob }) }, glob)) }) : null
     ] });
   }
-  return /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(LibrariesContext.Provider, { value: libraries, children: /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsxs(
     Lab,
     {
       title,
       density: "roomy",
       ...labTheme ? { theme: labTheme } : {},
-      instruments: registry.instruments,
-      defaultInstrument: initialStory(entries, first.id),
+      instruments,
+      defaultInstrument: readRoute() ?? first.id,
       storageKey: storageKey ?? "weaselforge",
       ...storage ? { storage } : {},
       labChrome,
@@ -2185,7 +2198,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       ...config?.pages ? { pages: config.pages } : {},
       ...config?.path !== void 0 ? { path: config.path } : {},
       children: [
-        /* @__PURE__ */ jsx(RouteOpener, { index: entries }),
+        /* @__PURE__ */ jsx(RouteOpener, {}),
         /* @__PURE__ */ jsx(RouteKnobs, { instruments: registry.instruments, isReady: registry.isReady }),
         /* @__PURE__ */ jsx(RoutePlayhead, {}),
         /* @__PURE__ */ jsx(
@@ -2200,7 +2213,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
         /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
       ]
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 function mountWorkshop({ container, ...props }) {
   const target = container ?? document.getElementById("root");