@weasel-js/forge 1.5.0 → 1.5.2

package/dist/shell/index.js

@@ -1,106 +1,62 @@
-import { schemaFromDescription, openChannel } from '../chunk-O5OQZQRZ.js';
-import { stableStringify, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-IOBG7GZQ.js';
+import { schemaFromDescription, openChannel } from '../chunk-2JDYOBWM.js';
+import { stableStringify, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-FTFR2YPM.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
+import { createContext, useContext, useCallback, useSyncExternalStore, useState, useRef, useEffect, useMemo, useLayoutEffect, useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
-import { PropertyList, TextRow, ColorRow, Button, Lab, usePersistedState, useLabContext, TrialIdContext, useTrialId, ToggleBar } from '@weasel-js/labkit';
-import { createContext, memo, useMemo, useCallback, useState, useEffect, useRef, useLayoutEffect, useId, useContext, useSyncExternalStore } from 'react';
-import { TOKEN_MANIFEST } from '@weasel-js/theme';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { f } from '@weasel-js/labkit/config';
+import { InfoIcon, ToggleBar, Checkbox, Dialog } from '@weasel-js/ui';
+import { TOKEN_MANIFEST, THEME_SOURCES } from '@weasel-js/theme';
+import { scale } from '@weasel-js/theme/engine';
+import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
 
-// src/shell/cssVars/color.ts
-var HEX = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
-var RGB = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})\b/i;
-var COLOR_FUNCTION = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(.+\)$/i;
-var KEYWORDS = /* @__PURE__ */ new Set([
-  "transparent",
-  "currentcolor",
-  "black",
-  "white",
-  "gray",
-  "silver",
-  "red",
-  "orange",
-  "yellow",
-  "gold",
-  "lime",
-  "green",
-  "teal",
-  "cyan",
-  "blue",
-  "navy",
-  "purple",
-  "magenta",
-  "pink",
-  "brown"
-]);
-function browserSupports() {
-  return typeof CSS !== "undefined" && typeof CSS.supports === "function" ? (value) => CSS.supports("color", value) : null;
-}
-function parsesAsColor(value, supports = browserSupports()) {
-  const v = value.trim();
-  if (!v || v.includes("var(")) return false;
-  if (supports) return supports(v);
-  return HEX.test(v) || COLOR_FUNCTION.test(v) || KEYWORDS.has(v.toLowerCase());
-}
-function hexOf(v) {
-  if (HEX.test(v)) {
-    const digits = v.slice(1).toLowerCase();
-    return `#${digits.length <= 4 ? [...digits.slice(0, 3)].map((d) => d + d).join("") : digits.slice(0, 6)}`;
-  }
-  const rgb = RGB.exec(v);
-  return rgb ? `#${rgb.slice(1, 4).map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0")).join("")}` : null;
-}
-var paint;
-function serialized(value) {
-  if (paint === void 0) {
-    try {
-      paint = document.createElement("canvas").getContext("2d");
-    } catch {
-      paint = null;
-    }
-  }
-  if (!paint) return null;
-  paint.fillStyle = "#000000";
-  paint.fillStyle = value;
-  const onBlack = String(paint.fillStyle);
-  paint.fillStyle = "#ffffff";
-  paint.fillStyle = value;
-  return onBlack === String(paint.fillStyle) ? onBlack : null;
-}
-function toHex(value) {
-  const v = value.trim();
-  const direct = hexOf(v);
-  if (direct) return direct;
-  const browser = typeof document === "undefined" ? null : serialized(v);
-  return browser && browser !== v ? hexOf(browser) : null;
-}
-var NONE = {};
-function useCssOverrides() {
-  return usePersistedState("fg-css-overrides", NONE, { scope: "trial" });
-}
-var NO_FRAME = { send: null, vars: [] };
+var NO_FRAME = { send: null, vars: [], audit: null, a11y: null, capture: null, size: null };
 function createTrialFrames() {
   const frames = /* @__PURE__ */ new Map();
+  const hosts = /* @__PURE__ */ new Map();
   const listeners = /* @__PURE__ */ new Set();
   const changed = () => {
     for (const listener of [...listeners]) listener();
   };
+  const patch = (trialId, next) => {
+    const frame = frames.get(trialId);
+    if (!frame) return;
+    frames.set(trialId, { ...frame, ...next });
+    changed();
+  };
   return {
-    connect(trialId, send) {
-      frames.set(trialId, { send, vars: [] });
+    connect(trialId, calls) {
+      const held = frames.get(trialId);
+      frames.set(trialId, {
+        send: calls.send,
+        vars: [],
+        audit: calls.audit,
+        a11y: null,
+        capture: calls.capture,
+        size: held?.size ?? null
+      });
       changed();
       return () => {
-        if (frames.get(trialId)?.send !== send) return;
+        if (frames.get(trialId)?.send !== calls.send) return;
         frames.delete(trialId);
         changed();
       };
     },
-    report(trialId, vars) {
-      const frame = frames.get(trialId);
-      if (!frame) return;
-      frames.set(trialId, { ...frame, vars });
+    report: (trialId, vars) => patch(trialId, { vars }),
+    reportA11y: (trialId, a11y) => patch(trialId, { a11y }),
+    reportSize(trialId, size) {
+      const frame = frames.get(trialId) ?? NO_FRAME;
+      if (frame.size?.width === size.width && frame.size?.height === size.height) return;
+      frames.set(trialId, { ...frame, size });
       changed();
     },
+    hostRef(trialId) {
+      let ref = hosts.get(trialId);
+      if (!ref) {
+        ref = { current: null };
+        hosts.set(trialId, ref);
+      }
+      return ref;
+    },
     get: (trialId) => frames.get(trialId) ?? NO_FRAME,
     subscribe(listener) {
       listeners.add(listener);
@@ -116,35 +72,164 @@ function useTrialFrame(trialId) {
   const read = () => frames?.get(trialId) ?? NO_FRAME;
   return useSyncExternalStore(subscribe, read, read);
 }
+function Finding({ finding }) {
+  return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
+    /* @__PURE__ */ jsxs("p", { className: "fg-a11y__help", children: [
+      /* @__PURE__ */ jsx("a", { href: finding.helpUrl, target: "_blank", rel: "noreferrer", children: finding.help }),
+      finding.impact ? /* @__PURE__ */ jsx("span", { className: "fg-a11y__impact", "data-impact": finding.impact, children: finding.impact }) : null
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__nodes", children: finding.nodes.map((node) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: node.target.join(" ") }) }, `${finding.id}:${node.target.join(",")}`)) })
+  ] });
+}
+function Findings({ title, findings }) {
+  if (findings.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "fg-a11y__group", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "fg-a11y__group-title", children: [
+      title,
+      " (",
+      findings.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__findings", children: findings.map((finding) => /* @__PURE__ */ jsx(Finding, { finding }, finding.id)) })
+  ] });
+}
+function A11yPanel() {
+  const trialId = useTrialId();
+  const frame = useTrialFrame(trialId);
+  const [running, setRunning] = useState(false);
+  const audit = frame.audit;
+  const ran = useRef(null);
+  useEffect(() => {
+    if (!audit || ran.current === audit) return;
+    ran.current = audit;
+    setRunning(true);
+    void audit().finally(() => setRunning(false));
+  }, [audit]);
+  const rerun = () => {
+    if (!audit) return;
+    setRunning(true);
+    void audit().finally(() => setRunning(false));
+  };
+  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" }) }),
+    !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: [
+      "axe could not run: ",
+      outcome.message
+    ] }) : null,
+    outcome?.ok ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "fg-a11y__tally", children: [
+        outcome.report.violations.length,
+        " violations \xB7 ",
+        outcome.report.incomplete.length,
+        " to review \xB7",
+        " ",
+        outcome.report.passes,
+        " passes"
+      ] }),
+      /* @__PURE__ */ jsx(Findings, { title: "Violations", findings: outcome.report.violations }),
+      /* @__PURE__ */ jsx(Findings, { title: "Needs review", findings: outcome.report.incomplete })
+    ] }) : null
+  ] });
+}
+function FocusedA11y() {
+  const { focusedTrialId, trials, instruments } = useLabContext();
+  const record = trials.find((trial) => trial.id === focusedTrialId);
+  if (!record) return null;
+  const instrument = instruments.find((i) => i.name === record.instrumentName);
+  return /* @__PURE__ */ jsxs("section", { className: "fg-a11y-focus", "aria-label": "Accessibility", children: [
+    /* @__PURE__ */ jsx("p", { className: "fg-a11y__trial", children: record.title ?? instrument?.title ?? record.instrumentName }),
+    /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: record.id, children: /* @__PURE__ */ jsx(A11yPanel, {}) })
+  ] });
+}
+var A11Y_SECTION = {
+  id: "fg-a11y",
+  region: "aside",
+  item: { title: "Accessibility", body: /* @__PURE__ */ jsx(FocusedA11y, {}) }
+};
+var NONE = {};
+function useCssOverrides() {
+  return usePersistedState("fg-css-overrides", NONE, { scope: "trial" });
+}
 var TABS = [
   { value: "theme", label: "Theme" },
   { value: "story", label: "Story" }
 ];
