@crewlethq/ui 0.11.0 → 0.13.0

package/dist/{chunk-6SDGRKQ7.js → chunk-HKGS67VG.js}

@@ -1,14 +1,14 @@
+import { Modal } from './chunk-CF6DTETT.js';
+import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { useListbox } from './chunk-6MU7HNB4.js';
-import { Modal } from './chunk-TEEJSTFG.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-C5AMKGN2.css';
-import { useId, useMemo } from 'react';
-import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import './CommandPalette-HBTNKHZQ.css';
+import { useId, useMemo, useRef, useEffect, useState } from 'react';
+import { ChevronLeftGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function CommandPalette(props) {
@@ -33,6 +33,8 @@ function Palette({
   onScopeChange,
   groupsScope,
   scopesLabel = "Search in",
+  step,
+  onHighlight,
   className,
   ...rest
 }) {
@@ -48,11 +50,33 @@ function Palette({
     onCommit: (at) => {
       const item = flat[at];
       if (!item) return;
-      item.onSelect();
-      onClose();
+      if (item.onSelect() !== false) onClose();
     },
     onClose
   });
+  const offeredNow = useRef(flat);
+  offeredNow.current = flat;
+  const highlight = useHighlightRest(
+    onHighlight ? (key) => onHighlight(key === null ? null : offeredNow.current.find((item) => item.id === key) ?? null) : void 0
+  );
+  const byPointer = useRef(false);
+  const restingKey = flat[listbox.active]?.id ?? null;
+  useEffect(() => {
+    const pointer = byPointer.current;
+    byPointer.current = false;
+    if (restingKey === null) highlight.now(null);
+    else if (pointer) highlight.rest(restingKey);
+    else highlight.now(restingKey);
+  }, [restingKey, highlight]);
+  const stepKey = step?.label ?? null;
+  const [shownStep, setShownStep] = useState(stepKey);
+  const [before, setBefore] = useState(0);
+  if (stepKey !== shownStep) {
+    setShownStep(stepKey);
+    if (shownStep === null) setBefore(listbox.active);
+    const start = step?.startAt === void 0 ? -1 : flat.findIndex((item) => item.id === step.startAt);
+    listbox.setActive(stepKey === null ? before : Math.max(start, 0));
+  }
   const tabId = (scopeId) => `${id}-scope-${scopeId}`;
   const panelId = `${id}-panel`;
   const current = scopes?.find((candidate) => candidate.id === scope);
@@ -62,17 +86,24 @@ function Palette({
     listbox.setActive(0);
   }
   function onKeyDown(event) {
+    if (step && !isComposing(event) && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      if (event.key === "Escape" || event.key === "Backspace" && query === "") {
+        event.preventDefault();
+        step.onBack();
+        return;
+      }
+    }
     if (listbox.onKeyDown(event)) return;
     if (!scopes || scopes.length === 0 || isComposing(event)) return;
     if (event.altKey || event.ctrlKey || event.metaKey) return;
-    let step = 0;
-    if (event.key === "Tab") step = event.shiftKey ? -1 : 1;
-    else if (query === "" && !event.shiftKey && event.key === "ArrowRight") step = 1;
-    else if (query === "" && !event.shiftKey && event.key === "ArrowLeft") step = -1;
-    if (step === 0) return;
+    let by = 0;
+    if (event.key === "Tab") by = event.shiftKey ? -1 : 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowRight") by = 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowLeft") by = -1;
+    if (by === 0) return;
     event.preventDefault();
     const at = scopes.findIndex((candidate) => candidate.id === scope);
-    const next = scopes[(at + step + scopes.length) % scopes.length];
+    const next = scopes[(at + by + scopes.length) % scopes.length];
     if (next) choose(next.id);
   }
   const active = listbox.active;
@@ -91,31 +122,49 @@ function Palette({
       className: cx("crewlet-palette", className),
       footerStart: footer,
       children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            appearance: "command",
-            containerClassName: "crewlet-palette__field",
-            leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
-            trailing: escapeHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, "aria-hidden": true, className: "crewlet-palette__escape", children: "Esc" }) : void 0,
-            value: query,
-            onChange: (event) => {
-              onQueryChange(event.target.value);
-              listbox.setActive(0);
-            },
-            onKeyDown,
-            placeholder,
-            role: "combobox",
-            "aria-label": label,
-            "aria-expanded": true,
-            "aria-controls": listbox.listId,
-            "aria-autocomplete": "list",
-            "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
-            "aria-describedby": current ? tabId(current.id) : void 0,
-            autoComplete: "off",
-            spellCheck: false
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-palette__bar", step && "is-step"), children: [
+          step ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-palette__step",
+              tabIndex: -1,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: step.onBack,
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "sm" }),
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: "Back from" }),
+                " ",
+                step.label
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              appearance: "command",
+              containerClassName: "crewlet-palette__field",
+              leading: step ? void 0 : /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+              trailing: escapeHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, "aria-hidden": true, className: "crewlet-palette__escape", children: "Esc" }) : void 0,
+              value: query,
+              onChange: (event) => {
+                onQueryChange(event.target.value);
+                listbox.setActive(0);
+              },
+              onKeyDown,
+              placeholder,
+              role: "combobox",
+              "aria-label": step ? step.label : label,
+              "aria-expanded": true,
+              "aria-controls": listbox.listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+              "aria-describedby": current ? tabId(current.id) : void 0,
+              autoComplete: "off",
+              spellCheck: false
+            }
+          )
+        ] }),
         scopes ? /* @__PURE__ */ jsx("div", { className: "crewlet-palette__scopes", role: "tablist", "aria-label": scopesLabel, children: scopes.map((candidate) => {
           const selected = candidate.id === scope;
           return /* @__PURE__ */ jsxs(
@@ -143,6 +192,7 @@ function Palette({
           {
             className: "crewlet-palette__results",
             ref: listbox.listRef,
+            onMouseLeave: () => highlight.now(null),
             ...scopes ? { id: panelId, role: "tabpanel", "aria-labelledby": current ? tabId(current.id) : void 0 } : {},
             children: [
               /* @__PURE__ */ jsx("div", { className: "crewlet-palette__lead", "aria-live": "polite", children: lead }),
@@ -187,11 +237,14 @@ function Palette({
                               className: "crewlet-listbox__option crewlet-palette__row",
                               role: "option",
                               "aria-selected": mine === active,
-                              onMouseEnter: listbox.optionHandlers(mine).onMouseEnter,
+                              onMouseEnter: () => {
+                                if (mine === active) highlight.rest(item.id);
+                                else byPointer.current = true;
+                                listbox.optionHandlers(mine).onMouseEnter();
+                              },
                               onMouseDown: (event) => event.preventDefault(),
                               onClick: () => {
-                                item.onSelect();
-                                onClose();
+                                if (item.onSelect() !== false) onClose();
                               },
                               children: [
                                 item.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__icon", "aria-hidden": "true", children: item.icon }) : null,

package/dist/chunk-IG75YMUN.js

@@ -0,0 +1,22 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+// src/utils/useMediaMatch.ts
+function useMediaMatch(query) {
+  const subscribe = useCallback(
+    (notify) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+      };
+      const list = window.matchMedia(query);
+      list.addEventListener("change", notify);
+      return () => list.removeEventListener("change", notify);
+    },
+    [query]
+  );
+  const read = useCallback(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
+    [query]
+  );
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+
+export { useMediaMatch };

package/dist/{chunk-JCNUQ3US.js → chunk-JDPAA2JU.js}

@@ -1,7 +1,7 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-4AZBTODT.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/chunk-KLIEPFEZ.js

@@ -0,0 +1,95 @@
+import { ThemeSwatch } from './chunk-MNFU2RNT.js';
+import { useHighlightRest } from './chunk-F73MC7EZ.js';
+import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ThemeGallery-NITASULQ.css';
+import { useId } from 'react';
+import { themeGroups, themeRegistry } from '@crewlethq/tokens';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ThemeGallery({
+  label = "Theme",
+  value,
+  onValueChange,
+  onPreview,
+  themes = themeRegistry,
+  groups = themeGroups,
+  columns = 3,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  const id = useId();
+  const sections = [
+    ...groups.map((group) => ({ group, items: themes.filter((theme) => theme.group === group.id) })),
+    { group: null, items: themes.filter((theme) => !groups.some((group) => group.id === theme.group)) }
+  ].filter((section) => section.items.length > 0);
+  const flat = sections.flatMap((section) => section.items);
+  const { buttons, onKeyDown, onFocusAt } = useRoving(
+    flat.length,
+    disabled ? null : (index2) => onValueChange(flat[index2].id)
+  );
+  const stop = tabStop(
+    flat.map(() => ({ disabled })),
+    flat.findIndex((theme) => theme.id === value)
+  );
+  const preview = useHighlightRest(onPreview ? (key) => onPreview(key) : void 0);
+  let index = -1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-theme-gallery", className),
+      style: { ...style, "--crewlet-theme-gallery-columns": columns },
+      onMouseLeave: () => preview.now(null),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "crewlet-theme-gallery__groups",
+          role: "radiogroup",
+          "aria-label": label,
+          "aria-disabled": disabled || void 0,
+          children: sections.map((section, position) => {
+            const headingId = `${id}-group-${position}`;
+            return /* @__PURE__ */ jsxs("div", { className: "crewlet-theme-gallery__group", children: [
+              section.group ? /* @__PURE__ */ jsx("span", { id: headingId, className: "crewlet-theme-gallery__heading", children: section.group.name }) : null,
+              /* @__PURE__ */ jsx("div", { className: "crewlet-theme-gallery__cards", children: section.items.map((theme) => {
+                index += 1;
+                const at = index;
+                const chosen = theme.id === value;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: (el) => {
+                      buttons.current[at] = el;
+                    },
+                    type: "button",
+                    role: "radio",
+                    "aria-checked": chosen,
+                    "aria-label": `${theme.name}, ${theme.tag}`,
+                    "aria-describedby": section.group ? headingId : void 0,
+                    tabIndex: at === stop ? 0 : -1,
+                    disabled,
+                    className: cx("crewlet-theme-gallery__card", chosen && "is-chosen"),
+                    onClick: () => onValueChange(theme.id),
+                    onFocus: () => onFocusAt(at),
+                    onKeyDown: (event) => onKeyDown(event, true),
+                    onMouseEnter: () => preview.rest(theme.id),
+                    children: [
+                      /* @__PURE__ */ jsx(ThemeSwatch, { swatch: theme.swatch, size: "card" }),
+                      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__name", children: theme.name })
+                    ]
+                  },
+                  theme.id
+                );
+              }) })
+            ] }, section.group?.id ?? "-");
+          })
+        }
+      )
+    }
+  );
+}
+
+export { ThemeGallery };

package/dist/{chunk-7LD6P32I.js → chunk-L3CTFFLZ.js}

@@ -1,8 +1,9 @@
+import { useMediaMatch } from './chunk-IG75YMUN.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AppShell-CEVLW4QG.css';
-import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
+import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -14,23 +15,6 @@ function useAppShell() {
   if (!shell) throw new Error("useAppShell must be called inside an <AppShell>.");
   return shell;
 }
-function useMediaMatch(query) {
-  const subscribe = useCallback(
-    (notify) => {
-      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
-      };
-      const list = window.matchMedia(query);
-      list.addEventListener("change", notify);
-      return () => list.removeEventListener("change", notify);
-    },
-    [query]
-  );
-  const read = useCallback(
-    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
-    [query]
-  );
-  return useSyncExternalStore(subscribe, read, () => false);
-}
 function AppShell({
   sidebar,
   topbar,

package/dist/{chunk-UG5ZMAXW.js → chunk-LELD5KPA.js}

@@ -1,7 +1,7 @@
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toaster-NVDCEIP5.css';
+import './Toaster-KZ7YE2HA.css';
 import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph, CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';

package/dist/chunk-MNFU2RNT.js

@@ -0,0 +1,74 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ThemeSwatch-4DL457ZB.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var PROPERTY = {
+  frame: "--crewlet-swatch-frame",
+  sheet: "--crewlet-swatch-sheet",
+  card: "--crewlet-swatch-card",
+  raised: "--crewlet-swatch-raised",
+  hairline: "--crewlet-swatch-hairline",
+  text: "--crewlet-swatch-text",
+  muted: "--crewlet-swatch-muted",
+  accent: "--crewlet-swatch-accent",
+  onAccent: "--crewlet-swatch-on-accent",
+  info: "--crewlet-swatch-info",
+  warning: "--crewlet-swatch-warning",
+  danger: "--crewlet-swatch-danger",
+  success: "--crewlet-swatch-success"
+};
+var STATES = ["info", "warning", "danger", "success"];
+function paint(colours) {
+  const style = {};
+  for (const key of Object.keys(PROPERTY)) style[PROPERTY[key]] = colours[key];
+  return style;
+}
+function Half({ colours, size }) {
+  if (size === "chip") {
+    return /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__half", style: paint(colours), children: /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__dot" }) });
+  }
+  const pane = size === "pane";
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__half", style: paint(colours), children: [
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__rail", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__rail-row is-current" }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__rail-row" }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__rail-row" }),
+      pane ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__rail-row" }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__rail-row" })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__sheet", children: [
+      pane ? /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__title" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__card", children: pane ? STATES.map((state) => /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__item", children: [
+        /* @__PURE__ */ jsx("span", { className: `crewlet-theme-swatch__state crewlet-theme-swatch__state--${state}` }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__line" }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__muted" })
+      ] }, state)) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__line" }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__action" }),
+          STATES.map((state) => /* @__PURE__ */ jsx("span", { className: `crewlet-theme-swatch__state crewlet-theme-swatch__state--${state}` }, state))
+        ] })
+      ] }) }),
+      pane ? /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-swatch__actions", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__action", children: /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__label" }) }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-swatch__secondary" })
+      ] }) : null
+    ] })
+  ] });
+}
+function ThemeSwatch({ swatch, size = "card", mode, label, className, ...rest }) {
+  const halves = mode ? [swatch[mode]] : [swatch.dark, swatch.light];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-theme-swatch", `crewlet-theme-swatch--${size}`, className),
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      children: halves.map((colours, index) => /* @__PURE__ */ jsx(Half, { colours, size }, index))
+    }
+  );
+}
+
+export { ThemeSwatch };

