@crewlethq/ui 0.12.0 → 0.14.0

package/dist/{chunk-SEFMO2EV.js → chunk-IXUU5DLZ.js}

@@ -1,7 +1,7 @@
-import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-4ANVLHUY.css';
+import './Select-2P7AWUE4.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
@@ -32,6 +32,7 @@ var Select = forwardRef(function Select2({
   renderOption,
   renderMultiLabel,
   emptyMessage = "No matches",
+  onHighlight,
   ...native
 }, ref) {
   const generatedId = useId();
@@ -89,6 +90,7 @@ var Select = forwardRef(function Select2({
       renderOption,
       renderMultiLabel,
       emptyMessage,
+      onHighlight,
       describedBy: native["aria-describedby"],
       required: native.required,
       ariaRequired: native["aria-required"],
@@ -166,6 +168,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
   renderOption,
   renderMultiLabel,
   emptyMessage,
+  onHighlight,
   describedBy,
   required,
   ariaRequired,
@@ -205,6 +208,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     return out;
   }, [offered]);
   const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const tickAtEnd = useMemo(() => flat.some((option) => option.leading !== void 0), [flat]);
   const close = useCallback((returnFocus) => {
     setOpen(false);
     setQuery("");
@@ -274,6 +278,21 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
     else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
   }, [listbox.active, flat.length, open]);
+  const offeredNow = useRef(flat);
+  offeredNow.current = flat;
+  const highlight = useHighlightRest(
+    onHighlight ? (key) => onHighlight(key === null ? null : offeredNow.current.find((option) => String(option.value) === key) ?? null) : void 0
+  );
+  const byPointer = useRef(false);
+  const resting = open ? flat[listbox.active] : void 0;
+  const restingKey = resting ? String(resting.value) : 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 position = useCallback(() => {
     const at = trigger.current;
     const box = panel.current;
@@ -362,6 +381,18 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
   const activeId = open && listbox.active >= 0 ? listbox.optionId(listbox.active) : void 0;
   const comboOnTrigger = !searchable;
   const requiredForAria = ariaRequired ?? required;
+  const optionHandlers = (at) => {
+    const handlers = listbox.optionHandlers(at);
+    return {
+      ...handlers,
+      onMouseEnter: () => {
+        const option = flat[at];
+        if (at === listbox.active && option) highlight.rest(String(option.value));
+        else byPointer.current = true;
+        handlers.onMouseEnter();
+      }
+    };
+  };
   let index = -1;
   const rows = groups.map((group, position2) => {
     const items = group.items.map((option) => {
@@ -369,6 +400,14 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       const at = index;
       const selected = isChosen(option.value);
       const highlighted = at === listbox.active;
+      const tick = /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx("crewlet-select__option-tick", tickAtEnd && "crewlet-select__option-tick--end"),
+          "aria-hidden": "true",
+          children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null
+        }
+      );
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -384,13 +423,19 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
             highlighted && "is-highlight",
             option.disabled && "is-disabled"
           ),
-          ...option.disabled ? {} : listbox.optionHandlers(at),
+          ...option.disabled ? {} : optionHandlers(at),
           children: renderOption ? renderOption(option, { active: highlighted, selected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-tick", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null }),
+            tickAtEnd ? null : tick,
+            option.leading !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-leading", "aria-hidden": "true", children: option.leading }) : null,
             /* @__PURE__ */ jsxs("span", { className: "crewlet-select__option-body", children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-label", children: option.label }),
               option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-desc", children: option.description }) : null
-            ] })
+            ] }),
+            option.hint !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.hint })
+            ] }) : null,
+            tickAtEnd ? tick : null
           ] })
         },
         String(option.value)
@@ -423,6 +468,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       ),
       role: "presentation",
       onPointerDown: (event) => event.stopPropagation(),
+      onMouseLeave: () => highlight.now(null),
       children: [
         searchable ? /* @__PURE__ */ jsxs("div", { className: "crewlet-select__search", children: [
           /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
@@ -504,7 +550,10 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
             onClick: () => open ? close(false) : setOpen(true),
             onKeyDown,
             children: [
-              renderTrigger ? renderTrigger(single, { open }) : /* @__PURE__ */ jsx("span", { className: cx("crewlet-select__label", !hasValue && "is-placeholder"), children: label }),
+              renderTrigger ? renderTrigger(single, { open }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                !multiple && single?.leading !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__leading", "aria-hidden": "true", children: single.leading }) : null,
+                /* @__PURE__ */ jsx("span", { className: cx("crewlet-select__label", !hasValue && "is-placeholder"), children: label })
+              ] }),
               /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
             ]
           }

package/dist/{chunk-ZHOM65MI.js → chunk-JCO3SIST.js}

@@ -1,5 +1,5 @@
 import { Tag } from './chunk-LOECRMHA.js';
-import { useListbox } from './chunk-6MU7HNB4.js';
+import { useListbox } from './chunk-F73MC7EZ.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { isComposing } from './chunk-R25RGPUB.js';

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-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");

package/dist/{chunk-5WEVLIB6.js → chunk-RZ7RGECB.js}

@@ -1,4 +1,4 @@
-import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-S3BCVWTU.js';
+import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
 import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-2PZBIHRV.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-WEIINZPA.js → chunk-SBRE7IML.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
-import { SegmentedControl } from './chunk-EBBAAQDY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -32,11 +32,12 @@ function StoredThemeSwitcher({
 function ThemeRow({
   value,
   onChange,
-  label = "Theme",
+  label = "Mode",
   lightLabel = "Light",
   systemLabel = "Follow the system",
   darkLabel = "Dark",
   size = "sm",
+  fill,
   className
 }) {
   return /* @__PURE__ */ jsx(
@@ -45,6 +46,7 @@ function ThemeRow({
       label,
       semantics: "radio",
       size,
+      fill,
       className,
       value,
       onValueChange: onChange,
@@ -93,6 +95,7 @@ function DensityRow({
   normalMark = "M",
   comfortableMark = "L",
   size = "sm",
+  fill,
   className
 }) {
   return /* @__PURE__ */ jsx(
@@ -101,6 +104,7 @@ function DensityRow({
       label,
       semantics: "radio",
       size,
+      fill,
       className,
       value,
       onValueChange: onChange,

package/dist/{chunk-TEEJSTFG.js → chunk-TFMJH2E6.js}

@@ -4,7 +4,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-BNT3TDV2.css';
+import './Modal-RQAYGG4L.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-IVFJD7WY.js → chunk-UCCC7YVZ.js}

@@ -1,6 +1,7 @@
+import { KeyChip } from './chunk-FYTIJM2T.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SidebarNav-X5NLZNWA.css';
+import './SidebarNav-KF66MLOM.css';
 import { useId, useState } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -66,7 +67,7 @@ function NavItem({
   }
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__icon", "aria-hidden": true, children: icon }) : null,
-    lead ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__lead", children: lead }) : null,
+    lead ? /* @__PURE__ */ jsx(KeyChip, { className: "crewlet-nav-item__lead", children: lead }) : null,
     lead ? " " : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
       label,