@weasel-js/forge 1.9.1 → 1.9.2

package/dist/shell/index.js

@@ -1,9 +1,9 @@
 import { parseRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, formatRoute, PLAYHEAD_PARAM, reservedParams } from '../chunk-CJX3W5HY.js';
 import { isIndexId, indexId, libraryOf, indexEntries, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-JVRHBI3V.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useNearViewport, IN_VIEW_MARGIN, useTrialClock, TrialHost } from '../chunk-QN3HJQXZ.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-QN3HJQXZ.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-NI5FYQHW.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useNearViewport, IN_VIEW_MARGIN, useTrialClock, TrialHost } from '../chunk-BGOHALHO.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-BGOHALHO.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-GZPQMGXJ.js';
 import { loadStories, indexRenderOf } from '../chunk-Q2EZXJFE.js';
 import '../chunk-L5XM5VKB.js';
 import '../chunk-HRGPFQBW.js';
@@ -11,10 +11,10 @@ import '../chunk-MGQWCPYE.js';
 import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-KJGXJD3U.js';
 import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
 import num from '@weasel-js/theme/numeric.module.css';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useId, useContext, useSyncExternalStore } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, 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 { InfoIcon, ToggleBar, Checkbox, Dialog, DisclosureMark, Button as Button$1, TuneIcon, Callout, Slider, Transport } from '@weasel-js/ui';