package/dist/{chunk-S3BCVWTU.js → chunk-MY374UUD.js}

@@ -1,4 +1,4 @@
-import { useMemo, useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
+import { useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { flushSync } from 'react-dom';
 
 // src/Tree/model.ts
@@ -506,14 +506,18 @@ function layoutConnectors(layout, shape = "elbow") {
   }
   return out;
 }
-function useTreeState(forest, selected) {
+function useTreeState(forest, selected, { defaultExpanded = "all", expanded: held, onExpandedChange } = {}) {
   const model = useMemo(() => createTreeModel(forest), [forest]);
-  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const [toggled, setToggled] = useState(() => /* @__PURE__ */ new Set());
   const expanded = useMemo(() => {
-    const out = treeAllExpandable(model);
-    for (const id of collapsed) out.delete(id);
-    return out;
-  }, [model, collapsed]);
+    const expandable = treeAllExpandable(model);
+    if (held) return new Set([...held].filter((id) => expandable.has(id)));
+    if (defaultExpanded === "all") {
+      for (const id of toggled) expandable.delete(id);
+      return expandable;
+    }
+    return new Set([...toggled].filter((id) => expandable.has(id)));
+  }, [model, toggled, held, defaultExpanded]);
   const rows = useMemo(() => treeVisible(model, expanded), [model, expanded]);
   const [wanted, setActive] = useState(null);
   const active = useMemo(() => {
@@ -525,34 +529,48 @@ function useTreeState(forest, selected) {
     }
     return treeFirst(model);
   }, [wanted, selected, model, rows]);
-  const toggle = useCallback((id) => {
-    setCollapsed((was) => {
-      const next = new Set(was);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
+  const current = useRef({ model, expanded, held, defaultExpanded, onExpandedChange });
+  current.current = { model, expanded, held, defaultExpanded, onExpandedChange };
+  const commit = useCallback((next) => {
+    const now = current.current;
+    now.onExpandedChange?.(next);
+    if (now.held) return;
+    const all = treeAllExpandable(now.model);
+    setToggled((was) => {
+      const kept = new Set(was);
+      for (const id of all) {
+        const differs = now.defaultExpanded === "all" ? !next.has(id) : next.has(id);
+        if (differs) kept.add(id);
+        else kept.delete(id);
+      }
+      return kept;
     });
   }, []);
-  const current = useRef({ model, collapsed });
-  current.current = { model, collapsed };
-  const expandAll = useCallback(() => setCollapsed(/* @__PURE__ */ new Set()), []);
+  const toggle = useCallback(
+    (id) => {
+      const next = new Set(current.current.expanded);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      commit(next);
+    },
+    [commit]
+  );
+  const expandAll = useCallback(() => commit(treeAllExpandable(current.current.model)), [commit]);
   const collapseAll = useCallback(() => {
     const { model: shown } = current.current;
-    const next = treeAllExpandable(shown);
-    shown.roots.forEach((root) => next.delete(root));
-    setCollapsed(next);
-  }, []);
-  const open2 = useCallback((id) => {
-    const { model: shown, collapsed: closed } = current.current;
-    const hidden = treeAncestors(shown, id).filter((ancestor) => closed.has(ancestor));
-    if (hidden.length === 0) return false;
-    setCollapsed((was) => {
-      const next = new Set(was);
-      hidden.forEach((ancestor) => next.delete(ancestor));
-      return next;
-    });
-    return true;
-  }, []);
+    const tops = new Set(shown.roots.filter((root) => treeAllExpandable(shown).has(root)));
+    commit(tops);
+  }, [commit]);
+  const open2 = useCallback(
+    (id) => {
+      const { model: shown, expanded: now } = current.current;
+      const hidden = treeAncestors(shown, id).filter((ancestor) => !now.has(ancestor));
+      if (hidden.length === 0) return false;
+      commit(/* @__PURE__ */ new Set([...now, ...hidden]));
+      return true;
+    },
+    [commit]
+  );
   const buffer = useRef({ text: "", at: 0 });
   const typed = (event, from, now) => {
     if (!isTypeAheadKey(event, buffer.current, now)) return void 0;

package/dist/{chunk-K5Q2DK3P.js → chunk-NXDEPUVG.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-EBBAAQDY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PDUZO35I.js → chunk-O2ZDZZS7.js}

@@ -12,6 +12,9 @@ function Popover({
   align = "start",
   side = "bottom",
   width = "auto",
+  alignOffset,
+  sideOffset = LAYER_GAP,
+  initialFocus,
   role = "dialog",
   label,
   className,
@@ -29,8 +32,12 @@ function Popover({
   const container = useLayerContainer();
   const isControlled = useRef(controlled !== void 0);
   const report = useRef(onOpenChange);
+  const shift = useRef(alignOffset);
+  const start = useRef(initialFocus);
   isControlled.current = controlled !== void 0;
   report.current = onOpenChange;
+  shift.current = alignOffset;
+  start.current = initialFocus;
   const setOpen = useCallback((next, reason) => {
     if (!isControlled.current) setUncontrolled(next);
     report.current?.(next, reason);
@@ -52,8 +59,10 @@ function Popover({
     const rect = at.getBoundingClientRect();
     box.style.width = width === "match" ? `${rect.width}px` : "";
     const own = box.getBoundingClientRect();
+    const asked = shift.current;
+    const offset = typeof asked === "function" ? asked(box, at) : asked ?? 0;
     const local = {
-      x: (align === "end" ? rect.right - own.width : rect.left) - (inHost ? host.x : 0),
+      x: (align === "end" ? rect.right - own.width : rect.left) + offset - (inHost ? host.x : 0),
       y: rect.top - (inHost ? host.y : 0),
       width: rect.width,
       height: rect.height
@@ -69,18 +78,18 @@ function Popover({
       close("anchor-gone");
       return;
     }
-    const asked = width === "match" ? rect.width : void 0;
+    const matched = width === "match" ? rect.width : void 0;
     const spot = placePopup(
       local,
       { width: own.width, height: own.height },
       bounds,
-      LAYER_GAP,
+      sideOffset,
       side === "top" ? "above" : "below"
     );
     setPlace(
-      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === asked ? was : { left: spot.left, top: spot.top, side: spot.side, width: asked }
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === matched ? was : { left: spot.left, top: spot.top, side: spot.side, width: matched }
     );
-  }, [align, close, container, side, width]);
+  }, [align, close, container, side, sideOffset, width]);
   useLayoutEffect(() => {
     if (!open) return;
     position();
@@ -104,7 +113,7 @@ function Popover({
   useEffect(() => {
     if (!placed || role !== "dialog") return;
     const box = panel.current;
-    if (box && !box.contains(document.activeElement)) (focusables(box)[0] ?? box).focus();
+    if (box && !box.contains(document.activeElement)) (start.current?.() ?? focusables(box)[0] ?? box).focus();
   }, [placed, role]);
   const toggle = useCallback(() => {
     if (open) close("trigger");