@weasel-js/forge 1.5.0

package/dist/shell/index.js

@@ -0,0 +1,836 @@
+import { schemaFromDescription, openChannel } from '../chunk-O5OQZQRZ.js';
+import { stableStringify, PORT_HANDOFF, PROTOCOL_VERSION } from '../chunk-IOBG7GZQ.js';
+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: [] };
+function createTrialFrames() {
+  const frames = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  const changed = () => {
+    for (const listener of [...listeners]) listener();
+  };
+  return {
+    connect(trialId, send) {
+      frames.set(trialId, { send, vars: [] });
+      changed();
+      return () => {
+        if (frames.get(trialId)?.send !== send) return;
+        frames.delete(trialId);
+        changed();
+      };
+    },
+    report(trialId, vars) {
+      const frame = frames.get(trialId);
+      if (!frame) return;
+      frames.set(trialId, { ...frame, vars });
+      changed();
+    },
+    get: (trialId) => frames.get(trialId) ?? NO_FRAME,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var TrialFramesContext = createContext(null);
+function useTrialFrame(trialId) {
+  const frames = useContext(TrialFramesContext);
+  const subscribe = useCallback((listener) => frames?.subscribe(listener) ?? (() => {
+  }), [frames]);
+  const read = () => frames?.get(trialId) ?? NO_FRAME;
+  return useSyncExternalStore(subscribe, read, read);
+}
+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
+  ] });
+});
+function CssVarsPanel() {
+  const trialId = useTrialId();
+  const frame = useTrialFrame(trialId);
+  const [overrides, setOverrides] = useCssOverrides();
+  const [tab, setTab] = useState("theme");
+  const [filter, setFilter] = useState("");
+  const rows = useMemo(() => {
+    if (tab === "story") return frame.vars.map(({ name, value }) => ({ 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 }));
+  }, [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 send = frame.send;
+  const write = useCallback(
+    (name, value) => {
+      setOverrides((prev) => {
+        const { [name]: _dropped, ...rest } = prev;
+        return value === null ? rest : { ...rest, [name]: value };
+      });
+      send?.({ type: "vars.set", name, value });
+    },
+    [setOverrides, send]
+  );
+  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__ */ 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
+    )) })
+  ] });
+}
+var CSS_VARS_SECTION = {
+  id: "fg-css-vars",
+  region: "sidebar",
+  item: { title: "CSS Vars", body: /* @__PURE__ */ jsx(CssVarsPanel, {}) }
+};
+var GLOBALS_KEY = "$globals";
+var FOLLOW_LAB = "lab";
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isGlobalsPath = (path) => path === GLOBALS_KEY || path.startsWith(`${GLOBALS_KEY}.`);
+function labGlobals(declarations, stored) {
+  const from = isRecord(stored) ? stored : {};
+  return Object.fromEntries(
+    Object.entries(declarations).map(([key, declaration]) => {
+      const value = from[key];
+      return [key, declaration.options.some((option) => option.value === value) ? value : declaration.default];
+    })
+  );
+}
+function effectiveGlobals(lab, pins) {
+  if (!isRecord(pins)) return lab;
+  const pinned = Object.entries(pins).filter(([key, value]) => key in lab && value !== FOLLOW_LAB);
+  return pinned.length === 0 ? lab : { ...lab, ...Object.fromEntries(pinned) };
+}
+function storyConfig(config, previous) {
+  if (!isRecord(config) || !(GLOBALS_KEY in config)) return config;
+  const rest = Object.fromEntries(Object.entries(config).filter(([key]) => key !== GLOBALS_KEY));
+  if (isRecord(previous)) {
+    const keys = Object.keys(rest);
+    if (keys.length === Object.keys(previous).length && keys.every((key) => rest[key] === previous[key])) return previous;
+  }
+  return rest;
+}
+function withGlobals(schema, declarations) {
+  const entries = Object.entries(declarations);
+  if (entries.length === 0) return schema;
+  const leaves = 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");
+  return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group });
+}
+var RECORD = "fg-globals";
+function useLabGlobals(declarations) {
+  const [stored, setStored] = usePersistedState(RECORD, null, { scope: "lab" });
+  const values = useMemo(() => labGlobals(declarations, stored), [declarations, stored]);
+  const set = useCallback(
+    (key, value) => setStored((prev) => ({ ...labGlobals(declarations, prev), [key]: value })),
+    [declarations, setStored]
+  );
+  return [values, set];
+}
+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",
+    {
+      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))
+    },
+    key
+  )) });
+}
+function LabGlobals({
+  declarations,
+  onChange
+}) {
+  const [values] = useLabGlobals(declarations);
+  useEffect(() => onChange(values), [values, onChange]);
+  return null;
+}
+var StoryGlobalsContext = createContext({});
+
+// src/shell/revealTrial.ts
+var FLASH_MS = 600;
+var flashes = /* @__PURE__ */ new WeakMap();
+function revealTrial(trialId, root = document) {
+  const trial = root.querySelector(`.lk-trial[data-trial-id="${CSS.escape(trialId)}"]`);
+  if (!trial) return false;
+  trial.scrollIntoView({ block: "nearest" });
+  clearTimeout(flashes.get(trial));
+  trial.classList.remove("fg-flash");
+  void trial.offsetWidth;
+  trial.classList.add("fg-flash");
+  flashes.set(
+    trial,
+    setTimeout(() => {
+      trial.classList.remove("fg-flash");
+      flashes.delete(trial);
+    }, FLASH_MS)
+  );
+  return true;
+}
+function readRoute() {
+  const { hash } = location;
+  if (!hash.startsWith("#/")) return null;
+  return decodeURIComponent(hash.slice(2)) || null;
+}
+function useRoute() {
+  const [route, setRoute] = useState(readRoute);
+  useEffect(() => {
+    const sync = () => setRoute(readRoute());
+    window.addEventListener("hashchange", sync);
+    sync();
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+  const go = useCallback((id) => {
+    const hash = `#/${encodeURIComponent(id)}`;
+    if (readRoute() === id) history.replaceState(null, "", hash);
+    else location.hash = hash;
+  }, []);
+  return [route, go];
+}
+
+// src/shell/tree/buildTree.ts
+function sortFolder(nodes) {
+  const folders = nodes.filter((n) => n.kind === "folder");
+  const stories = nodes.filter((n) => n.kind === "story");
+  folders.sort((a, b) => a.label.localeCompare(b.label));
+  for (const folder of folders) folder.children = sortFolder(folder.children);
+  return [...folders, ...stories];
+}
+function buildTree(index) {
+  const root = [];
+  const folders = /* @__PURE__ */ new Map();
+  for (const entry of index) {
+    let siblings = root;
+    let path = "";
+    for (const label of entry.title.split("/")) {
+      path = path ? `${path}/${label}` : label;
+      let folder = folders.get(path);
+      if (!folder) {
+        folder = { kind: "folder", label, path, children: [] };
+        folders.set(path, folder);
+        siblings.push(folder);
+      }
+      siblings = folder.children;
+    }
+    siblings.push({ kind: "story", entry });
+  }
+  return sortFolder(root);
+}
+function filterTree(nodes, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return nodes;
+  const walk = (list) => list.flatMap((node) => {
+    if (node.kind === "story") {
+      return `${node.entry.title}/${node.entry.name}`.toLowerCase().includes(needle) ? [node] : [];
+    }
+    const children = walk(node.children);
+    return children.length > 0 ? [{ ...node, children }] : [];
+  });
+  return walk(nodes);
+}
+var keyOf = (node) => node.kind === "folder" ? `folder:${node.path}` : `story:${node.entry.id}`;
+function ancestorsOf(entry) {
+  const paths = /* @__PURE__ */ new Set();
+  if (!entry) return paths;
+  let path = "";
+  for (const label of entry.title.split("/")) {
+    path = path ? `${path}/${label}` : label;
+    paths.add(path);
+  }
+  return paths;
+}
+function StoryTree({ ctx, index }) {
+  const headingId = useId();
+  const [route, setRoute] = useRoute();
+  const [query, setQuery] = useState("");
+  const [folds, setFolds] = usePersistedState("fg-tree-open", {}, { 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 routeAncestors = useMemo(() => ancestorsOf(routed), [routed]);
+  const filtering = query.trim() !== "";
+  const isOpen = (path) => filtering || (folds[path] ?? routeAncestors.has(path));
+  const rows = [];
+  const collect = (nodes, parent) => {
+    for (const node of nodes) {
+      rows.push({ key: keyOf(node), node, parent });
+      if (node.kind === "folder" && isOpen(node.path)) collect(node.children, keyOf(node));
+    }
+  };
+  collect(shown, null);
+  const active = rows.some((row) => row.key === focusKey) ? focusKey : rows[0]?.key ?? null;
+  const openIds = new Set(ctx.trials.map((trial) => trial.instrumentName));
+  const setOpen = (path, open) => {
+    if (!filtering) setFolds((prev) => ({ ...prev, [path]: open }));
+  };
+  const moveTo = (key) => {
+    if (key === void 0) return;
+    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);
+    setRoute(entry.id);
+  };
+  const onKeyDown = (event) => {
+    const at = rows.findIndex((row2) => row2.key === active);
+    const row = rows[at];
+    if (!row) return;
+    const { node } = row;
+    switch (event.key) {
+      case "ArrowDown":
+        moveTo(rows[at + 1]?.key);
+        break;
+      case "ArrowUp":
+        moveTo(rows[at - 1]?.key);
+        break;
+      case "Home":
+        moveTo(rows[0]?.key);
+        break;
+      case "End":
+        moveTo(rows[rows.length - 1]?.key);
+        break;
+      case "ArrowRight":
+        if (node.kind !== "folder") break;
+        if (!isOpen(node.path)) setOpen(node.path, true);
+        else if (rows[at + 1]?.parent === row.key) moveTo(rows[at + 1]?.key);
+        break;
+      case "ArrowLeft":
+        if (node.kind === "folder" && isOpen(node.path) && !filtering) setOpen(node.path, false);
+        else moveTo(row.parent ?? void 0);
+        break;
+      case "Enter":
+      case " ":
+        if (node.kind === "folder") setOpen(node.path, !isOpen(node.path));
+        else activate(node.entry, event.metaKey || event.ctrlKey);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const itemProps = (node, level) => {
+    const key = keyOf(node);
+    return {
+      role: "treeitem",
+      "aria-level": level,
+      tabIndex: key === active ? 0 : -1,
+      ref: (el) => {
+        if (el) items.current.set(key, el);
+        else items.current.delete(key);
+      },
+      // A folder item contains its children, so their focus bubbles through it.
+      onFocus: (event) => {
+        if (event.target === event.currentTarget) setFocusKey(key);
+      }
+    };
+  };
+  const renderNodes = (nodes, level) => nodes.map((node) => {
+    if (node.kind === "folder") {
+      const open = isOpen(node.path);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...itemProps(node, level),
+          "aria-expanded": open,
+          "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 }) }),
+            open ? /* @__PURE__ */ jsx("div", { role: "group", className: "fg-tree__group", children: renderNodes(node.children, level + 1) }) : null
+          ]
+        },
+        keyOf(node)
+      );
+    }
+    const { entry } = node;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...itemProps(node, level),
+        href: `#/${encodeURIComponent(entry.id)}`,
+        "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;
+          event.preventDefault();
+          setFocusKey(keyOf(node));
+          activate(entry, event.metaKey || event.ctrlKey);
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "fg-tree__label", children: entry.name })
+      },
+      keyOf(node)
+    );
+  });
+  return /* @__PURE__ */ jsxs("section", { className: "fg-tree", children: [
+    /* @__PURE__ */ jsx("h2", { id: headingId, className: "fg-tree__heading", children: "Stories" }),
+    route && !routed ? /* @__PURE__ */ jsxs("p", { className: "fg-route-miss", children: [
+      "No story ",
+      /* @__PURE__ */ jsx("code", { children: route })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        className: "fg-tree__filter",
+        "aria-label": "Filter stories",
+        value: query,
+        onChange: (event) => setQuery(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { role: "tree", "aria-labelledby": headingId, className: "fg-tree__items", onKeyDown, children: renderNodes(shown, 1) })
+  ] });
+}
+
+// src/shell/answers.ts
+var KEPT_CONFIGS = 50;
+var UNANSWERED = stableStringify({ hidden: [], errors: {} });
+function createAnswerBook() {
+  const byConfig = /* @__PURE__ */ new Map();
+  let errors = {};
+  const listeners = /* @__PURE__ */ new Set();
+  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 });
+      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();
+    },
+    hidden(path, config) {
+      const hidden = byConfig.get(stableStringify(storyConfig(config)))?.hidden;
+      return hidden?.some((h) => path === h || path.startsWith(`${h}.`)) ?? false;
+    },
+    errors: (path) => errors[path] ?? [],
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  };
+}
+
+// src/shell/readyKey.ts
+var readyKey = (ready) => stableStringify({ schema: ready.schema, layout: ready.layout, viewport: ready.viewport });
+var START_TIMEOUT_MS = 1e4;
+function closeLink(link) {
+  if (!link.current) return;
+  clearTimeout(link.current.timer);
+  link.current.disconnect();
+  link.current.channel.close();
+  link.current = null;
+}
+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 labGlobals2 = useContext(StoryGlobalsContext);
+  const pins = ctx.config?.[GLOBALS_KEY];
+  const globals = useMemo(() => effectiveGlobals(labGlobals2, pins), [labGlobals2, pins]);
+  const trialId = useContext(TrialIdContext);
+  const frames = useContext(TrialFramesContext);
+  const [overrides] = useCssOverrides();
+  const src = `${frameUrl}#${entry.id}`;
+  const iframeRef = useRef(null);
+  const link = useRef(null);
+  const latest = useRef({ ...props, globals, overrides });
+  latest.current = { ...props, globals, overrides };
+  const [fault, setFault] = useState(null);
+  const init = (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 });
+  };
+  const receive = (current, msg) => {
+    const { ctx: live, answers, onReady } = latest.current;
+    switch (msg.type) {
+      case "ready": {
+        clearTimeout(current.timer);
+        setFault(null);
+        for (const [name, value] of Object.entries(latest.current.overrides)) {
+          current.channel.send({ type: "vars.set", name, value });
+        }
+        const key = readyKey(msg);
+        current.awaiting = key;
+        onReady(latest.current.entry, msg);
+        if (current.awaiting === key && key === latest.current.descriptionKey) init(current);
+        break;
+      }
+      case "setConfig":
+        if (!isGlobalsPath(msg.path)) live.setConfig(msg.path, msg.value);
+        break;
+      case "setState":
+        if (current.sent) current.sent.state = msg.state;
+        live.setState(msg.state);
+        break;
+      case "answers":
+        answers.record(msg.answers);
+        break;
+      case "vars":
+        if (trialId) frames?.report(trialId, msg.vars);
+        break;
+      case "fault":
+        if (msg.phase === "render" && msg.seq !== void 0 && msg.seq < current.inputs) break;
+        clearTimeout(current.timer);
+        setFault({ phase: msg.phase, message: msg.message });
+        break;
+    }
+  };
+  const onLoad = () => {
+    closeLink(link);
+    const target = iframeRef.current?.contentWindow;
+    if (!target) return;
+    const { port1, port2 } = new MessageChannel();
+    const timer = setTimeout(() => setFault({ phase: null, message: `Frame did not start: ${src}` }), START_TIMEOUT_MS);
+    const channel = openChannel(port1, {
+      onMismatch: (mismatch) => {
+        clearTimeout(timer);
+        setFault({ phase: "protocol", message: mismatchMessage(mismatch) });
+      }
+    });
+    const disconnect = frames && trialId ? frames.connect(trialId, channel.send) : () => {
+    };
+    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(() => {
+    const current = link.current;
+    if (!current) return;
+    if (current.awaiting !== null) {
+      if (current.awaiting === descriptionKey) init(current);
+      return;
+    }
+    const sent = current.sent;
+    if (!sent) return;
+    let input = false;
+    const config = storyConfig(ctx.config, sent.config);
+    if (config !== sent.config) {
+      sent.config = config;
+      current.channel.send({ type: "config", config });
+      current.inputs += 1;
+      input = true;
+    }
+    if (ctx.state !== sent.state) {
+      sent.state = ctx.state;
+      current.channel.send({ type: "state", state: ctx.state });
+      current.inputs += 1;
+      input = true;
+    }
+    if (globals !== sent.globals && stableStringify(globals) !== stableStringify(sent.globals)) {
+      sent.globals = globals;
+      current.channel.send({ type: "globals", globals });
+      current.inputs += 1;
+      input = true;
+    }
+    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
+  ] });
+}
+function storyInstrument(options) {
+  const { entry, ready, answers, frameUrl, onReady, globals = {} } = options;
+  const config = withGlobals(
+    ready ? schemaFromDescription(ready.schema, answers) : f.schema({}),
+    globals
+  );
+  const descriptionKey = ready ? readyKey(ready) : null;
+  return {
+    name: entry.id,
+    title: `${entry.title} / ${entry.name}`,
+    config,
+    defaultConfig: () => config.defaults(),
+    initialState: () => null,
+    render: (ctx) => /* @__PURE__ */ jsx(
+      FrameView,
+      {
+        entry,
+        frameUrl,
+        answers,
+        onReady,
+        descriptionKey,
+        ctx
+      }
+    ),
+    ...ready?.viewport ? { stage: { size: { width: ready.viewport.width, height: ready.viewport.height } } } : {}
+  };
+}
+
+// src/shell/useStoryRegistry.ts
+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 [readies, setReadies] = useState(() => /* @__PURE__ */ new Map());
+  const [revisions, setRevisions] = useState(() => /* @__PURE__ */ new Map());
+  const onReady = useCallback((entry, ready) => {
+    setReadies((prev) => {
+      const held = prev.get(entry.id);
+      if (held && readyKey(held) === readyKey(ready)) return prev;
+      return new Map(prev).set(entry.id, ready);
+    });
+  }, []);
+  useEffect(() => {
+    const ids = new Set(index.map((entry) => entry.id));
+    setReadies((prev) => pruned(prev, ids));
+    setRevisions((prev) => pruned(prev, ids));
+  }, [index]);
+  const committed = useRef({ built: /* @__PURE__ */ new Map(), books: /* @__PURE__ */ new Map(), list: [] });
+  const cache = useMemo(() => {
+    const previous = committed.current;
+    const built = /* @__PURE__ */ new Map();
+    const books = /* @__PURE__ */ new Map();
+    const list = index.map((entry) => {
+      const ready = readies.get(entry.id);
+      const revision = revisions.get(entry.id) ?? 0;
+      const entryKey = stableStringify(entry);
+      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 : {
+        entryKey,
+        ready,
+        frameUrl,
+        globals,
+        revision,
+        instrument: storyInstrument({ entry, ready, answers, frameUrl, onReady, globals })
+      };
+      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]);
+  useLayoutEffect(() => {
+    committed.current = cache;
+  }, [cache]);
+  useEffect(() => {
+    const offs = [...cache.books].map(
+      ([id, book]) => book.subscribe(() => setRevisions((prev) => new Map(prev).set(id, (prev.get(id) ?? 0) + 1)))
+    );
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [cache.books]);
+  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;
+}
+function RouteOpener({ index }) {
+  const lab = useLabContext();
+  const [route] = useRoute();
+  const handled = useRef(null);
+  useEffect(() => {
+    if (route === null || handled.current === route || !index.some((entry) => entry.id === route)) return;
+    handled.current = route;
+    if (!lab.trials.some((trial) => trial.instrumentName === route)) lab.addTrial(route);
+  }, [route, index, lab]);
+  return null;
+}
+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 [labValues, setLabValues] = useState(() => labGlobals(declarations, void 0));
+  const reportLabValues = useCallback(
+    (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
+    []
+  );
+  const labChrome = useMemo(
+    () => [
+      { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
+      ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
+      ...config?.labChrome ?? []
+    ],
+    [index, declarations, config?.labChrome]
+  );
+  const first = index[0];
+  if (!first) {
+    return /* @__PURE__ */ jsxs("div", { className: "fg-empty", children: [
+      /* @__PURE__ */ jsx("p", { className: "fg-empty__title", children: "No stories found" }),
+      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(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsxs(
+    Lab,
+    {
+      title: "weaselforge",
+      instruments: registry.instruments,
+      defaultInstrument: initialStory(index, first.id),
+      storageKey: storageKey ?? "weaselforge",
+      ...storage ? { storage } : {},
+      labChrome,
+      chrome: TRIAL_CHROME,
+      addTrial: false,
+      ...config?.controls ? { controls: config.controls } : {},
+      children: [
+        /* @__PURE__ */ jsx(RouteOpener, { index }),
+        /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
+      ]
+    }
+  ) }) });
+}
+function mountWorkshop({ container, ...props }) {
+  const target = container ?? document.getElementById("root");
+  if (!target) throw new Error("mountWorkshop: no container given and no #root element");
+  const root = createRoot(target);
+  let current = props;
+  root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
+  return {
+    setIndex(index) {
+      current = { ...current, index };
+      root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));
+    },
+    unmount: () => root.unmount()
+  };
+}
+
+export { StoryGlobalsContext, Workshop, mountWorkshop, useStoryRegistry };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map