@weasel-js/forge 1.5.0 → 1.5.1

package/dist/shell/index.js

@@ -1,106 +1,60 @@
-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, Input, TokenPanel } 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';
 
-// 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 +70,128 @@ 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]));
+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 [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 send = frame.send;
   const write = useCallback(
     (name, value) => {
@@ -156,36 +203,43 @@ function CssVarsPanel() {
     },
     [setOverrides, send]
   );
+  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,
+        {
+          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,
-      {
-        name: row.name,
-        value: row.value,
-        overridden: row.name in overrides,
-        write
-      },
-      row.name
-    )) })
+      ),
+      /* @__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, { tokens: shown, onChange: write, 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, {}) }
 };
 var GLOBALS_KEY = "$globals";
 var FOLLOW_LAB = "lab";
@@ -223,7 +277,7 @@ function withGlobals(schema, declarations) {
       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(leaves).label("").section("Globals", { layout: "inline", pack: "pairs" });
   return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group });
 }
 var RECORD = "fg-globals";
@@ -239,13 +293,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
   )) });
@@ -383,10 +437,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 +474,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;
@@ -469,10 +524,10 @@ 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 })
       },
@@ -504,26 +559,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 +601,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 +646,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 +661,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 +675,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 +688,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 +716,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 +727,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 +810,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 +880,7 @@ function storyInstrument(options) {
         ctx
       }
     ),
+    ...frames ? { annotations: annotationsOn(frames) } : {},
     ...ready?.viewport ? { stage: { size: { width: ready.viewport.width, height: ready.viewport.height } } } : {}
   };
 }
@@ -702,7 +889,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 +916,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]);
@@ -757,7 +945,6 @@ function useStoryRegistry(index, options) {
   return { instruments: cache.list, 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;
@@ -775,8 +962,8 @@ function RouteOpener({ index }) {
 }
 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 reportLabValues = useCallback(
     (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
@@ -785,6 +972,8 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
+      CSS_VARS_SECTION,
+      A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       ...config?.labChrome ?? []
     ],
@@ -806,9 +995,10 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
       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(LabGlobals, { declarations, onChange: reportLabValues })
@@ -831,6 +1021,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