@weasel-js/forge 1.6.1 → 1.7.1

package/dist/shell/index.js

@@ -1,18 +1,21 @@
-import { isIndexId, indexId, indexEntries, schemaFromDescription, openChannel, IndexPage } from '../chunk-CSAXZIMV.js';
-import { useTrialFrame, createTrialFrames, labGlobals, StoryGlobalsContext, TrialFramesContext, withGlobals, StoryTrial, storyConfig, GLOBALS_KEY, effectiveGlobals, useCssOverrides, TrialHost, shownOptions, isGlobalsPath } from '../chunk-DIOLWCH7.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-DIOLWCH7.js';
-import { loadStories, indexRenderOf } from '../chunk-OLWZURU3.js';
-import '../chunk-2GXKNXTJ.js';
+import { isIndexId, indexId, libraryOf, indexEntries, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-KIFCYY4F.js';
+import { isGallery } from '../chunk-WEQSLPKT.js';
+import { useTrialFrame, createTrialFrames, StoryGlobalsContext, TrialFramesContext, StoryTrial, useCssOverrides, TrialHost } from '../chunk-SEK6EKHO.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-SEK6EKHO.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, labOptions, isGlobalsPath } from '../chunk-JNJGIUYU.js';
+import { loadStories, indexRenderOf } from '../chunk-NYBMOSSR.js';
+import '../chunk-Y3WZ2EWR.js';
 import '../chunk-HRGPFQBW.js';
-import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-JXIWZFD4.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-YKN3IAEX.js';
 import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useId, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
-import { InfoIcon, ToggleBar, Checkbox, Dialog, Badge, DisclosureMark, Button as Button$1, TuneIcon, Callout } from '@weasel-js/ui';
+import { InfoIcon, ToggleBar, Checkbox, Dialog, DisclosureMark, Button as Button$1, TuneIcon, Callout } 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 }) {
   return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
@@ -105,6 +108,7 @@ function createStoryChanges() {
     }
   };
 }