-var VarRow = memo(function VarRow2({ name, value, overridden, write }) {
-  const hex = useMemo(() => parsesAsColor(value) ? toHex(value) : null, [value]);
-  const onChange = useCallback((next) => write(name, next), [write, name]);
-  const reset = useCallback(() => write(name, null), [write, name]);
-  return /* @__PURE__ */ jsxs("div", { className: "fg-css-var", role: "group", "aria-label": name, children: [
-    /* @__PURE__ */ jsxs(PropertyList, { className: "fg-css-var__rows", pack: "one-up", density: "tight", children: [
-      /* @__PURE__ */ jsx(TextRow, { label: name, value, onChange }),
-      hex ? /* @__PURE__ */ jsx(ColorRow, { label: "Color", value: hex, onChange }) : null
-    ] }),
-    overridden ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", ariaLabel: `Reset ${name}`, onClick: reset, children: "Reset" }) : null
-  ] });
+var MANIFEST = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
+var literal = (v) => typeof v === "number";
+var SCALE_SOURCES = Object.entries(THEME_SOURCES.weasel?.scales ?? {}).flatMap(([name, def]) => {
+  if (!Array.isArray(def.steps)) return [];
+  const steps = def.steps;
+  const tokens = steps.map((step) => `--wzl-${name}-${step}`);
+  const group = MANIFEST.get(tokens[0] ?? "")?.group;
+  if (!group) return [];
+  const factors = Array.isArray(def.factors) && def.factors.every(literal) ? def.factors : null;
+  const rule = def.factors !== void 0 ? factors ? { kind: "factors", factors } : "factors" : def.ratio !== void 0 ? literal(def.ratio) ? { kind: "ratio", ratio: def.ratio } : "ratio" : literal(def.step) ? { kind: "step", step: def.step } : "step";
+  return [{ name, group, steps, tokens, rule }];
 });
+function standingScale(source, amounts) {
+  const seed = { tokens: source.tokens, base: amounts[0] ?? 0, rule: { kind: "step", step: 0 } };
+  if (typeof source.rule === "string") return refitScale(seed, source.rule, amounts);
+  const { rule } = source;
+  if (rule.kind !== "factors") return { ...seed, rule };
+  let at = 0;
+  rule.factors.forEach((f3, i) => {
+    if (Math.abs(f3 - 1) < Math.abs((rule.factors[at] ?? 1) - 1)) at = i;
+  });
+  const base = (amounts[at] ?? 0) / (rule.factors[at] ?? 1);
+  return { ...seed, base: Math.round(base * 100) / 100, rule };
+}
+function groupOf(name) {
+  const segments = name.replace(/^--/, "").split("-");
+  return segments.length > 1 ? segments.slice(0, -1).join("-") : name.replace(/^--/, "");
+}
 function CssVarsPanel() {
   const trialId = useTrialId();
   const frame = useTrialFrame(trialId);
   const [overrides, setOverrides] = useCssOverrides();
+  const [folds, setFolds] = usePersistedState(
+    "fg-css-vars-folds",
+    {},
+    { scope: "lab" }
+  );
+  const [edited, setEdited] = usePersistedState("fg-css-vars-scales", {}, { scope: "lab" });
   const [tab, setTab] = useState("theme");
   const [filter, setFilter] = useState("");
-  const rows = useMemo(() => {
-    if (tab === "story") return frame.vars.map(({ name, value }) => ({ name, value }));
+  const tokens = useMemo(() => {
+    if (tab === "story") {
+      return frame.vars.map(({ name, value }) => {
+        const known = MANIFEST.get(name);
+        return { name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value };
+      });
+    }
     const reported = new Map(frame.vars.map((v) => [v.name, v.value]));
-    return TOKEN_MANIFEST.map((token) => ({ name: token.name, value: reported.get(token.name) ?? token.defaultValue }));
+    return TOKEN_MANIFEST.map((token) => ({
+      name: token.name,
+      type: token.type,
+      group: token.group,
+      value: reported.get(token.name) ?? token.defaultValue,
+      description: token.description
+    }));
   }, [tab, frame.vars]);
   const query = filter.trim().toLowerCase();
-  const shown = rows.map((row) => ({ ...row, value: overrides[row.name] ?? row.value })).filter((row) => !query || row.name.toLowerCase().includes(query) || row.value.toLowerCase().includes(query));
+  const shown = tokens.map((token) => {
+    const override = overrides[token.name];
+    return override === void 0 ? token : { ...token, value: override, overridden: true };
+  }).filter((token) => !query || token.name.toLowerCase().includes(query) || token.value.toLowerCase().includes(query));
+  const scales = useMemo(() => {
+    if (tab !== "theme") return void 0;
+    const values = new Map(shown.map((t) => [t.name, t.value]));
+    const out = {};
+    for (const source of SCALE_SOURCES) {
+      const amounts = source.tokens.map((name) => Number.parseFloat(values.get(name) ?? ""));
+      if (amounts.some(Number.isNaN)) continue;
+      const own = source.tokens.some((name) => overrides[name] !== void 0) ? edited[source.group] : void 0;
+      out[source.group] = own ?? standingScale(source, amounts);
+    }
+    return out;
+  }, [tab, shown, overrides, edited]);
   const send = frame.send;
   const write = useCallback(
     (name, value) => {
@@ -156,37 +241,272 @@ function CssVarsPanel() {
     },
     [setOverrides, send]
   );
+  const onScaleChange = useCallback(
+    (group, next) => {
+      const source = SCALE_SOURCES.find((sc) => sc.group === group);
+      if (!source) return;
+      setEdited((prev) => ({ ...prev, [group]: next }));
+      const { rule } = next;
+      const values = scale(source.steps, {
+        base: next.base,
+        ...rule.kind === "factors" ? { factors: rule.factors } : rule.kind === "ratio" ? { ratio: rule.ratio } : { step: rule.step }
+      });
+      source.steps.forEach((step, i) => {
+        const value = values[step];
+        const name = source.tokens[i];
+        if (value !== void 0 && name !== void 0) write(name, value);
+      });
+    },
+    [setEdited, write]
+  );
+  const onCollapsedChange = useCallback(
+    (category, collapsed) => setFolds((prev) => ({ ...prev, [category]: collapsed })),
+    [setFolds]
+  );
   return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars", children: [
-    /* @__PURE__ */ jsx(
-      ToggleBar,
-      {
-        ariaLabel: "Variables",
-        size: "sm",
-        items: TABS,
-        value: tab,
-        onChange: (next) => {
-          if (next) setTab(next);
+    /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__controls", children: [
+      /* @__PURE__ */ jsx(
+        ToggleBar$1,
+        {
+          ariaLabel: "Variables",
+          variant: "flat",
+          items: TABS,
+          value: tab,
+          onChange: (next) => {
+            if (next) setTab(next);
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ jsx(PropertyList, { pack: "one-up", density: "tight", children: /* @__PURE__ */ jsx(TextRow, { label: "Filter", value: filter, placeholder: "Name or value", onChange: setFilter }) }),
-    shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: rows.length === 0 ? "The story\u2019s frame has reported no variables." : "No variables match." }) : /* @__PURE__ */ jsx("div", { className: "fg-css-vars__list", children: shown.map((row) => /* @__PURE__ */ jsx(
-      VarRow,
+      ),
+      /* @__PURE__ */ jsx(Input, { "aria-label": "Filter", placeholder: "Filter by name or value", value: filter, onChange: setFilter })
+    ] }),
+    shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: tokens.length === 0 ? "The story\u2019s frame has reported no variables." : "No variables match." }) : /* @__PURE__ */ jsx(
+      TokenPanel,
       {
-        name: row.name,
-        value: row.value,
-        overridden: row.name in overrides,
-        write
-      },
-      row.name
-    )) })
+        tokens: shown,
+        onChange: write,
+        scales,
+        onScaleChange,
+        collapsed: folds,
+        onCollapsedChange
+      }
+    )
+  ] });
+}
+function FocusedCssVars() {
+  const { focusedTrialId, trials, instruments } = useLabContext();
+  const record = trials.find((trial) => trial.id === focusedTrialId);
+  if (!record) return null;
+  const instrument = instruments.find((i) => i.name === record.instrumentName);
+  return /* @__PURE__ */ jsxs("section", { className: "fg-css-vars-focus", "aria-label": "CSS Vars", children: [
+    /* @__PURE__ */ jsx("p", { className: "fg-css-vars__trial", children: record.title ?? instrument?.title ?? record.instrumentName }),
+    /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: record.id, children: /* @__PURE__ */ jsx(CssVarsPanel, {}) })
   ] });
 }
 var CSS_VARS_SECTION = {
   id: "fg-css-vars",
-  region: "sidebar",
-  item: { title: "CSS Vars", body: /* @__PURE__ */ jsx(CssVarsPanel, {}) }
+  region: "aside",
+  item: { title: "CSS Vars", body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
+
+// src/shell/tree/buildComponents.ts
+var LIBRARIES = [
+  ["/packages/ui/", "weasel-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),
+        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 group = byLabel.get(row.label);
+    if (group) group.push(row);
+    else byLabel.set(row.label, [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({ ...row, entries });
+  }
+  return out;
+}
+function componentNodes(rows) {
+  return rows.map(
+    (row) => row.entries.length === 1 ? { kind: "story", entry: row.entries[0], tag: row.library, label: row.label } : {
+      kind: "folder",
+      label: row.label,
+      path: row.path,
+      tag: row.library,
+      children: row.entries.map((entry) => ({ kind: "story", entry }))
+    }
+  );
+}
+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 = [];
+  for (const [key, entry] of Object.entries(shape)) {
+    if (prefix === "" && key === GLOBALS) continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (isConfigBranch(entry)) out.push(...leaves(entry.children, path));
+    else if (!entry.annotations.hidden) out.push({ path, node: entry });
+  }
+  return out;
+}
+function storyDossier(input) {
+  const { entry, 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);
+    return {
+      path,
+      label: node.annotations.name ?? path.split(".").pop() ?? path,
+      kind: node.kind,
+      default: node.default,
+      value: value === void 0 ? node.default : value,
+      ...node.annotations.description === void 0 ? {} : { description: node.annotations.description }
+    };
+  }) : [];
+  return {
+    id: entry.id,
+    title: entry.title,
+    name: entry.name,
+    exportName: entry.exportName,
+    file: entry.file,
+    library: libraryOf(entry),
+    ...entry.componentName === void 0 ? {} : { componentName: entry.componentName },
+    ...entry.description === void 0 ? {} : { description: entry.description },
+    ...entry.componentDescription === void 0 ? {} : { componentDescription: entry.componentDescription },
+    args,
+    argsPending: !schema
+  };
+}
+function printed(value) {
+  if (value === void 0 || value === null) return "\u2014";
+  if (typeof value === "string") return value === "" ? '""' : value;
+  if (typeof value === "function") return "\u0192";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fg-info__row", children: [
+    /* @__PURE__ */ jsx("dt", { className: "fg-info__key", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "fg-info__value", children })
+  ] });
+}
+function ArgRows({ args }) {
+  return /* @__PURE__ */ jsxs("table", { className: "fg-info__args", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Name" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Kind" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Value" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Default" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: args.map((arg) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsxs("th", { scope: "row", children: [
+        /* @__PURE__ */ jsx("span", { className: "fg-info__arg-name", children: arg.label }),
+        arg.description ? /* @__PURE__ */ jsx("span", { className: "fg-info__arg-doc", children: arg.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("td", { className: "fg-info__arg-kind", children: arg.kind ?? "\u2014" }),
+      /* @__PURE__ */ jsx("td", { className: "fg-info__value-cell", children: printed(arg.value) }),
+      /* @__PURE__ */ jsx("td", { className: "fg-info__value-cell", children: printed(arg.default) })
+    ] }, arg.path)) })
+  ] });
+}
+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
+    ] }) : 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 }),
+      /* @__PURE__ */ jsx(Row, { label: "Component", children: dossier.componentName ?? dossier.title.split("/").pop() }),
+      /* @__PURE__ */ jsx(Row, { label: "Library", children: dossier.library }),
+      /* @__PURE__ */ jsx(Row, { label: "Title", children: dossier.title }),
+      /* @__PURE__ */ jsx(Row, { label: "Export", children: /* @__PURE__ */ jsx("code", { children: dossier.exportName }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Id", children: /* @__PURE__ */ jsx("code", { children: dossier.id }) }),
+      /* @__PURE__ */ jsx(Row, { label: "File", children: /* @__PURE__ */ jsx("code", { className: "fg-info__path", children: dossier.file }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("section", { className: "fg-info__section", "aria-label": "Args", children: [
+      /* @__PURE__ */ jsx("h3", { className: "fg-info__heading", children: "Args" }),
+      dossier.argsPending ? /* @__PURE__ */ jsx("p", { className: "fg-info__empty", children: "Open this story to read its args." }) : dossier.args.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-info__empty", children: "This story takes no args." }) : /* @__PURE__ */ jsx(ArgRows, { args: dossier.args })
+    ] })
+  ] });
+}
+function StoryInfoDialog({ index, isReady, isOpen, onOpenChange }) {
+  const { focusedTrialId, trials, instruments } = useLabContext();
+  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,
+    instrument: instruments.find((candidate) => candidate.name === entry.id),
+    config: trial?.config,
+    ready: isReady(entry.id)
+  });
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      isOpen,
+      onOpenChange,
+      title: `${dossier.title} / ${dossier.name}`,
+      className: "fg-info-dialog",
+      children: /* @__PURE__ */ jsx(StoryDossier, { dossier })
+    }
+  );
+}
 var GLOBALS_KEY = "$globals";
 var FOLLOW_LAB = "lab";
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -217,13 +537,13 @@ function storyConfig(config, previous) {
 function withGlobals(schema, declarations) {
   const entries = Object.entries(declarations);
   if (entries.length === 0) return schema;
-  const leaves = Object.fromEntries(
+  const leaves2 = Object.fromEntries(
     entries.map(([key, declaration]) => [
       key,
       f.enum(FOLLOW_LAB, [{ value: FOLLOW_LAB, label: "Lab" }, ...declaration.options]).label(declaration.label)
     ])
   );
-  const group = f.group(leaves).label("").section("Globals");
+  const group = f.group(leaves2).label("").section("Globals", { layout: "inline", pack: "pairs" });
   return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group });
 }
 var RECORD = "fg-globals";