+import { InfoIcon, ToggleBar, Checkbox, Dialog, TOKEN_CATEGORIES, Icon, DisclosureMark, Button as Button$1, Callout, Slider, Transport, SearchIcon } from '@weasel-js/ui';
 import { TOKEN_MANIFEST, THEME_SOURCES, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
 import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
@@ -100,14 +100,14 @@ var A11Y_SECTION = {
 
 // src/shell/storyChanges.ts
 function createStoryChanges() {
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
   return {
     subscribe(listener) {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
+      listeners2.add(listener);
+      return () => listeners2.delete(listener);
     },
     emit(file) {
-      for (const listener of [...listeners]) listener(file);
+      for (const listener of [...listeners2]) listener(file);
     }
   };
 }
@@ -221,6 +221,79 @@ function applyScaleEdits(definition, edits, selection) {
   for (const [holder, byKey] of writes) for (const [key, value] of byKey) holder[key] = value;
   return { ok: true, definition: root };
 }
+var ICONS = {
+  color: "drop",
+  type: "type",
+  size: "measure",
+  motion: "curveEaseInOut",
+  depth: "layers",
+  other: "more"
+};
+var PANEL = ".fg-css-vars";
+var HOST = ".lk-sidebar-section, .lk-panel-tile";
+var MANUAL = ["wheel", "touchmove", "keydown"];
+function scrollerOf(el) {
+  for (let at = el.parentElement; at; at = at.parentElement) {
+    const { overflowY } = getComputedStyle(at);
+    if ((overflowY === "auto" || overflowY === "scroll") && at.scrollHeight > at.clientHeight) return at;
+  }
+  return null;
+}
+function readLine(panel) {
+  return panel.querySelector(".fg-css-vars__controls")?.getBoundingClientRect().bottom ?? panel.getBoundingClientRect().top;
+}
+function sectionsOf(panel) {
+  return [...panel.querySelectorAll("[data-token-category]")];
+}
+function SectionJump() {
+  const ref = useRef(null);
+  const [present, setPresent] = useState([]);
+  const [current, setCurrent] = useState(null);
+  const held = useRef(false);
+  useEffect(() => {
+    const root = ref.current?.closest(HOST) ?? document.body;
+    const read = () => {
+      const panel = root.querySelector(PANEL);
+      const sections = panel ? sectionsOf(panel) : [];
+      setPresent(sections.map((s) => s.dataset.tokenCategory));
+      if (!panel || held.current) return;
+      const line = readLine(panel) + 1;
+      let top = sections[0]?.dataset.tokenCategory;
+      for (const s of sections) if (s.getBoundingClientRect().top <= line) top = s.dataset.tokenCategory;
+      setCurrent(top ?? null);
+    };
+    const release = () => {
+      held.current = false;
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { childList: true, subtree: true });
+    document.addEventListener("scroll", read, { capture: true, passive: true });
+    for (const type of MANUAL) document.addEventListener(type, release, { capture: true, passive: true });
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("scroll", read, { capture: true });
+      for (const type of MANUAL) document.removeEventListener(type, release, { capture: true });
+    };
+  }, []);
+  const items = TOKEN_CATEGORIES.map(({ id, title }) => ({
+    value: id,
+    label: /* @__PURE__ */ jsx(Icon, { name: ICONS[id], size: 14 }),
+    ariaLabel: title,
+    tooltip: title,
+    disabled: !present.includes(id)
+  }));
+  const jump = (next) => {
+    const panel = ref.current?.closest(HOST)?.querySelector(PANEL);
+    const target = next && panel?.querySelector(`[data-token-category="${next}"]`);
+    const scroller = panel && scrollerOf(panel);
+    if (!panel || !target || !scroller) return;
+    held.current = true;
+    setCurrent(next);
+    scroller.scrollTop += target.getBoundingClientRect().top - readLine(panel);
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: "fg-css-vars__jump", children: /* @__PURE__ */ jsx(ToggleBar, { ariaLabel: "Jump to section", variant: "flat", size: "sm", items, value: current, onChange: jump }) });
+}
 var TABS = [
   { value: "theme", label: "Theme" },
   { value: "story", label: "Story" }
@@ -391,19 +464,32 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
   );
   return /* @__PURE__ */ jsxs("div", { className: "fg-css-vars", children: [
     /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__controls", children: [
-      /* @__PURE__ */ jsx(
-        ToggleBar$1,
-        {
-          ariaLabel: "Variables",
-          variant: "flat",
-          items: TABS,
-          value: tab,
-          onChange: (next) => {
-            if (next) setTab(next);
+      /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__bar", children: [
+        /* @__PURE__ */ jsx(
+          ToggleBar$1,
+          {
+            ariaLabel: "Variables",
+            variant: "flat",
+            size: "sm",
+            items: TABS,
+            value: tab,
+            onChange: (next) => {
+              if (next) setTab(next);
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ jsx(Input, { "aria-label": "Filter", placeholder: "Filter by name or value", value: filter, onChange: setFilter }),
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: "fg-css-vars__filter",
+            "aria-label": "Filter",
+            placeholder: "Filter",
+            value: filter,
+            onChange: setFilter,
+            leadingAdornment: /* @__PURE__ */ jsx(SearchIcon, { size: 12 })
+          }
+        )
+      ] }),
       tab === "theme" && (unsaved.length > 0 || notice) ? /* @__PURE__ */ jsxs("div", { className: "fg-css-vars__save", children: [
         unsaved.length > 0 ? /* @__PURE__ */ jsx(Button$1, { variant: "primary", size: "sm", loading: saving, disabled: saving, onClick: () => void save(), children: "Save scales to theme" }) : null,
         notice ? /* @__PURE__ */ jsx(
@@ -420,6 +506,7 @@ function CssVarsPanel({ globals = NO_GLOBALS, themeApi } = {}) {
       TokenPanel,
       {
         tokens: shown,
+        namePrefix: "--wzl-",
         onChange: write,
         scales,
         onScaleChange,
@@ -444,13 +531,18 @@ function FocusedCssVars() {
 var CSS_VARS_SECTION = {
   id: "fg-css-vars",
   region: "aside",
-  item: { title: "CSS Vars", body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
+  item: { title: "CSS Vars", actions: /* @__PURE__ */ jsx(SectionJump, {}), body: /* @__PURE__ */ jsx(FocusedCssVars, {}) }
 };
 
 // src/shell/breadcrumb.ts
+function crumbs(title, name) {
+  const segments = title.split("/");
+  const steps = segments.map((label, i) => ({ label, path: segments.slice(0, i + 1).join("/") }));
+  steps.push({ label: name, path: null });
+  return steps.filter((step, i) => i === 0 || step.label.toLowerCase() !== "index");
+}
 function breadcrumb(title, name) {
-  const segments = [...title.split("/"), name].filter((segment, i) => i === 0 || segment.toLowerCase() !== "index");
-  return segments.join(" > ");
+  return crumbs(title, name).map((step) => step.label).join(" > ");
 }
 var GLOBALS = "$globals";
 function leaves(shape, prefix = "") {
@@ -771,12 +863,23 @@ function GlobalsToolbar({ declarations }) {
     top.map(([key, declaration]) => /* @__PURE__ */ jsx("div", { className: "fg-globals__item", children: /* @__PURE__ */ jsx(GlobalSelect, { name: key, declaration, values, set }) }, key)),
     top.map(([key, declaration]) => {
       const nested = entries.filter(([, other]) => other.under === key);
-      return nested.length > 0 ? /* @__PURE__ */ jsx(NestedGlobals, { label: declaration.label, nested, values, set }, key) : null;
+      return nested.length > 0 ? /* @__PURE__ */ jsx(
+        NestedGlobals,
+        {
+          label: declaration.label,
+          icon: declaration.icon ?? "tune",
+          nested,
+          values,
+          set
+        },
+        key
+      ) : null;
     })
   ] });
 }
 function NestedGlobals({
   label,
+  icon,
   nested,
   values,
   set
@@ -794,7 +897,7 @@ function NestedGlobals({
         ariaLabel: `More ${label} settings`,
         pressed: open,
         onClick: () => setOpen((was) => !was),
-        children: /* @__PURE__ */ jsx(TuneIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -884,6 +987,18 @@ function revealTrial(trialId, root = document) {
   return true;
 }
 
+// src/shell/treeReveal.ts
+var listeners = /* @__PURE__ */ new Set();
+function revealInTree(path) {
+  for (const listener of listeners) listener(path);
+}
+function onRevealInTree(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
 // src/shell/tree/buildTree.ts
 function sortFolder(nodes) {
   const folders = nodes.filter((n) => n.kind === "folder");
@@ -1124,6 +1239,43 @@ function StoryTree({ ctx, index }) {
     }
     activate(node.index, another);
   };
+  const scrollTo = useRef(null);
+  const reveal = (path) => {
+    const find = (nodes, at) => {
+      for (const node2 of nodes) {
+        if (node2.kind !== "folder") continue;
+        if (node2.path === at) return node2;
+        const inner = find(node2.children, at);
+        if (inner) return inner;
+      }
+      return void 0;
+    };
+    const nodesOf = (v) => v === "tree" ? tree : componentNodes(v === "gallery" ? galleries : components);
+    const order = [view, ...VIEWS.map((item) => item.value).filter((v) => v !== view && enabled(v))];
+    let node;
+    let where = view;
+    for (let at = path; at && !node; at = at.includes("/") ? at.slice(0, at.lastIndexOf("/")) : "") {
+      for (const v of order) {
+        node = find(nodesOf(v), at);
+        if (node) {
+          where = v;
+          break;
+        }
+      }
+    }
+    const found = node;
+    if (!found) return;
+    if (where !== view) setView(where);
+    setQuery("");
+    const segments = found.path.split("/");
+    const above = segments.slice(0, -1).map((_, i) => segments.slice(0, i + 1).join("/"));
+    setFolds((prev) => ({ ...prev, ...Object.fromEntries(above.map((p) => [p, true])) }));
+    setFocusKey(keyOf(found));
+    scrollTo.current = keyOf(found);
+    if (found.index) openFolder(found, false);
+    else setFolds((prev) => ({ ...prev, [found.path]: true }));
+  };
+  useEffect(() => onRevealInTree(reveal));
   const onKeyDown = (event) => {
     const at = rows.findIndex((row2) => row2.key === active);
     const row = rows[at];
@@ -1170,6 +1322,10 @@ function StoryTree({ ctx, index }) {
       ref: (el) => {
         if (el) items.current.set(key, el);
         else items.current.delete(key);
+        if (el && scrollTo.current === key) {
+          scrollTo.current = null;
+          el.scrollIntoView({ block: "nearest" });
+        }
       },
       // A folder item contains its children, so their focus bubbles through it.
       onFocus: (event) => {
@@ -1254,6 +1410,7 @@ function StoryTree({ ctx, index }) {
       {
         ariaLabel: "Sidebar view",
         variant: "flat",
+        size: "sm",
         items: views,
         value: view,
         onChange: (next) => {
@@ -1268,7 +1425,7 @@ function StoryTree({ ctx, index }) {
         {
           isSelected: !hidden[library],
           onChange: (on) => setHidden((prev) => ({ ...prev, [library]: !on })),
-          children: /* @__PURE__ */ jsx(LibraryBadge2, { library })
+          children: /* @__PURE__ */ jsx("span", { className: "fg-tree__library", children: /* @__PURE__ */ jsx(LibraryBadge2, { library }) })
         },
         library
       ))
@@ -1292,7 +1449,7 @@ var KEPT_CONFIGS = 50;
 var UNANSWERED = stableStringify({ hidden: [], errors: {} });
 function createAnswerBook() {
   const byConfig = /* @__PURE__ */ new Map();
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
   const held = /* @__PURE__ */ new Map();
   const keyOf2 = (config) => stableStringify(storyConfig(config));
   const answerFor = (config) => byConfig.get(keyOf2(config));
@@ -1306,7 +1463,7 @@ function createAnswerBook() {
         const oldest = byConfig.keys().next().value;
         if (oldest !== void 0) byConfig.delete(oldest);
       }
-      if (changed && held.has(answers.configKey)) for (const fn of listeners) fn();
+      if (changed && held.has(answers.configKey)) for (const fn of listeners2) fn();
     },
     hold(config) {
       const key = keyOf2(config);
@@ -1323,9 +1480,9 @@ function createAnswerBook() {
     },
     errors: (path, config) => answerFor(config)?.errors[path] ?? [],
     subscribe(fn) {
-      listeners.add(fn);
+      listeners2.add(fn);
       return () => {
-        listeners.delete(fn);
+        listeners2.delete(fn);
       };
     }
   };
@@ -1368,6 +1525,27 @@ function TrialTransport({ trialId }) {
   const clock = useTrialClock(trialId);
   return clock ? /* @__PURE__ */ jsx(TransportBar, { clock }) : null;
 }
+function Crumbs({ entry }) {
+  const steps = crumbs(entry.title, entry.name);
+  return /* @__PURE__ */ jsx("span", { className: "fg-crumbs", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    i > 0 ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__sep", "aria-hidden": "true", children: "\u203A" }) : null,
+    step.path === null ? /* @__PURE__ */ jsx("span", { className: "fg-crumbs__here", children: step.label }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "fg-crumbs__step",
+        title: `Show ${step.label} in the story tree`,
+        onPointerDown: (event) => event.stopPropagation(),
+        onClick: () => revealInTree(step.path),
+        children: step.label
+      }
+    )
+  ] }, step.path ?? `${step.label}:${i}`)) });
+}
+function crumbTitle(entry) {
+  const title = breadcrumb(entry.title, entry.name);
+  return { title, renderTitle: (shown) => shown === title ? /* @__PURE__ */ jsx(Crumbs, { entry }) : shown };
+}
 function IndexTrial({ bundle, setup, config }) {
   const lab = useLabContext();
   const trialId = useContext(TrialIdContext);
@@ -1410,7 +1588,7 @@ function documentInstrument(options) {
   const initialState = loaded.kind === "story" ? loaded.story.initialState : null;
   return {
     name: entry.id,
-    title: breadcrumb(entry.title, entry.name),
+    ...crumbTitle(entry),
     config,
     defaultConfig: () => config.defaults(),
     initialState: (c) => initialState?.(c) ?? null,
@@ -1433,7 +1611,7 @@ function pendingInstrument(options) {
   const config = withGlobals(f.schema({}), globals);
   return {
     name: entry.id,
-    title: breadcrumb(entry.title, entry.name),
+    ...crumbTitle(entry),
     config,
     defaultConfig: () => config.defaults(),
     initialState: () => null,
@@ -1711,7 +1889,7 @@ function storyInstrument(options) {
   const viewport = ready ? ready.viewport : entry.viewport;
   return {
     name: entry.id,
-    title: breadcrumb(entry.title, entry.name),
+    ...crumbTitle(entry),
     config,
     defaultConfig: () => config.defaults(),
     initialState: () => null,