+var DependenciesContext = createContext(null);
 var SEED_REF = /^\{seeds\.([^}]+)\}$/;
 var RULE_KEYS = { factors: "factors", ratio: "ratio", step: "step" };
 function selectionFor(axes, globals) {
@@ -445,113 +449,6 @@ function breadcrumb(title, name) {
   const segments = [...title.split("/"), name].filter((segment, i) => i === 0 || segment.toLowerCase() !== "index");
   return segments.join(" > ");
 }
-
-// src/shell/tree/buildComponents.ts
-var LIBRARIES = [
-  ["/packages/ui/", "ui"],
-  ["/packages/labkit/", "labkit"],
-  ["/packages/forge/", "forge"],
-  ["/apps/draw/", "draw"],
-  ["/apps/forge/", "forge"]
-];
-function libraryOf(entry) {
-  const file = entry.file.replaceAll("\\", "/");
-  for (const [marker, label] of LIBRARIES) {
-    if (file.includes(marker)) return label;
-  }
-  return entry.title.split("/")[0];
-}
-function buildComponents(index) {
-  const byTitle = /* @__PURE__ */ new Map();
-  for (const entry of index) {
-    let row = byTitle.get(entry.title);
-    if (!row) {
-      const segments = entry.title.split("/");
-      row = {
-        path: entry.title,
-        label: segments[segments.length - 1],
-        library: libraryOf(entry),
-        index: indexEntries([entry])[0],
-        entries: []
-      };
-      byTitle.set(entry.title, row);
-    }
-    row.entries.push(entry);
-  }
-  const rows = [...byTitle.values()];
-  disambiguate(rows);
-  return rows.sort(
-    (a, b) => a.label.localeCompare(b.label) || a.library.localeCompare(b.library) || a.path.localeCompare(b.path)
-  );
-}
-function disambiguate(rows) {
-  const byLabel = /* @__PURE__ */ new Map();
-  for (const row of rows) {
-    const key = `${row.library}\0${row.label}`;
-    const group = byLabel.get(key);
-    if (group) group.push(row);
-    else byLabel.set(key, [row]);
-  }
-  for (const group of byLabel.values()) {
-    if (group.length < 2) continue;
-    for (const row of group) {
-      const segments = row.path.split("/");
-      for (let take = 2; take <= segments.length; take++) {
-        row.label = segments.slice(-take).join("/");
-        if (group.every((other) => other === row || !other.path.endsWith(`/${row.label}`))) break;
-      }
-    }
-  }
-}
-function filterComponents(rows, query) {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return [...rows];
-  const out = [];
-  for (const row of rows) {
-    if (`${row.path}/${row.library}`.toLowerCase().includes(needle)) {
-      out.push(row);
-      continue;
-    }
-    const entries = row.entries.filter((entry) => entry.name.toLowerCase().includes(needle));
-    if (entries.length > 0) out.push({ path: row.path, label: row.label, library: row.library, entries });
-  }
-  return out;
-}
-function componentNodes(rows) {
-  const root = [];
-  const folders = /* @__PURE__ */ new Map();
-  for (const row of rows) {
-    const labels = row.label.split("/");
-    const title = row.path.split("/");
-    let siblings = root;
-    let tag = row.library;
-    for (let i = 0; i < labels.length - 1; i++) {
-      const path = title.slice(0, title.length - labels.length + i + 1).join("/");
-      let folder = folders.get(path);
-      if (!folder) {
-        folder = { kind: "folder", label: labels[i], path, tag, children: [] };
-        folders.set(path, folder);
-        siblings.push(folder);
-      }
-      siblings = folder.children;
-      tag = void 0;
-    }
-    siblings.push({
-      kind: "folder",
-      label: labels[labels.length - 1],
-      path: row.path,
-      tag,
-      ...row.index ? { index: row.index } : {},
-      children: row.entries.map((entry) => ({ kind: "story", entry }))
-    });
-  }
-  return root;
-}
-function librariesIn(index) {
-  return [...new Set(index.map(libraryOf))].sort((a, b) => a.localeCompare(b));
-}
-
-// src/shell/info/dossier.ts
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
   const out = [];
@@ -745,20 +642,21 @@ function GlobalSelect({ name, declaration, values, set, labeled = false }) {
       width: labeled ? "fill" : "fit",
       selectedKey: String(values[name]),
       onSelectionChange: (value) => set(name, value),
-      options: shownOptions(declaration, values)
+      options: labOptions(declaration, values)
     }
   );
 }
 function GlobalsToolbar({ declarations }) {
   const [values, set] = useLabGlobals(declarations);
   const entries = Object.entries(declarations);
-  return /* @__PURE__ */ jsx("div", { className: "fg-globals", role: "toolbar", "aria-label": "Globals", children: entries.filter(([, declaration]) => declaration.under === void 0).map(([key, declaration]) => {
-    const nested = entries.filter(([, other]) => other.under === key);
-    return /* @__PURE__ */ jsxs("div", { className: "fg-globals__item", children: [
-      /* @__PURE__ */ jsx(GlobalSelect, { name: key, declaration, values, set }),
-      nested.length > 0 ? /* @__PURE__ */ jsx(NestedGlobals, { label: declaration.label, nested, values, set }) : null
-    ] }, key);
-  }) });
+  const top = entries.filter(([, declaration]) => declaration.under === void 0);
+  return /* @__PURE__ */ jsxs("div", { className: "fg-globals", role: "toolbar", "aria-label": "Globals", children: [
+    top.map(([key, declaration]) => /* @__PURE__ */ jsx("div", { className: "fg-globals__item", children: /* @__PURE__ */ jsx(GlobalSelect, { name: key, declaration, values, set }) }, key)),
+    top.map(([key, declaration]) => {
+      const nested = entries.filter(([, other]) => other.under === key);
+      return nested.length > 0 ? /* @__PURE__ */ jsx(NestedGlobals, { label: declaration.label, nested, values, set }, key) : null;
+    })
+  ] });
 }
 function NestedGlobals({
   label,
@@ -802,7 +700,9 @@ function LabGlobals({
   onChange
 }) {
   const [values] = useLabGlobals(declarations);
-  useEffect(() => onChange(values), [values, onChange]);
+  const { mode } = useLabContext();
+  const resolved = useMemo(() => followApp(declarations, values, { mode }), [declarations, values, mode]);
+  useEffect(() => onChange(resolved), [resolved, onChange]);
   return null;
 }
 
@@ -872,6 +772,17 @@ function sortFolder(nodes) {
   for (const folder of folders) folder.children = sortFolder(folder.children);
   return [...folders, ...nodes.filter((n) => n.kind === "story")];
 }
+function foldGalleries(nodes) {
+  return nodes.map((node) => {
+    if (node.kind !== "folder") return node;
+    const children = foldGalleries(node.children);
+    const [only] = children;
+    if (!node.index && children.length === 1 && only?.kind === "folder" && only.path === `${node.path}/${only.label}` && only.index && isGallery(only.index)) {
+      return { ...only, label: node.label, tag: node.tag ?? only.tag };
+    }
+    return { ...node, children };
+  });
+}
 function buildTree(index) {
   const root = [];
   const folders = /* @__PURE__ */ new Map();
@@ -908,9 +819,102 @@ function filterTree(nodes, query) {
   });
   return walk(nodes);
 }
+
+// src/shell/tree/buildComponents.ts
+function buildComponents(index) {
+  const byTitle = /* @__PURE__ */ new Map();
+  const pages = new Map(indexEntries(index).map((page) => [page.title, page]));
+  for (const entry of index) {
+    let row = byTitle.get(entry.title);
+    if (!row) {
+      const segments = entry.title.split("/");
+      row = {
+        path: entry.title,
+        label: segments[segments.length - 1],
+        library: libraryOf(entry),
+        index: pages.get(entry.title),
+        entries: []
+      };
+      byTitle.set(entry.title, row);
+    }
+    row.entries.push(entry);
+  }
+  const rows = [...byTitle.values()];
+  disambiguate(rows);
+  return rows.sort(
+    (a, b) => a.label.localeCompare(b.label) || a.library.localeCompare(b.library) || a.path.localeCompare(b.path)
+  );
+}
+function disambiguate(rows) {
+  const byLabel = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const key = `${row.library}\0${row.label}`;
+    const group = byLabel.get(key);
+    if (group) group.push(row);
+    else byLabel.set(key, [row]);
+  }
+  for (const group of byLabel.values()) {
+    if (group.length < 2) continue;
+    for (const row of group) {
+      const segments = row.path.split("/");
+      for (let take = 2; take <= segments.length; take++) {
+        row.label = segments.slice(-take).join("/");
+        if (group.every((other) => other === row || !other.path.endsWith(`/${row.label}`))) break;
+      }
+    }
+  }
+}
+function filterComponents(rows, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [...rows];
+  const out = [];
+  for (const row of rows) {
+    if (`${row.path}/${row.library}`.toLowerCase().includes(needle)) {
+      out.push(row);
+      continue;
+    }
+    const entries = row.entries.filter((entry) => entry.name.toLowerCase().includes(needle));
+    if (entries.length > 0) out.push({ path: row.path, label: row.label, library: row.library, entries });
+  }
+  return out;
+}
+function componentNodes(rows) {
+  const root = [];
+  const folders = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const labels = row.label.split("/");
+    const title = row.path.split("/");
+    let siblings = root;
+    let tag = row.library;
+    for (let i = 0; i < labels.length - 1; i++) {
+      const path = title.slice(0, title.length - labels.length + i + 1).join("/");
+      let folder = folders.get(path);
+      if (!folder) {
+        folder = { kind: "folder", label: labels[i], path, tag, children: [] };
+        folders.set(path, folder);
+        siblings.push(folder);
+      }
+      siblings = folder.children;
+      tag = void 0;
+    }
+    siblings.push({
+      kind: "folder",
+      label: labels[labels.length - 1],
+      path: row.path,
+      tag,
+      ...row.index ? { index: row.index } : {},
+      children: row.entries.map((entry) => ({ kind: "story", entry }))
+    });
+  }
+  return foldGalleries(root);
+}
+function librariesIn(index) {
+  return [...new Set(index.map(libraryOf))].sort((a, b) => a.localeCompare(b));
+}
 var VIEWS = [
   { value: "tree", label: "Tree" },
-  { value: "components", label: "Components" }
+  { value: "components", label: "Components" },
+  { value: "gallery", label: "Gallery" }
 ];
 var keyOf = (node) => node.kind === "folder" ? `folder:${node.path}` : `story:${node.entry.id}`;
 function ancestorsOf(entry) {
@@ -923,14 +927,8 @@ function ancestorsOf(entry) {
   }
   return paths;
 }