@@ -239,13 +559,13 @@ function useLabGlobals(declarations) {
 function GlobalsToolbar({ declarations }) {
   const [values, set] = useLabGlobals(declarations);
   return /* @__PURE__ */ jsx("div", { className: "fg-globals", role: "toolbar", "aria-label": "Globals", children: Object.entries(declarations).map(([key, declaration]) => /* @__PURE__ */ jsx(
-    "select",
+    Select,
     {
-      className: "fg-globals__select",
       "aria-label": declaration.label,
-      value: String(values[key]),
-      onChange: (event) => set(key, event.target.value),
-      children: declaration.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      width: "fit",
+      selectedKey: String(values[key]),
+      onSelectionChange: (value) => set(key, value),
+      options: declaration.options
     },
     key
   )) });
@@ -341,6 +661,10 @@ function filterTree(nodes, query) {
   });
   return walk(nodes);
 }
+var VIEWS = [
+  { value: "tree", label: "Tree" },
+  { value: "components", label: "Components" }
+];
 var keyOf = (node) => node.kind === "folder" ? `folder:${node.path}` : `story:${node.entry.id}`;
 function ancestorsOf(entry) {
   const paths = /* @__PURE__ */ new Set();
@@ -357,14 +681,22 @@ function StoryTree({ ctx, index }) {
   const [route, setRoute] = useRoute();
   const [query, setQuery] = useState("");
   const [folds, setFolds] = usePersistedState("fg-tree-open", {}, { scope: "lab" });
+  const [view, setView] = usePersistedState("fg-tree-view", "tree", { scope: "lab" });
+  const [hidden, setHidden] = usePersistedState("fg-tree-libraries", {}, { scope: "lab" });
   const [focusKey, setFocusKey] = useState(null);
   const items = useRef(/* @__PURE__ */ new Map());
-  const tree = useMemo(() => buildTree(index), [index]);
-  const shown = useMemo(() => filterTree(tree, query), [tree, query]);
-  const routed = index.find((entry) => entry.id === route);
+  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 shown = useMemo(
+    () => view === "components" ? componentNodes(filterComponents(components, query)) : filterTree(tree, query),
+    [view, components, tree, query]
+  );
+  const routed = kept.find((entry) => entry.id === route);
   const routeAncestors = useMemo(() => ancestorsOf(routed), [routed]);
   const filtering = query.trim() !== "";
-  const isOpen = (path) => filtering || (folds[path] ?? routeAncestors.has(path));
+  const isOpen = (path) => filtering || (folds[path] ?? (view === "tree" && routeAncestors.has(path)));
   const rows = [];
   const collect = (nodes, parent) => {
     for (const node of nodes) {
@@ -383,10 +715,11 @@ function StoryTree({ ctx, index }) {
     setFocusKey(key);
     items.current.get(key)?.focus();
   };
-  const activate = (entry, fresh) => {
-    const open = ctx.trials.find((trial) => trial.instrumentName === entry.id);
-    if (open && !fresh) revealTrial(open.id);
-    else ctx.addTrial(entry.id);
+  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 ctx.swapTrial(focused.id, entry.id);
     setRoute(entry.id);
   };
   const onKeyDown = (event) => {
@@ -419,7 +752,7 @@ function StoryTree({ ctx, index }) {
       case "Enter":
       case " ":
         if (node.kind === "folder") setOpen(node.path, !isOpen(node.path));
-        else activate(node.entry, event.metaKey || event.ctrlKey);
+        else activate(node.entry, event.shiftKey);
         break;
       default:
         return;
@@ -453,7 +786,10 @@ function StoryTree({ ctx, index }) {
           "aria-label": node.label,
           className: "fg-tree__node",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "fg-tree__item fg-tree__folder", onClick: () => setOpen(node.path, !open), children: /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label }) }),
+            /* @__PURE__ */ jsxs("div", { className: "fg-tree__item fg-tree__folder", onClick: () => setOpen(node.path, !open), children: [
+              /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label }),
+              node.tag ? /* @__PURE__ */ jsx("span", { className: "fg-tree__tag", children: node.tag }) : null
+            ] }),
             open ? /* @__PURE__ */ jsx("div", { role: "group", className: "fg-tree__group", children: renderNodes(node.children, level + 1) }) : null
           ]
         },
