@weasel-js/forge 1.5.1 → 1.5.2

package/dist/shell/index.js

@@ -1,11 +1,13 @@
 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 { 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 { TOKEN_MANIFEST } from '@weasel-js/theme';
-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';
 
 var NO_FRAME = { send: null, vars: [], audit: null, a11y: null, capture: null, size: null };
 function createTrialFrames() {
@@ -156,6 +158,29 @@ var TABS = [
   { value: "story", label: "Story" }
 ];
 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(/^--/, "");
@@ -169,6 +194,7 @@ function CssVarsPanel() {
     {},
     { scope: "lab" }
   );
+  const [edited, setEdited] = usePersistedState("fg-css-vars-scales", {}, { scope: "lab" });
   const [tab, setTab] = useState("theme");
   const [filter, setFilter] = useState("");
   const tokens = useMemo(() => {
@@ -192,6 +218,18 @@ function CssVarsPanel() {
     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) => {
@@ -203,6 +241,24 @@ 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]
@@ -210,7 +266,7 @@ function CssVarsPanel() {
   return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars", children: [
     /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__controls", children: [
       /* @__PURE__ */ jsx(
-        ToggleBar,
+        ToggleBar$1,
         {
           ariaLabel: "Variables",
           variant: "flat",
@@ -223,7 +279,17 @@ function CssVarsPanel() {
       ),
       /* @__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 })
+    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,
+        scales,
+        onScaleChange,
+        collapsed: folds,
+        onCollapsedChange
+      }
+    )
   ] });
 }
 function FocusedCssVars() {
@@ -241,6 +307,206 @@ var CSS_VARS_SECTION = {
   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);
@@ -271,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", { layout: "inline", pack: "pairs" });
+  const group = f.group(leaves2).label("").section("Globals", { layout: "inline", pack: "pairs" });
   return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group });
 }
 var RECORD = "fg-globals";
@@ -395,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();
@@ -411,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) {
@@ -508,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
           ]
         },
@@ -516,7 +797,7 @@ function StoryTree({ ctx, index }) {
       );
     }
     const { entry } = node;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "a",
       {
         ...itemProps(node, level),
@@ -529,7 +810,10 @@ function StoryTree({ ctx, index }) {
           setFocusKey(keyOf(node));
           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)
     );
@@ -540,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",
       {
@@ -942,7 +1250,8 @@ 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 = {};
 function initialStory(index, fallback) {
@@ -960,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 [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),
     []
@@ -972,6 +1297,11 @@ 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 }) }] : [],
@@ -990,6 +1320,7 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
     Lab,
     {
       title: "weaselforge",
+      density: "roomy",
       instruments: registry.instruments,
       defaultInstrument: initialStory(index, first.id),
       storageKey: storageKey ?? "weaselforge",
@@ -1001,6 +1332,15 @@ function Workshop({ index, frameUrl, config, stories = [], storageKey, storage }
       ...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 })
       ]
     }