-var LIBRARY_TONES = {
-  ui: "color-mix(in oklab, var(--wzl-swatch-blue), var(--wzl-fg) 35%)",
-  labkit: "color-mix(in oklab, var(--wzl-swatch-teal), var(--wzl-fg) 45%)",
-  forge: "color-mix(in oklab, var(--wzl-swatch-amber), var(--wzl-fg) 40%)",
-  draw: "color-mix(in oklab, var(--wzl-swatch-rose), var(--wzl-fg) 35%)"
-};
-function LibraryBadge({ library }) {
-  return /* @__PURE__ */ jsx(Badge, { status: "muted", tone: LIBRARY_TONES[library], variant: "subtle", size: "sm", className: "fg-tree__tag", children: library });
+function LibraryBadge2({ library }) {
+  return /* @__PURE__ */ jsx(LibraryBadge, { library, className: "fg-tree__tag" });
 }
 function StoryTree({ ctx, index }) {
   const headingId = useId();
@@ -943,11 +941,18 @@ function StoryTree({ ctx, index }) {
   const items = useRef(/* @__PURE__ */ new Map());
   const libraries = useMemo(() => librariesIn(index), [index]);
   const kept = useMemo(() => index.filter((entry) => !hidden[libraryOf(entry)]), [index, hidden]);
-  const tree = useMemo(() => buildTree(kept), [kept]);
-  const components = useMemo(() => buildComponents(kept), [kept]);
+  const [galleryEntries, rest] = useMemo(() => {
+    const yes = [];
+    const no = [];
+    for (const entry of kept) (isGallery(entry) ? yes : no).push(entry);
+    return [yes, no];
+  }, [kept]);
+  const tree = useMemo(() => buildTree(rest), [rest]);
+  const components = useMemo(() => buildComponents(rest), [rest]);
+  const galleries = useMemo(() => buildComponents(galleryEntries), [galleryEntries]);
   const shown = useMemo(
-    () => view === "components" ? componentNodes(filterComponents(components, query)) : filterTree(tree, query),
-    [view, components, tree, query]
+    () => view === "tree" ? filterTree(tree, query) : componentNodes(filterComponents(view === "gallery" ? galleries : components, query)),
+    [view, components, galleries, tree, query]
   );
   const routable = useMemo(() => [...kept, ...indexEntries(kept)], [kept]);
   const routed = routable.find((entry) => entry.id === route);
@@ -989,7 +994,7 @@ function StoryTree({ ctx, index }) {
       return;
     }
     if (folds[node.path] === false) {
-      setFolds(({ [node.path]: _dropped, ...rest }) => rest);
+      setFolds(({ [node.path]: _dropped, ...rest2 }) => rest2);
     }
     activate(node.index, another);
   };
@@ -1080,7 +1085,7 @@ function StoryTree({ ctx, index }) {
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label }),
-                  node.tag ? /* @__PURE__ */ jsx(LibraryBadge, { library: node.tag }) : null
+                  node.tag ? /* @__PURE__ */ jsx(LibraryBadge2, { library: node.tag }) : null
                 ]
               }
             ),