@@ -461,7 +797,7 @@ function StoryTree({ ctx, index }) {
       );
     }
     const { entry } = node;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "a",
       {
         ...itemProps(node, level),
@@ -469,12 +805,15 @@ function StoryTree({ ctx, index }) {
         "aria-current": openIds.has(entry.id) ? "true" : void 0,
         className: "fg-tree__item fg-tree__story",
         onClick: (event) => {
-          if (event.button !== 0 || event.shiftKey || event.altKey) return;
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey) return;
           event.preventDefault();
           setFocusKey(keyOf(node));
-          activate(entry, event.metaKey || event.ctrlKey);
+          activate(entry, event.shiftKey);
         },
-        children: /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: entry.name })
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: node.label ?? entry.name }),
+          node.tag ? /* @__PURE__ */ jsx("span", { className: "fg-tree__tag", children: node.tag }) : null
+        ]
       },
       keyOf(node)
     );
@@ -485,6 +824,30 @@ function StoryTree({ ctx, index }) {
       "No story ",
       /* @__PURE__ */ jsx("code", { children: route })
     ] }) : null,
+    /* @__PURE__ */ jsx(
+      ToggleBar,
+      {
+        ariaLabel: "Sidebar view",
+        variant: "flat",
+        items: VIEWS,
+        value: view,
+        onChange: (next) => {
+          if (next) setView(next);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("fieldset", { className: "fg-tree__libraries", children: [
+      /* @__PURE__ */ jsx("legend", { className: "fg-tree__libraries-legend", children: "Packages" }),
+      libraries.map((library) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          isSelected: !hidden[library],
+          onChange: (on) => setHidden((prev) => ({ ...prev, [library]: !on })),
+          children: library
+        },
+        library
+      ))
+    ] }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -504,26 +867,36 @@ var KEPT_CONFIGS = 50;
 var UNANSWERED = stableStringify({ hidden: [], errors: {} });
 function createAnswerBook() {
   const byConfig = /* @__PURE__ */ new Map();
-  let errors = {};
   const listeners = /* @__PURE__ */ new Set();
+  const held = /* @__PURE__ */ new Map();
+  const keyOf2 = (config) => stableStringify(storyConfig(config));
+  const answerFor = (config) => byConfig.get(keyOf2(config));
   return {
     record(answers) {
       const key = stableStringify({ hidden: answers.hidden, errors: answers.errors });
       const changed = key !== (byConfig.get(answers.configKey)?.key ?? UNANSWERED);
       byConfig.delete(answers.configKey);
-      byConfig.set(answers.configKey, { hidden: answers.hidden, key });
+      byConfig.set(answers.configKey, { hidden: answers.hidden, errors: answers.errors, key });
       if (byConfig.size > KEPT_CONFIGS) {
         const oldest = byConfig.keys().next().value;
         if (oldest !== void 0) byConfig.delete(oldest);
       }
-      errors = answers.errors;
-      if (changed) for (const fn of listeners) fn();
+      if (changed && held.has(answers.configKey)) for (const fn of listeners) fn();
+    },
+    hold(config) {
+      const key = keyOf2(config);
+      held.set(key, (held.get(key) ?? 0) + 1);
+      return () => {
+        const count = (held.get(key) ?? 1) - 1;
+        if (count > 0) held.set(key, count);
+        else held.delete(key);
+      };
     },
     hidden(path, config) {
-      const hidden = byConfig.get(stableStringify(storyConfig(config)))?.hidden;
+      const hidden = answerFor(config)?.hidden;
       return hidden?.some((h) => path === h || path.startsWith(`${h}.`)) ?? false;
     },
-    errors: (path) => errors[path] ?? [],
+    errors: (path, config) => answerFor(config)?.errors[path] ?? [],
     subscribe(fn) {
       listeners.add(fn);
       return () => {
@@ -536,18 +909,43 @@ function createAnswerBook() {
 // src/shell/readyKey.ts
 var readyKey = (ready) => stableStringify({ schema: ready.schema, layout: ready.layout, viewport: ready.viewport });
 var START_TIMEOUT_MS = 1e4;
+var requests = 0;
+var IN_VIEW_MARGIN = "50%";
+function useInView(ref) {
+  const [inView, setInView] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const last = entries.at(-1);
+        if (last) setInView(last.isIntersecting);
+      },
+      { rootMargin: IN_VIEW_MARGIN }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return inView;
+}
 function closeLink(link) {
   if (!link.current) return;
   clearTimeout(link.current.timer);
+  for (const settle2 of link.current.pending.values()) settle2.gone();
+  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";
 }
 function FrameView(props) {
-  const { entry, frameUrl, descriptionKey, ctx } = props;
+  const { entry, frameUrl, answers, descriptionKey, ctx } = props;
   const labGlobals2 = useContext(StoryGlobalsContext);
   const pins = ctx.config?.[GLOBALS_KEY];
   const globals = useMemo(() => effectiveGlobals(labGlobals2, pins), [labGlobals2, pins]);
@@ -556,10 +954,13 @@ function FrameView(props) {
   const [overrides] = useCssOverrides();
   const src = `${frameUrl}#${entry.id}`;
   const iframeRef = useRef(null);
+  const hostRef = useRef(null);
+  const inView = useInView(hostRef);
   const link = useRef(null);
   const latest = useRef({ ...props, globals, overrides });
   latest.current = { ...props, globals, overrides };
   const [fault, setFault] = useState(null);
+  const [pending, setPending] = useState(true);
   const init = (current) => {
     const { ctx: live, globals: liveGlobals } = latest.current;
     current.awaiting = null;
@@ -568,7 +969,7 @@ function FrameView(props) {
     current.channel.send({ type: "init", ...current.sent });
   };
   const receive = (current, msg) => {
-    const { ctx: live, answers, onReady } = latest.current;
+    const { ctx: live, answers: answers2, onReady } = latest.current;
     switch (msg.type) {
       case "ready": {
         clearTimeout(current.timer);
@@ -582,6 +983,11 @@ function FrameView(props) {
         if (current.awaiting === key && key === latest.current.descriptionKey) init(current);
         break;
       }
+      case "rendered":
+        setPending(false);
+        current.hasRendered = true;
+        for (const ask of current.queued.splice(0)) ask();
+        break;
       case "setConfig":
         if (!isGlobalsPath(msg.path)) live.setConfig(msg.path, msg.value);
         break;
@@ -590,11 +996,25 @@ function FrameView(props) {
         live.setState(msg.state);
         break;
       case "answers":
-        answers.record(msg.answers);
+        answers2.record(msg.answers);
         break;
       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.delete(msg.id);
+        break;
       case "fault":
         if (msg.phase === "render" && msg.seq !== void 0 && msg.seq < current.inputs) break;
         clearTimeout(current.timer);
@@ -604,6 +1024,7 @@ function FrameView(props) {
   };
   const onLoad = () => {
     closeLink(link);
+    setPending(true);
     const target = iframeRef.current?.contentWindow;
     if (!target) return;
     const { port1, port2 } = new MessageChannel();
@@ -614,14 +1035,58 @@ function FrameView(props) {
         setFault({ phase: "protocol", message: mismatchMessage(mismatch) });
       }
     });
-    const disconnect = frames && trialId ? frames.connect(trialId, channel.send) : () => {
+    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);
+      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 current = {
+      channel,
+      timer,
+      awaiting: null,
+      sent: null,
+      inputs: 0,
+      disconnect,
+      pending: waiting,
+      hasRendered: false,
+      queued: []
     };
-    const current = { channel, timer, awaiting: null, sent: null, inputs: 0, disconnect };
     link.current = current;
     channel.on((msg) => receive(current, msg));
     target.postMessage({ type: PORT_HANDOFF }, location.origin, [port2]);
   };
   useEffect(() => () => closeLink(link), []);
+  useEffect(() => {
+    if (inView) return;
+    closeLink(link);
+    setPending(true);
+    setFault(null);
+  }, [inView]);
+  useEffect(() => answers.hold(ctx.config), [answers, ctx.config]);
   useEffect(() => {
     const current = link.current;
     if (!current) return;
@@ -653,25 +1118,54 @@ function FrameView(props) {
     }
     if (input) setFault((shown) => shown?.phase === "render" ? null : shown);
   }, [ctx.config, ctx.state, globals, descriptionKey]);
-  return /* @__PURE__ */ jsxs("div", { className: "fg-frame-host", children: [
-    /* @__PURE__ */ jsx(
-      "iframe",
-      {
-        ref: iframeRef,
-        className: "fg-frame-view",
-        src,
-        title: `${entry.title} / ${entry.name}`,
-        onLoad
-      }
-    ),
-    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: (el) => {
+        hostRef.current = el;
+        if (trialId && frames) frames.hostRef(trialId).current = el;
+      },
+      className: "fg-frame-host",
+      children: [
+        inView ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            className: "fg-frame-view",
+            src,
+            title: `${entry.title} / ${entry.name}`,
+            onLoad,
+            "data-pending": pending && !fault ? "" : void 0
+          }
+        ) : null,
+        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 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 storyInstrument(options) {
-  const { entry, ready, answers, frameUrl, onReady, globals = {} } = options;
+  const { entry, ready, answers, frameUrl, onReady, globals = {}, frames } = options;
   const config = withGlobals(
     ready ? schemaFromDescription(ready.schema, answers) : f.schema({}),
     globals
@@ -694,6 +1188,7 @@ function storyInstrument(options) {
         ctx
       }
     ),
+    ...frames ? { annotations: annotationsOn(frames) } : {},
     ...ready?.viewport ? { stage: { size: { width: ready.viewport.width, height: ready.viewport.height } } } : {}
   };
 }
@@ -702,7 +1197,7 @@ function storyInstrument(options) {
 var NO_GLOBALS = {};
 var pruned = (map, ids) => [...map.keys()].every((id) => ids.has(id)) ? map : new Map([...map].filter(([id]) => ids.has(id)));
 function useStoryRegistry(index, options) {
-  const { frameUrl, globals = NO_GLOBALS } = options;
+  const { frameUrl, globals = NO_GLOBALS, frames } = options;
   const [readies, setReadies] = useState(() => /* @__PURE__ */ new Map());
   const [revisions, setRevisions] = useState(() => /* @__PURE__ */ new Map());
   const onReady = useCallback((entry, ready) => {
@@ -729,20 +1224,21 @@ 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.frameUrl === frameUrl && held.globals === globals && held.revision === revision ? held : {
+      const kept = held && held.entryKey === entryKey && held.ready === ready && held.frameUrl === frameUrl && held.globals === globals && held.frames === frames && held.revision === revision ? held : {
         entryKey,
         ready,
         frameUrl,
         globals,
+        frames,
         revision,
-        instrument: storyInstrument({ entry, ready, answers, frameUrl, onReady, globals })
+        instrument: storyInstrument({ entry, ready, answers, frameUrl, onReady, globals, ...frames ? { frames } : {} })
       };
       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, revisions, frameUrl, globals, onReady]);
+  }, [index, readies, revisions, frameUrl, globals, frames, onReady]);
   useLayoutEffect(() => {
     committed.current = cache;
   }, [cache]);
@@ -754,10 +1250,10 @@ function useStoryRegistry(index, options) {
       for (const off of offs) off();
     };
   }, [cache.books]);
-  return { instruments: cache.list, onReady };
+  const isReady = useCallback((id) => readies.has(id), [readies]);
+  return { instruments: cache.list, isReady, onReady };
 }
 var NO_DECLARATIONS = {};
-var TRIAL_CHROME = [CSS_VARS_SECTION];
 function initialStory(index, fallback) {
   const route = readRoute();
   return route !== null && index.some((entry) => entry.id === route) ? route : fallback;
@@ -773,11 +1269,27 @@ function RouteOpener({ index }) {
   }, [route, index, lab]);
   return null;
 }
+function useInfoShortcut(open) {
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "i" && event.key !== "I") return;
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+      const target = event.target;
+      if (target?.isContentEditable || /^(input|textarea|select)$/i.test(target?.tagName ?? "")) return;
+      event.preventDefault();
+      open(true);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+}
 function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
-  const registry = useStoryRegistry(index, { frameUrl, globals: declarations });
   const [frames] = useState(createTrialFrames);
+  const registry = useStoryRegistry(index, { frameUrl, globals: declarations, frames });
   const [labValues, setLabValues] = useState(() => labGlobals(declarations, void 0));
+  const [infoOpen, setInfoOpen] = useState(false);
+  useInfoShortcut(setInfoOpen);
   const reportLabValues = useCallback(
     (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
     []
@@ -785,6 +1297,13 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
   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) }
+      },
+      CSS_VARS_SECTION,
+      A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       ...config?.labChrome ?? []
     ],
@@ -801,16 +1320,27 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
     Lab,
     {
       title: "weaselforge",
+      density: "roomy",
       instruments: registry.instruments,
       defaultInstrument: initialStory(index, first.id),
       storageKey: storageKey ?? "weaselforge",
       ...storage ? { storage } : {},
       labChrome,
-      chrome: TRIAL_CHROME,
       addTrial: false,
       ...config?.controls ? { controls: config.controls } : {},
+      ...config?.pages ? { pages: config.pages } : {},
+      ...config?.path !== void 0 ? { path: config.path } : {},
       children: [
         /* @__PURE__ */ jsx(RouteOpener, { index }),
+        /* @__PURE__ */ jsx(
+          StoryInfoDialog,
+          {
+            index,
+            isReady: registry.isReady,
+            isOpen: infoOpen,
+            onOpenChange: setInfoOpen
+          }
+        ),
         /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
       ]
     }
@@ -831,6 +1361,6 @@ function mountWorkshop({ container, ...props }) {
   };
 }
 
-export { StoryGlobalsContext, Workshop, mountWorkshop, useStoryRegistry };
+export { A11Y_SECTION, A11yPanel, StoryGlobalsContext, TrialFramesContext, Workshop, mountWorkshop, useStoryRegistry, useTrialFrame };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map