@weasel-js/forge 1.10.1 → 1.11.1

package/dist/shell/index.js

@@ -1,38 +1,55 @@
-import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-DKWHGSBZ.js';
+import { parseRoute, formatRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, PLAYHEAD_PARAM, reservedParams } from '../chunk-LTTEILXY.js';
 import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
-import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-BIAEGWGJ.js';
+import { TITLE_LIBRARIES, isIndexId, indexId, indexEntries, librariesFrom, LibrariesContext, createKitRoot, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-BKPDKUDN.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-E2FHBDNQ.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-E2FHBDNQ.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-DFKCLZKS.js';
-import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-AP3DRQLI.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-FZNABWJC.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-FZNABWJC.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-7BQPHMA2.js';
+import { loadStories, indexRenderOf, useNearViewport, IN_VIEW_MARGIN } from '../chunk-JTCUIJPZ.js';
 import '../chunk-L5XM5VKB.js';
 import '../chunk-ZAWXMUGZ.js';
-import '../chunk-GB6PRJET.js';
-import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-FL2MUPUL.js';
-import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
+import '../chunk-KEQBGDUZ.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-GH5RE5X5.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, ToggleBar as ToggleBar$1, Input, TokenPanel, inferTokenType, refitScale } from '@weasel-js/labkit';
 import num from '@weasel-js/theme/numeric.module.css';
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useId, useContext, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createRoot } from 'react-dom/client';
 import { createEmitter } from '@weasel-js/registry';
 import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