@@ -1106,7 +1111,7 @@ function StoryTree({ ctx, index }) {
         },
         children: [
           /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label ?? entry.name }),
-          node.tag ? /* @__PURE__ */ jsx(LibraryBadge, { library: node.tag }) : null
+          node.tag ? /* @__PURE__ */ jsx(LibraryBadge2, { library: node.tag }) : null
         ]
       },
       keyOf(node)
@@ -1137,7 +1142,7 @@ function StoryTree({ ctx, index }) {
         {
           isSelected: !hidden[library],
           onChange: (on) => setHidden((prev) => ({ ...prev, [library]: !on })),
-          children: /* @__PURE__ */ jsx(LibraryBadge, { library })
+          children: /* @__PURE__ */ jsx(LibraryBadge2, { library })
         },
         library
       ))
@@ -1202,6 +1207,9 @@ function createAnswerBook() {
 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);
@@ -1210,9 +1218,13 @@ function IndexTrial({ bundle, setup, config }) {
   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,
@@ -1223,26 +1235,8 @@ function IndexTrial({ bundle, setup, config }) {
   };
   return /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render });
 }
-function annotationsOn(frames) {
-  return {
-    targets: (_state, _config, trial) => {
-      const ref = frames.hostRef(trial.id);
-      const frame = frames.get(trial.id);
-      const box = frame.size ?? { width: ref.current?.clientWidth ?? 0, height: ref.current?.clientHeight ?? 0 };
-      const capture = frame.capture;
-      return [
-        {
-          id: "story",
-          ref,
-          content: { w: Math.max(1, box.width), h: Math.max(1, box.height) },
-          ...capture ? { base: () => capture() } : {}
-        }
-      ];
-    }
-  };
-}
 function documentInstrument(options) {
-  const { entry, loaded, setup, globals = {}, frames } = options;
+  const { entry, loaded, setup, globals = {} } = options;
   const schema = loaded.kind === "story" ? loaded.story.config : f.schema({});
   const config = withGlobals(schema, globals);
   const initialState = loaded.kind === "story" ? loaded.story.initialState : null;
@@ -1253,7 +1247,6 @@ function documentInstrument(options) {
     defaultConfig: () => config.defaults(),
     initialState: (c) => initialState?.(c) ?? null,
     render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
-    ...frames ? { annotations: annotationsOn(frames) } : {},
     ...loaded.kind === "story" && loaded.story.viewport ? { stage: { size: { width: loaded.story.viewport.width, height: loaded.story.viewport.height } } } : {}
   };
 }
@@ -1335,17 +1328,16 @@ function FrameView(props) {
   const slotRef = useRef(null);
   const inView = useInView(hostRef);
   const link = useRef(null);
-  const latest = useRef({ ...props, globals, overrides, pool, lab, title });
-  latest.current = { ...props, globals, overrides, pool, lab, title };
+  const latest = useLatest({ ...props, globals, overrides, pool, lab, title });
   const [fault, setFault] = useState(null);
   const [pending, setPending] = useState(true);
-  const init = (current) => {
+  const init = useCallback((current) => {
     const { ctx: live, globals: liveGlobals } = latest.current;
     current.awaiting = null;
     current.sent = { config: storyConfig(live.config), state: live.state, globals: liveGlobals };
     current.inputs += 1;
     current.channel.send({ type: "init", ...current.sent });
-  };
+  }, [latest]);
   const receive = (current, msg) => {
     const { ctx: live, answers: answers2, onReady } = latest.current;
     switch (msg.type) {
@@ -1466,8 +1458,7 @@ function FrameView(props) {
       port2
     ]);
   };
-  const connectRef = useRef(connect);
-  connectRef.current = connect;
+  const connectRef = useLatest(connect);
   useEffect(() => {
     const slot = slotRef.current;
     if (!inView || !slot) return;
@@ -1502,7 +1493,7 @@ function FrameView(props) {
       setPending(true);
       setFault(null);
     };
-  }, [inView, src]);
+  }, [inView, src, connectRef, latest]);
   useEffect(() => {
     iframeRef.current?.toggleAttribute("data-pending", pending && !fault);
   }, [pending, fault, inView, src]);
@@ -1540,7 +1531,7 @@ function FrameView(props) {
       input = true;
     }
     if (input) setFault((shown) => shown?.phase === "render" ? null : shown);
-  }, [ctx.config, ctx.state, globals, descriptionKey]);
+  }, [ctx.config, ctx.state, globals, descriptionKey, init]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1559,26 +1550,8 @@ function FrameView(props) {
     }
   );
 }
-function annotationsOn2(frames) {
-  return {
-    targets: (_state, _config, trial) => {
-      const ref = frames.hostRef(trial.id);
-      const frame = frames.get(trial.id);
-      const box = frame.size ?? { width: ref.current?.clientWidth ?? 0, height: ref.current?.clientHeight ?? 0 };
-      const capture = frame.capture;
-      return [
-        {
-          id: "story",
-          ref,
-          content: { w: Math.max(1, box.width), h: Math.max(1, box.height) },
-          ...capture ? { base: () => capture() } : {}
-        }
-      ];
-    }
-  };
-}
 function storyInstrument(options) {
-  const { entry, ready, answers, frameUrl, onReady, globals = {}, frames } = options;
+  const { entry, ready, answers, frameUrl, onReady, globals = {} } = options;
   const config = withGlobals(
     ready ? schemaFromDescription(ready.schema, answers) : f.schema({}),
     globals
@@ -1601,7 +1574,6 @@ function storyInstrument(options) {
         ctx
       }
     ),
-    ...frames ? { annotations: annotationsOn2(frames) } : {},
     ...ready?.viewport ? { stage: { size: { width: ready.viewport.width, height: ready.viewport.height } } } : {}
   };
 }
@@ -1612,7 +1584,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, frames, importers, setup = NO_SETUP, load = loadStories } = options;
+  const { frameUrl, globals = NO_GLOBALS2, importers, setup = NO_SETUP, load = loadStories } = options;
   const [readies, setReadies] = useState(() => /* @__PURE__ */ new Map());
   const [loaded, setLoaded] = useState(() => /* @__PURE__ */ new Map());
   const [faults, setFaults] = useState(() => /* @__PURE__ */ new Map());