-import { InfoIcon, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport, SearchIcon } from '@weasel-js/ui';
-import { themeAxes, weaselTheme, TOKEN_MANIFEST, THEME_SOURCES, resolveTheme, isColorModePreference, isByAxis } from '@weasel-js/theme';
+import { Slider } from '@weasel-js/ui/components/Slider';
+import { Transport } from '@weasel-js/ui/components/Timeline';
+import { TOKEN_MANIFEST, themeAxes, weaselTheme, THEME_SOURCES, resolveTheme, isColorModePreference, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
 import { useLatest, historyKey, createHistory, swapOp, isPlainObject } from '@weasel-js/core';
+import { Button as Button$1 } from '@weasel-js/ui/components/Button';
+import { Checkbox } from '@weasel-js/ui/components/Checkbox';
+import { Icon } from '@weasel-js/ui/components/Icon';
+import { ToggleBar } from '@weasel-js/ui/components/ToggleBar';
+import { TOKEN_CATEGORIES } from '@weasel-js/ui/components/TokenPanel';
 import { useResolvedColorMode } from '@weasel-js/theme/react';
+import { formatShortcut } from '@weasel-js/ui/components/ToolPalette';
+import { Dialog } from '@weasel-js/ui/components/Dialog';
+import { Callout } from '@weasel-js/ui/components/Callout';
+import { pref } from '@weasel-js/prefs';
+import { DisclosureMark } from '@weasel-js/ui/components/Disclosure';
 
-function Finding({ finding }) {
-  return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", children: [
+function pointAt(point, nodes) {
+  const enter = (event) => {
+    event.stopPropagation();
+    point(nodes);
+  };
+  return { onMouseOver: enter, onFocus: enter, onMouseLeave: () => point(null), onBlur: () => point(null) };
+}
+function Finding({ finding, point }) {
+  return /* @__PURE__ */ jsxs("li", { className: "fg-a11y__finding", ...pointAt(point, finding.nodes), 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(",")}`)) })
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__nodes", children: finding.nodes.map((node) => /* @__PURE__ */ jsx("li", { ...pointAt(point, [node]), children: /* @__PURE__ */ jsx("code", { children: node.target.join(" ") }) }, `${finding.id}:${node.target.join(",")}`)) })
   ] });
 }
-function Findings({ title, findings }) {
+function Findings({ title, findings, point }) {
   if (findings.length === 0) return null;
   return /* @__PURE__ */ jsxs("section", { className: "fg-a11y__group", children: [
     /* @__PURE__ */ jsxs("h3", { className: `fg-a11y__group-title ${num.numeric}`, children: [
@@ -41,7 +58,7 @@ function Findings({ title, findings }) {
       findings.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__findings", children: findings.map((finding) => /* @__PURE__ */ jsx(Finding, { finding }, finding.id)) })
+    /* @__PURE__ */ jsx("ul", { className: "fg-a11y__findings", children: findings.map((finding) => /* @__PURE__ */ jsx(Finding, { finding, point }, finding.id)) })
   ] });
 }
 function A11yPanel() {
@@ -60,6 +77,13 @@ function A11yPanel() {
     ran.current = audit;
     start(audit);
   }, [audit, start]);
+  const send = frame.send;
+  const [pointed, setPointed] = useState(null);
+  useEffect(() => {
+    if (!send || !pointed) return;
+    send({ type: "a11y.highlight", targets: pointed.map((node) => node.target) });
+    return () => send({ type: "a11y.highlight", targets: [] });
+  }, [send, pointed]);
   const rerun = () => {
     if (audit) start(audit);
   };
@@ -82,8 +106,8 @@ function A11yPanel() {
         outcome.report.passes,
         " passes"
       ] }),
-      /* @__PURE__ */ jsx(Findings, { title: "Violations", findings: outcome.report.violations }),
-      /* @__PURE__ */ jsx(Findings, { title: "Needs review", findings: outcome.report.incomplete })
+      /* @__PURE__ */ jsx(Findings, { title: "Violations", findings: outcome.report.violations, point: setPointed }),
+      /* @__PURE__ */ jsx(Findings, { title: "Needs review", findings: outcome.report.incomplete, point: setPointed })
     ] }) : null
   ] });
 }
@@ -340,12 +364,30 @@ function missingInstrument(id, globals = {}) {
   };
 }
 var ICONS = {
-  color: "drop",
-  type: "type",
-  size: "measure",
-  motion: "curveEaseInOut",
-  depth: "layers",
-  other: "more"
+  color: (
+    /* @icon */
+    "ui:drop"
+  ),
+  type: (
+    /* @icon */
+    "ui:type"
+  ),
+  size: (
+    /* @icon */
+    "core:measure"
+  ),
+  motion: (
+    /* @icon */
+    "ui:curveEaseInOut"
+  ),
+  depth: (
+    /* @icon */
+    "ui:layers"
+  ),
+  other: (
+    /* @icon */
+    "ui:more"
+  )
 };
 var PANEL = ".fg-css-vars";
 var HOST = ".lk-sidebar-section, .lk-panel-tile";
@@ -636,6 +678,24 @@ function useThemeSave({ trialId, globals, themeApi, scales, overrides, history:
     save
   };
 }
+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 useStoryTokens(vars) {
+  const [showUnused, setShowUnused] = usePersistedState("fg-css-vars-unused", false, { scope: "lab" });
+  const tokens = useMemo(
+    () => vars.flatMap(({ name, value, used }) => {
+      if (!used && !showUnused) return [];
+      const known = MANIFEST.get(name);
+      return [{ name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value }];
+    }),
+    [vars, showUnused]
+  );
+  const emptyText = vars.length > 0 && !showUnused ? "The story uses no variables." : "The story\u2019s frame has reported no variables.";
+  return { tokens, showUnused, setShowUnused, emptyText };
+}
 var AXES = themeAxes(weaselTheme);
 function useThemeTokens(globals, vars) {
   const selection = useTrialSelection(AXES, globals);
@@ -714,13 +774,13 @@ var TABS = [
   { value: "theme", label: "Theme" },
   { value: "story", label: "Story" }
 ];
-var MANIFEST = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
+var MANIFEST2 = new Map(TOKEN_MANIFEST.map((token) => [token.name, token]));
 var literal = (v) => typeof v === "number";
 var SCALE_SOURCES = Object.entries(THEME_SOURCES[THEME_NAME]?.scales ?? {}).flatMap(([name, def]) => {
   if (!Array.isArray(def.steps)) return [];
   const steps = def.steps;
   const tokens = steps.map((step) => `${TOKEN_PREFIX}${name}-${step}`);
-  const group = MANIFEST.get(tokens[0] ?? "")?.group;
+  const group = MANIFEST2.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";
@@ -750,10 +810,6 @@ function standingScale(source, amounts) {
   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(/^--/, "");
-}
 var NO_GLOBALS = {};
 function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const trialId = useTrialId();
@@ -768,13 +824,8 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   const [tab, setTab] = useState("theme");
   const [filter, setFilter] = useState("");
   const themeTokens = useThemeTokens(globals, frame.vars);
-  const tokens = useMemo(() => {
-    if (tab === "theme") return themeTokens;
-    return frame.vars.map(({ name, value }) => {
-      const known = MANIFEST.get(name);
-      return { name, type: known?.type ?? inferTokenType(value), group: known?.group ?? groupOf(name), value };
-    });
-  }, [tab, frame.vars, themeTokens]);
+  const story = useStoryTokens(frame.vars);
+  const tokens = tab === "theme" ? themeTokens : story.tokens;
   const query = filter.trim().toLowerCase();
   const shown = tokens.map((token) => {
     const override = overrides[token.name];
@@ -866,27 +917,27 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
                   placeholder: "Filter",
                   value: filter,
                   onChange: setFilter,
-                  leadingAdornment: /* @__PURE__ */ jsx(SearchIcon, { size: 12 })
+                  leadingAdornment: /* @__PURE__ */ jsx(Icon, { name: (
+                    /* @icon */
+                    "ui:search"
+                  ), size: 12 })
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__steps", role: "group", "aria-label": "History", children: [
-                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Undo", variant: "ghost", size: "sm", disabled: !history2.canUndo, onClick: () => history2.step("undo"), children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: 14 }) }),
-                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Redo", variant: "ghost", size: "sm", disabled: !history2.canRedo, onClick: () => history2.step("redo"), children: /* @__PURE__ */ jsx(Icon, { name: "redo", size: 14 }) })
+                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Undo", variant: "ghost", size: "sm", disabled: !history2.canUndo, onClick: () => history2.step("undo"), children: /* @__PURE__ */ jsx(Icon, { name: (
+                  /* @icon */
+                  "core:undo"
+                ), size: 14 }) }),
+                /* @__PURE__ */ jsx(Button$1, { iconOnly: true, ariaLabel: "Redo", variant: "ghost", size: "sm", disabled: !history2.canRedo, onClick: () => history2.step("redo"), children: /* @__PURE__ */ jsx(Icon, { name: (
+                  /* @icon */
+                  "core:redo"
+                ), size: 14 }) })
               ] })
             ] }),
-            tab === "theme" && (pending || notice) ? /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
-              pending ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: () => void save(), children: "Save to theme" }) : null,
-              notice ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: `fg-css-vars__notice fg-css-vars__notice--${notice.tone}`,
-                  role: notice.tone === "error" ? "alert" : "status",
-                  children: notice.text
-                }
-              ) : null
-            ] }) : null
+            tab === "story" ? /* @__PURE__ */ jsx(Checkbox, { className: "fg-css-vars__unused", isSelected: story.showUnused, onChange: story.setShowUnused, children: "Show variables the story doesn\u2019t use" }) : null,
+            tab === "theme" ? /* @__PURE__ */ jsx(SaveRow, { pending, saving, notice, onSave: () => void save() }) : null
           ] }),
-          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("div", { className: "fg-css-vars__list", children: /* @__PURE__ */ jsx(
+          shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "fg-css-vars__empty", children: tokens.length > 0 ? "No variables match." : tab === "story" ? story.emptyText : "The story\u2019s frame has reported no variables." }) : /* @__PURE__ */ jsx("div", { className: "fg-css-vars__list", children: /* @__PURE__ */ jsx(
             TokenPanel,
             {
               tokens: shown,
@@ -903,6 +954,13 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
     )
   );
 }
+function SaveRow({ pending, saving, notice, onSave }) {
+  if (!pending && !notice) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
+    pending ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: onSave, children: "Save to theme" }) : null,
+    notice ? /* @__PURE__ */ jsx("p", { className: `fg-css-vars__notice fg-css-vars__notice--${notice.tone}`, role: notice.tone === "error" ? "alert" : "status", children: notice.text }) : null
+  ] });
+}
 function FocusedCssVars() {
   const { focusedTrialId, trials, instruments } = useLabContext();
   const labGlobals2 = useContext(StoryGlobalsContext);
@@ -920,6 +978,42 @@ var CSS_VARS_SECTION = {
   region: "aside",
   item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), fill: true, body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
+
+// src/shell/cssVars/cssVarsChrome.ts
+var RECORD = "fg-css-vars-shown";
+function cssVarsChrome(shown, toggle) {
+  return [
+    {
+      id: "fg-css-vars-toggle",
+      region: "header",
+      group: "story",
+      item: { icon: (
+        /* @icon */
+        "ui:typeBraces"
+      ), label: "CSS Vars panel", pressed: shown, onActivate: toggle }
+    },
+    ...shown ? [CSS_VARS_SECTION] : []
+  ];
+}
+function CssVarsChrome({ onChrome }) {
+  const [shown, setShown] = usePersistedState(RECORD, false, { scope: "lab" });
+  const chrome = useMemo(() => cssVarsChrome(shown, () => setShown((was) => !was)), [shown, setShown]);
+  useEffect(() => onChrome(chrome), [chrome, onChrome]);
+  return null;
+}
+var KEYS = { kind: "key", key: "i", mods: { mod: true } };
+function infoItem(open) {
+  return {
+    icon: (
+      /* @icon */
+      "ui:info"
+    ),
+    label: "Info",
+    shortcut: formatShortcut({ key: KEYS.key, mod: KEYS.mods.mod }),
+    keys: KEYS,
+    onActivate: open
+  };
+}
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
   const out = [];
@@ -1159,9 +1253,9 @@ function RoutePlayhead() {
   if (!trial || route === null) return null;
   return /* @__PURE__ */ jsx(PlayheadSync, { trialId: trial.id, route, appliedRef: applied }, `${trial.id} ${route}`);
 }
-var RECORD = "fg-globals";
+var RECORD2 = "fg-globals";
 function useLabGlobals(declarations) {
-  const [stored, setStored] = usePersistedState(RECORD, null, { scope: "lab" });
+  const [stored, setStored] = usePersistedState(RECORD2, null, { scope: "lab" });
   const values = useMemo(() => labGlobals(declarations, stored), [declarations, stored]);
   const set = useCallback(
     (key, value) => setStored((prev) => ({ ...labGlobals(declarations, prev), [key]: value })),
@@ -1193,7 +1287,8 @@ function GlobalsToolbar({ declarations }) {
         NestedGlobals,
         {
           label: declaration.label,
-          icon: declaration.icon ?? "tune",
+          icon: declaration.icon ?? /* @icon */
+          "core:tune",
           nested,
           values,
           set
@@ -1251,6 +1346,41 @@ function LabGlobals({
   useEffect(() => onChange(resolved), [resolved, onChange]);
   return null;
 }
+var leafPath = (n) => `globals.d${n}.v`;
+function globalsMenu(declarations, values, set) {
+  const entries = Object.entries(declarations);
+  if (entries.length === 0) return void 0;
+  const submenus = {};
+  const current = {};
+  const keys = /* @__PURE__ */ new Map();
+  entries.forEach(([key, declaration], n) => {
+    const options = labOptions(declaration, values);
+    submenus[`d${n}`] = pref.group(
+      declaration.label,
+      { v: pref.enum(declaration.label, declaration.default, options) },
+      { as: "menu" }
+    );
+    current[leafPath(n)] = values[key];
+    keys.set(leafPath(n), key);
+  });
+  return {
+    schema: pref.group("", { globals: pref.group("Globals", submenus, { as: "menu" }) }),
+    values: current,
+    onChange: (path, value) => {
+      const key = keys.get(path);
+      if (key !== void 0 && typeof value === "string") set(key, value);
+    }
+  };
+}
+function GlobalsMenus({
+  declarations,
+  onMenus
+}) {
+  const [values, set] = useLabGlobals(declarations);
+  const menus = useMemo(() => globalsMenu(declarations, values, set), [declarations, values, set]);
+  useEffect(() => onMenus(menus), [menus, onMenus]);
+  return null;
+}
 function KnobSync({ schema, config }) {
   const { setConfig } = useTrialState();
   const reading = useRef(true);
@@ -1427,14 +1557,27 @@ function filterComponents(rows, query) {
   }
   return out;
 }
+function parentOf(row, byPath) {
+  const segments = row.path.split("/");
+  for (let take = segments.length - 1; take > 0; take--) {
+    const parent = byPath.get(segments.slice(0, take).join("/"));
+    if (parent && parent.library === row.library) return parent;
+  }
+  return void 0;
+}
 function componentNodes(rows) {
   const root = [];
   const folders = /* @__PURE__ */ new Map();
+  const byPath = new Map(rows.map((row) => [row.path, row]));
+  const nodes = /* @__PURE__ */ new Map();
+  const subs = /* @__PURE__ */ new Map();
+  for (const row of rows) subs.set(row.path, []);
   for (const row of rows) {
-    const labels = row.label.split("/");
+    const parent = parentOf(row, byPath);
     const title = row.path.split("/");
-    let siblings = root;
-    let tag = row.library;
+    const labels = parent ? title.slice(parent.path.split("/").length) : row.label.split("/");
+    let siblings = parent ? subs.get(parent.path) : root;
+    let tag = parent ? void 0 : row.library;
     for (let i = 0; i < labels.length - 1; i++) {
       const path = title.slice(0, title.length - labels.length + i + 1).join("/");
       let folder = folders.get(path);
@@ -1446,14 +1589,22 @@ function componentNodes(rows) {
       siblings = folder.children;
       tag = void 0;
     }
-    siblings.push({
+    const node = {
       kind: "folder",
       label: labels[labels.length - 1],
       path: row.path,
       tag,
       ...row.index ? { index: row.index } : {},
-      children: row.entries.map((entry) => ({ kind: "story", entry }))
-    });
+      children: []
+    };
+    nodes.set(row.path, node);
+    siblings.push(node);
+  }
+  for (const row of rows) {
+    nodes.get(row.path).children = [
+      ...subs.get(row.path),
+      ...row.entries.map((entry) => ({ kind: "story", entry }))
+    ];
   }
   return foldGalleries(root);
 }
@@ -2303,26 +2454,21 @@ function RouteOpener() {
   }, [route, lab]);
   return null;
 }
-function useInfoShortcut(open) {
+function useDocumentTitle(title) {
   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]);
+    document.title = title;
+  }, [title]);
+}
+function NoStories({ stories }) {
+  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
+  ] });
 }
 function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies }) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
   const title = config?.title ?? DEFAULT_TITLE;
-  useEffect(() => {
-    document.title = title;
-  }, [title]);
+  useDocumentTitle(title);
   const [frames] = useState(createTrialFrames);
   const [clocks] = useState(createTrialClocks);
   const [pool, setPool] = useState(null);
@@ -2358,33 +2504,27 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
   const themeFor = config?.labTheme;
   const labTheme = useMemo(() => themeFor?.(labValues), [themeFor, labValues]);
   const [infoOpen, setInfoOpen] = useState(false);
-  useInfoShortcut(setInfoOpen);
   const reportLabValues = useCallback(
     (next) => setLabValues((prev) => stableStringify(prev) === stableStringify(next) ? prev : next),
     []
   );
-  const infoCommand = useMemo(
-    () => ({ icon: InfoIcon, label: "Info", shortcut: "\u2318I", onActivate: () => setInfoOpen(true) }),
-    []
-  );
+  const infoCommand = useMemo(() => infoItem(() => setInfoOpen(true)), []);
+  const showsCssVars = config?.cssVars !== false;
+  const [cssVarsChrome2, setCssVarsChrome] = useState([]);
   const labChrome = useMemo(
     () => [
       { id: "fg-stories", region: "sidebar", render: (ctx) => /* @__PURE__ */ jsx(StoryTree, { ctx, index }) },
-      ...config?.cssVars === false ? [] : [CSS_VARS_SECTION],
+      ...showsCssVars ? cssVarsChrome2 : [],
       A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       { id: "fg-info", region: "header", group: "story", item: infoCommand },
       ...config?.labChrome ?? []
     ],
-    [index, infoCommand, declarations, config?.cssVars, config?.labChrome]
+    [index, infoCommand, declarations, showsCssVars, cssVarsChrome2, config?.labChrome]
   );
+  const [menus, setMenus] = useState();
   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
-    ] });
-  }
+  if (!first) return /* @__PURE__ */ jsx(NoStories, { stories });
   return /* @__PURE__ */ jsx(LibrariesContext.Provider, { value: libraries, children: /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsxs(
     Lab,
     {
@@ -2397,6 +2537,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       ...storage ? { storage } : {},
       labChrome,
       addTrial: false,
+      ...menus ? { menus } : {},
       ...config?.controls ? { controls: config.controls } : {},
       ...config?.pages ? { pages: config.pages } : {},
       ...config?.path !== void 0 ? { path: config.path } : {},
@@ -2413,7 +2554,9 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
             onOpenChange: setInfoOpen
           }
         ),
-        /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
+        /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues }),
+        /* @__PURE__ */ jsx(GlobalsMenus, { declarations, onMenus: setMenus }),
+        showsCssVars ? /* @__PURE__ */ jsx(CssVarsChrome, { onChrome: setCssVarsChrome }) : null
       ]
     }
   ) }) }) }) }) }) });
@@ -2421,7 +2564,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
 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);
+  const root = createKitRoot(target, props.setup?.icons);
   const changes = createStoryChanges();
   let current = { ...props, changes };
   root.render(/* @__PURE__ */ jsx(Workshop, { ...current }));