@@ -1633,8 +1605,7 @@ function useStoryRegistry(index, options) {
     setRevisions((prev) => pruned(prev, ids));
   }, [index]);
   const imports = useRef(/* @__PURE__ */ new Map());
-  const live = useRef({ index, importers, setup, load });
-  live.current = { index, importers, setup, load };
+  const live = useLatest({ index, importers, setup, load });
   const importOf = useCallback((file) => {
     let loading = imports.current.get(file);
     if (!loading) {
@@ -1643,7 +1614,7 @@ function useStoryRegistry(index, options) {
       imports.current.set(file, loading);
     }
     return loading;
-  }, []);
+  }, [live]);
   const request = useCallback(
     (entry) => {
       const { setup: current, load: loadModule } = live.current;
@@ -1677,7 +1648,10 @@ function useStoryRegistry(index, options) {
             kind: "index",
             bundle: {
               title: entry.title,
+              library: libraryOf(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
@@ -1702,7 +1676,7 @@ function useStoryRegistry(index, options) {
         settle2(ids, result);
       }).catch((error) => fail(ids, error));
     },
-    [importOf]
+    [importOf, live]
   );
   const reload = useCallback(
     (file) => {
@@ -1713,7 +1687,7 @@ function useStoryRegistry(index, options) {
       setFaults((prev) => pruned(prev, new Set([...prev.keys()].filter((id) => !ids.has(id)))));
       setGenerations((prev) => new Map(prev).set(file, (prev.get(file) ?? 0) + 1));
     },
-    []
+    [live]
   );
   const committed = useRef({ built: /* @__PURE__ */ new Map(), books: /* @__PURE__ */ new Map(), list: [] });
   const cache = useMemo(() => {
@@ -1731,26 +1705,25 @@ function useStoryRegistry(index, options) {
       const answers = previous.books.get(entry.id) ?? createAnswerBook();
       books.set(entry.id, answers);
       const held = previous.built.get(entry.id);
-      const kept = held && held.entryKey === entryKey && held.ready === ready && held.loaded === had && held.fault === fault && held.frameUrl === frameUrl && held.globals === globals && held.frames === frames && held.setup === setup && held.inDocument === inDocument && held.generation === generation && held.revision === revision ? held : {
+      const kept = held && held.entryKey === entryKey && held.ready === ready && held.loaded === had && held.fault === fault && held.frameUrl === frameUrl && held.globals === globals && held.setup === setup && held.inDocument === inDocument && held.generation === generation && held.revision === revision ? held : {
         entryKey,
         ready,
         loaded: had,
         fault,
         frameUrl,
         globals,
-        frames,
         setup,
         inDocument,
         generation,
         revision,
-        instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals, ...frames ? { frames } : {} }) : had ? documentInstrument({ entry, loaded: had, setup, globals, ...frames ? { frames } : {} }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
+        instrument: !inDocument ? storyInstrument({ entry, ready, answers, frameUrl, onReady, globals }) : had ? documentInstrument({ entry, loaded: had, setup, globals }) : pendingInstrument({ entry, globals, load: request, generation, ...fault ? { fault } : {} })
       };
       built.set(entry.id, kept);
       return kept.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, revisions, frameUrl, globals, frames, setup, importers, onReady, request]);
+  }, [index, readies, loaded, faults, generations, revisions, frameUrl, globals, setup, importers, onReady, request]);
   useLayoutEffect(() => {
     committed.current = cache;
   }, [cache]);
@@ -1802,7 +1775,7 @@ function useInfoShortcut(open) {
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open]);
 }
-function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage }) {
+function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies }) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const [frames] = useState(createTrialFrames);
   const [pool, setPool] = useState(null);
@@ -1820,7 +1793,6 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
   const registry = useStoryRegistry(entries, {
     frameUrl,
     globals: declarations,
-    frames,
     ...importers ? { importers } : {},
     ...setup ? { setup } : {}
   });
@@ -1857,7 +1829,7 @@ 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(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsxs(
+  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__ */ jsxs(
     Lab,
     {
       title: "weaselforge",
@@ -1886,7 +1858,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");
@@ -1905,6 +1877,10 @@ function mountWorkshop({ container, ...props }) {
       root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
     },
     reloadStory: (file) => changes.emit(file),
+    setDependencies(dependencies) {
+      current = { ...current, dependencies };
+      root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
+    },
     unmount: () => root.unmount()
   };
 }