@estiva-app/ui 0.10.1 → 0.12.0

package/dist/index.js

@@ -419,9 +419,17 @@ var typeStyles = {
   error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1", typeStyles[type], className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
     leadingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
-    label && /* @__PURE__ */ jsx11("span", { className: "text-chip whitespace-nowrap signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
+    label && // A chip given a `max-w-*` cuts a long label with an ellipsis instead
+    // of growing past it — Ship's project chip on an issue row
+    // (2026-09-09). Clipped sideways only: `overflow-x-clip`, not
+    // `truncate`, because `truncate` is `overflow: hidden` on both axes and
+    // the label's line box (11px under Signal) is tighter than its glyphs —
+    // the screenshot diff caught every descender cut off. `clip` is the
+    // one overflow that leaves the other axis visible. A chip with no cap
+    // draws exactly as before.
+    /* @__PURE__ */ jsx11("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
     trailingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
@@ -459,10 +467,35 @@ function triggerDisabled(trigger) {
   return !!(props.disabled || props.disabledReason);
 }
 
+// src/ScrollArea.tsx
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var BAR = "flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0";
+var THUMB = "rounded-full bg-border-strong";
+function ScrollArea({ orientation = "vertical", className, viewportClassName, contentClassName, children }) {
+  const vertical = orientation !== "horizontal";
+  const horizontal = orientation !== "vertical";
+  return /* @__PURE__ */ jsxs7(BaseScrollArea.Root, { className: cn("relative min-h-0 min-w-0", className), children: [
+    /* @__PURE__ */ jsx12(
+      BaseScrollArea.Viewport,
+      {
+        className: cn(
+          "h-full w-full outline-none data-[has-overflow-x]:overscroll-x-contain data-[has-overflow-y]:overscroll-y-contain",
+          viewportClassName
+        ),
+        children: /* @__PURE__ */ jsx12(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
+      }
+    ),
+    vertical && /* @__PURE__ */ jsx12(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5"), children: /* @__PURE__ */ jsx12(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
+    horizontal && /* @__PURE__ */ jsx12(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5"), children: /* @__PURE__ */ jsx12(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
+    vertical && horizontal && /* @__PURE__ */ jsx12(BaseScrollArea.Corner, {})
+  ] });
+}
+
 // src/SectionLabel.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       className: cn(
@@ -475,10 +508,10 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var MenuContext = createContext(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: cn(
@@ -508,7 +541,7 @@ var VIEWPORT_PAD2 = 8;
 var HOVER_OPEN_DELAY = 0;
 var HOVER_CLOSE_DELAY = 150;
 function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange, actionsRef, children, className }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     BaseMenu.Root,
     {
       open,
@@ -516,7 +549,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
       actionsRef,
       modal: false,
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           BaseMenu.Trigger,
           {
             render: trigger,
@@ -526,7 +559,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             closeDelay: HOVER_CLOSE_DELAY
           }
         ),
-        /* @__PURE__ */ jsx13(BaseMenu.Portal, { children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(BaseMenu.Portal, { children: /* @__PURE__ */ jsx14(
           BaseMenu.Positioner,
           {
             side: "bottom",
@@ -534,13 +567,13 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             sideOffset: GAP3,
             collisionPadding: VIEWPORT_PAD2,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx14(
               BaseMenu.Popup,
               {
                 "data-interactive": true,
-                className: cn("min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none", className),
-                render: /* @__PURE__ */ jsx13(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx13(MenuContext.Provider, { value: { openOnHover }, children })
+                className: cn("min-w-[180px] outline-none", className),
+                render: /* @__PURE__ */ jsx14(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx14(ScrollArea, { viewportClassName: "max-h-[calc(var(--available-height)_-_1rem)]", contentClassName: "flex flex-col [&>[role=separator]]:mx-0", children: /* @__PURE__ */ jsx14(MenuContext.Provider, { value: { openOnHover }, children }) })
               }
             )
           }
@@ -556,20 +589,20 @@ function MenuSub({ label, leading, selected, children, className }) {
       '[@estiva-app/ui] Menu: `openOnHover` and `MenuSub` cannot be used together \u2014 leaving the submenu panel strands the menu open. Open this menu on a press instead. See Menu.mdx, "Hover-opened menus".'
     );
   }
-  return /* @__PURE__ */ jsxs7(BaseMenu.SubmenuRoot, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs8(BaseMenu.SubmenuRoot, { children: [
+    /* @__PURE__ */ jsx14(
       BaseMenu.SubmenuTrigger,
       {
         openOnHover: true,
         delay: 0,
         closeDelay: 150,
         nativeButton: true,
-        render: /* @__PURE__ */ jsx13("button", { type: "button" }),
+        render: /* @__PURE__ */ jsx14("button", { type: "button" }),
         className: menuItemClassName({ size: "default", selected }),
-        children: /* @__PURE__ */ jsx13(MenuItemBody, { label, leading, submenu: true })
+        children: /* @__PURE__ */ jsx14(MenuItemBody, { label, leading, submenu: true })
       }
     ),
-    /* @__PURE__ */ jsx13(BaseMenu.Portal, { children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(BaseMenu.Portal, { children: /* @__PURE__ */ jsx14(
       BaseMenu.Positioner,
       {
         side: "inline-end",
@@ -577,7 +610,7 @@ function MenuSub({ label, leading, selected, children, className }) {
         sideOffset: GAP3,
         collisionPadding: VIEWPORT_PAD2,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx13(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx13(MenuPanel, {}), children })
+        children: /* @__PURE__ */ jsx14(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx14(MenuPanel, {}), children })
       }
     ) })
   ] });
@@ -609,25 +642,25 @@ function menuItemClassName({ size, selected, className }) {
   );
 }
 function MenuItemBody({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected }) {
-  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx13(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx13(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    leading && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center", children: leading }),
-    children ?? /* @__PURE__ */ jsxs7("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx13("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx13("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx14(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx14(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    leading && /* @__PURE__ */ jsx14("span", { className: "flex shrink-0 items-center", children: leading }),
+    children ?? /* @__PURE__ */ jsxs8("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__PURE__ */ jsx14("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx14("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
     ] }),
     (edge || hint) && // One grid cell holding both, right-aligned: the slot is as wide as
     // the wider of the two and never changes, so revealing the hint moves
     // nothing. No transition here either — the hint switches on the same
     // :hover / `selected` as the fill, in the same frame.
-    /* @__PURE__ */ jsxs7("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-      edge && /* @__PURE__ */ jsx13("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
-      hint && /* @__PURE__ */ jsx13("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
+    /* @__PURE__ */ jsxs8("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+      edge && /* @__PURE__ */ jsx14("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
+      hint && /* @__PURE__ */ jsx14("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
     ] })
   ] });
 }
 function MenuItem({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }) {
-  const body = /* @__PURE__ */ jsx13(
+  const body = /* @__PURE__ */ jsx14(
     MenuItemBody,
     {
       label,
@@ -645,13 +678,13 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
   const rowClassName = menuItemClassName({ size, selected, className });
   if (!useContext(MenuContext)) {
-    return /* @__PURE__ */ jsx13("button", { type: "button", className: rowClassName, ...props, children: body });
+    return /* @__PURE__ */ jsx14("button", { type: "button", className: rowClassName, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     BaseMenu.Item,
     {
       nativeButton: true,
-      render: /* @__PURE__ */ jsx13("button", { type: "button" }),
+      render: /* @__PURE__ */ jsx14("button", { type: "button" }),
       className: rowClassName,
       ...props,
       children: body
@@ -659,33 +692,33 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx13(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
+  return /* @__PURE__ */ jsxs8("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+    /* @__PURE__ */ jsx14(Kbd, { children: "\u21A9 Enter" }),
+    target && /* @__PURE__ */ jsx14("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
   const inMenu = useContext(MenuContext) !== null;
-  const heading = /* @__PURE__ */ jsx13("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx13(SectionLabel, { className: "text-text-secondary", children: label }) });
+  const heading = /* @__PURE__ */ jsx14("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx14(SectionLabel, { className: "text-text-secondary", children: label }) });
   if (!inMenu) {
-    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs7(BaseMenu.Group, { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx13(BaseMenu.GroupLabel, { render: heading }),
+  return /* @__PURE__ */ jsxs8(BaseMenu.Group, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx14(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx13("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx14("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function InputChip({ label, leading, onRemove, className }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: cn(
@@ -701,9 +734,9 @@ function InputChip({ label, leading, onRemove, className }) {
         className
       ),
       children: [
-        leading && /* @__PURE__ */ jsx14("span", { className: "flex shrink-0 items-center", children: leading }),
-        /* @__PURE__ */ jsx14("span", { className: "text-caption font-medium text-text-primary", children: label }),
-        onRemove && /* @__PURE__ */ jsx14(
+        leading && /* @__PURE__ */ jsx15("span", { className: "flex shrink-0 items-center", children: leading }),
+        /* @__PURE__ */ jsx15("span", { className: "text-caption font-medium text-text-primary", children: label }),
+        onRemove && /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -713,7 +746,7 @@ function InputChip({ label, leading, onRemove, className }) {
             },
             className: "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary",
             "aria-label": `Remove ${label}`,
-            children: /* @__PURE__ */ jsx14(IconX2, { size: 10, stroke: 1.5 })
+            children: /* @__PURE__ */ jsx15(IconX2, { size: 10, stroke: 1.5 })
           }
         )
       ]
@@ -802,16 +835,16 @@ function ChipInput({
       }
     }
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs9(
       "div",
       {
         ref: wrapperRef,
         className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         onClick: () => inputRef.current?.focus(),
         children: [
-          value.map((o) => /* @__PURE__ */ jsx14(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
-          /* @__PURE__ */ jsx14(
+          value.map((o) => /* @__PURE__ */ jsx15(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
+          /* @__PURE__ */ jsx15(
             "input",
             {
               ref: inputRef,
@@ -833,7 +866,7 @@ function ChipInput({
       }
     ),
     showDropdown && anchorRect && createPortal(
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "div",
         {
           className: "fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
@@ -846,7 +879,7 @@ function ChipInput({
             }),
             width: anchorRect.width
           },
-          children: matches.map((o, i) => /* @__PURE__ */ jsx14(
+          children: matches.map((o, i) => /* @__PURE__ */ jsx15(
             MenuItem,
             {
               size: "tall",
@@ -874,9 +907,26 @@ function ChipInput({
 import { useCallback, useRef as useRef2 } from "react";
 
 // src/Divider.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-function Divider({ orientation = "horizontal", className }) {
-  return /* @__PURE__ */ jsx15(
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal", label, tone = "default", className }) {
+  if (label && orientation === "horizontal") {
+    const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-label": label,
+        className: cn("flex shrink-0 items-center gap-2 mx-3", className),
+        children: [
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx16("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       role: "separator",
@@ -887,15 +937,15 @@ function Divider({ orientation = "horizontal", className }) {
 }
 
 // src/Person.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
   return (
     // gap-2: the face-to-name distance is one rule (8px) wherever a person
     // appears — Katerina, 2026-09-01, set on Person so PersonTrigger and every
     // row agree by construction.
-    /* @__PURE__ */ jsxs9("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx16(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx16("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    /* @__PURE__ */ jsxs11("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx17(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx17("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -903,10 +953,10 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
 // src/PersonTrigger.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       BaseButton3,
       {
         type: "button",
@@ -915,11 +965,11 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         "aria-label": props["aria-label"] ?? name ?? fallback,
         className: cn("cursor-pointer rounded-full", className),
         ...props,
-        children: /* @__PURE__ */ jsx17(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx18(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     BaseButton3,
     {
       type: "button",
@@ -937,18 +987,18 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx17(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx17(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        /* @__PURE__ */ jsx18(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx18(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
       ]
     }
   );
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx18(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx18(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx19(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx19(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -956,36 +1006,36 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsxs11(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx18(MenuRow, { children: /* @__PURE__ */ jsx18(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
-      /* @__PURE__ */ jsx18(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
-      me.email && /* @__PURE__ */ jsxs11(Note, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsxs13(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx19(MenuRow, { children: /* @__PURE__ */ jsx19(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx19(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
+      me.email && /* @__PURE__ */ jsxs13(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-      /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs11(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx18(MenuRow, { children: /* @__PURE__ */ jsx18("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx18(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+    relayUrl && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs13(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx19(MenuRow, { children: /* @__PURE__ */ jsx19("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx19(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-      /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx18(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx19(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx18(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx18(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx19(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx19(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
@@ -996,13 +1046,13 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
        to be `relative`, because the panel was positioned against it; the panel
        hangs from the trigger and portals now, so a positioning context here
        would only be a lie about what this box does. */
-    /* @__PURE__ */ jsx18("div", { className, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19("div", { className, children: /* @__PURE__ */ jsx19(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx18(
+        trigger: /* @__PURE__ */ jsx19(
           PersonTrigger,
           {
             name: me.name,
@@ -1013,7 +1063,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           IdentityRows,
           {
             me,
@@ -1031,25 +1081,25 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx18("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx19("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/Field.tsx
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField } from "@base-ui/react/field";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function Field({ label, required = false, helper, error, children }) {
   const control = required && isValidElement(children) ? cloneElement(children, {
     "aria-required": children.props["aria-required"] ?? true
   }) : children;
-  return /* @__PURE__ */ jsxs12(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs12(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+  return /* @__PURE__ */ jsxs14(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs14(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
       label,
-      required && /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
       control,
-      error != null ? /* @__PURE__ */ jsx19(BaseField.Error, { match: true, className: "text-caption text-error-default", children: error }) : helper != null ? /* @__PURE__ */ jsx19(BaseField.Description, { className: "text-caption text-text-muted", children: helper }) : null
+      error != null ? /* @__PURE__ */ jsx20(BaseField.Error, { match: true, className: "text-caption text-error-default", children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField.Description, { className: "text-caption text-text-muted", children: helper }) : null
     ] })
   ] });
 }
@@ -1057,12 +1107,12 @@ function Field({ label, required = false, helper, error, children }) {
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD3 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     BaseSelect.Root,
     {
       value,
@@ -1070,7 +1120,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs15(
           BaseSelect.Trigger,
           {
             "aria-label": ariaLabel,
@@ -1097,20 +1147,20 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs13("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-                selected?.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-                /* @__PURE__ */ jsx20(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+              /* @__PURE__ */ jsxs15("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+                selected?.leading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+                /* @__PURE__ */ jsx21(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
               ] }),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 BaseSelect.Icon,
                 {
-                  render: /* @__PURE__ */ jsx20(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                  render: /* @__PURE__ */ jsx21(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx20(BaseSelect.Portal, { children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(BaseSelect.Portal, { children: /* @__PURE__ */ jsx21(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -1119,30 +1169,30 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD3,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               BaseSelect.Popup,
               {
-                className: "max-h-[min(288px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
-                children: options.map((option) => /* @__PURE__ */ jsxs13(
+                className: "min-w-[var(--anchor-width)] rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
+                children: /* @__PURE__ */ jsx21(ScrollArea, { viewportClassName: "max-h-[calc(min(288px,var(--available-height))_-_0.5rem)]", contentClassName: "flex flex-col", children: options.map((option) => /* @__PURE__ */ jsxs15(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: "flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 text-[14px] font-normal leading-[1.4] text-text-primary transition-colors data-[highlighted]:bg-bg-hover data-[selected]:font-medium",
                     children: [
-                      /* @__PURE__ */ jsxs13("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx20(BaseSelect.ItemText, { className: "truncate", children: option.label })
+                      /* @__PURE__ */ jsxs15("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx21(BaseSelect.ItemText, { className: "truncate", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx20(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx21(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
                   },
                   option.value
-                ))
+                )) })
               }
             )
           }
@@ -1155,9 +1205,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef } from "react";
 import { Input } from "@base-ui/react/input";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Input,
     {
       ref,
@@ -1178,13 +1228,13 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", ...pr
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Field as BaseField2 } from "@base-ui/react/field";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     BaseField2.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx22("textarea", {}),
+      render: /* @__PURE__ */ jsx23("textarea", {}),
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
         "text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted",
@@ -1206,20 +1256,20 @@ import { useRef as useRef3 } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { IconX as IconX3 } from "@tabler/icons-react";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog;
   const popupRef = useRef3(null);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Parts.Root,
     {
       open: true,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs14(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx23(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs16(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx24(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx24("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs16(
           Parts.Popup,
           {
             ref: popupRef,
@@ -1228,17 +1278,17 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
             className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none",
             style: { width },
             children: [
-              /* @__PURE__ */ jsxs14("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-                headerContent ?? /* @__PURE__ */ jsx23(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx23("span", {}), children: title }),
-                /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsxs16("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+                headerContent ?? /* @__PURE__ */ jsx24(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx24("span", {}), children: title }),
+                /* @__PURE__ */ jsx24(
                   Parts.Close,
                   {
-                    render: /* @__PURE__ */ jsx23(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx23(IconX3, { size: 16, stroke: 1.5 }) })
+                    render: /* @__PURE__ */ jsx24(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx24(IconX3, { size: 16, stroke: 1.5 }) })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx23("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx23("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+              /* @__PURE__ */ jsx24("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx24("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -1248,7 +1298,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState3(false);
   const confirm = async () => {
@@ -1260,16 +1310,16 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
-      footer: /* @__PURE__ */ jsxs15(Fragment3, { children: [
-        /* @__PURE__ */ jsx24(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx24(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs17(Fragment3, { children: [
+        /* @__PURE__ */ jsx25(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx25(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
       children
     }
@@ -1280,7 +1330,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 import { useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
 import { Field as BaseField3 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
   const [editing, setEditing] = useState4(false);
   const [draft, setDraft] = useState4(value);
@@ -1338,7 +1388,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         written and never read. Read-only, this is a line of text: whatever
         names the region around it (a `Field`, a `Property`) names this too.
       */
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -1348,11 +1398,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx25(
+    return multiline ? /* @__PURE__ */ jsx26(
       BaseField3.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx25("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx26("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -1361,7 +1411,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx25(
+    ) : /* @__PURE__ */ jsx26(
       Input2,
       {
         ref: fieldRef,
@@ -1375,7 +1425,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "button",
     {
       type: "button",
@@ -1394,33 +1444,36 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
-function EmptyState({ icon, message, className }) {
-  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
-    /* @__PURE__ */ jsx26("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx26(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx26("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+function EmptyState({ icon, message, scope = "page", className }) {
+  if (scope === "section") {
+    return /* @__PURE__ */ jsx27("p", { className: cn("text-body-2 text-text-secondary", className), children: message });
+  }
+  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
+    /* @__PURE__ */ jsx27("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx27(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx27("p", { className: "text-body-2 text-text-secondary text-center", children: message })
   ] });
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx28("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
 }
 var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
 function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx27(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx27(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+    /* @__PURE__ */ jsx28(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx28(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx27(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx28("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx28(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/Breadcrumb.tsx
 import { Fragment as Fragment4, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef5(null);
   const labelRefs = useRef5([]);
@@ -1440,36 +1493,38 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx28("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx29("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", className), children: items.map((item, index) => {
     const last = index === items.length - 1;
+    const tone = item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary";
     const text = cn(
       "truncate",
       // A mono crumb is a ref — the identity. It never gives up width to a
       // long name beside it (the LongName story always claimed "the ref
       // stays"; flexbox was squeezing it anyway until this line).
       item.mono && "shrink-0 font-mono text-[12px] leading-[120%]",
-      item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary"
+      tone
     );
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
-    const crumb = item.href ? /* @__PURE__ */ jsx28("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx28("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-      index > 0 && /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+    const crumb = item.href ? /* @__PURE__ */ jsx29("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx29("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs20(Fragment4, { children: [
+      index > 0 && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       truncated.has(index) ? (
         // `min-w-0 shrink` undoes the wrapper's own shrink-0 — the crumb
         // must keep truncating inside it, or wrapping it would widen the
         // trail and the tooltip would never be needed again.
-        /* @__PURE__ */ jsx28(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx29(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21(
     "a",
     {
       href,
@@ -1484,9 +1539,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx29("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx29("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx29(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx29("span", { className: "shrink-0 font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx30("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx30(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx30("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
@@ -1495,7 +1550,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
 // src/Popover.tsx
 import { useMemo as useMemo2 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var GAP5 = 4;
 var VIEWPORT_PAD4 = 8;
 function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className }) {
@@ -1504,7 +1559,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     BasePopover.Root,
     {
       open,
@@ -1512,8 +1567,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx30(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx30(BasePopover.Portal, { children: /* @__PURE__ */ jsx30(
+        trigger && /* @__PURE__ */ jsx31(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx31(BasePopover.Portal, { children: /* @__PURE__ */ jsx31(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -1522,15 +1577,15 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD4,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
-                className: cn("min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none", className),
-                render: /* @__PURE__ */ jsx30(MenuPanel, {}),
-                children
+                className: cn("min-w-[180px] outline-none", className),
+                render: /* @__PURE__ */ jsx31(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx31(ScrollArea, { viewportClassName: "max-h-[calc(var(--available-height)_-_1rem)]", contentClassName: "flex flex-col [&>[role=separator]]:mx-0", children })
               }
             )
           }
@@ -1542,9 +1597,9 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx31(
+  const strip = /* @__PURE__ */ jsx32(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -1555,24 +1610,24 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx31(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx32(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx31(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx32(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarInput(props) {
-  return /* @__PURE__ */ jsx31(BaseToolbar.Input, { render: /* @__PURE__ */ jsx31(TextInput, {}), ...props });
+  return /* @__PURE__ */ jsx32(BaseToolbar.Input, { render: /* @__PURE__ */ jsx32(TextInput, {}), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -1582,9 +1637,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx32(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx33(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
     /*
               A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
               would become the toolbar's item and the button inside it would never
@@ -1594,14 +1649,14 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
               The tooltip names it for a pointer, `aria-label` for everything else,
               and both say the meaning rather than the glyph.
             */
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7 text-[18px] leading-none",
-        children: /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: option.emoji })
+        children: /* @__PURE__ */ jsx33("span", { "aria-hidden": "true", children: option.emoji })
       },
       option.emoji
     )
@@ -1610,23 +1665,23 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
 
 // src/PreviewCard.tsx
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var GAP6 = 12;
 var VIEWPORT_PAD5 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
 function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs21(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs23(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx34(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx33("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx34("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx33(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx34(
       BasePreviewCard.Positioner,
       {
         side,
@@ -1634,12 +1689,12 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         sideOffset: GAP6,
         collisionPadding: VIEWPORT_PAD5,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx34(
           BasePreviewCard.Popup,
           {
-            className: cn("w-[360px] max-h-[min(300px,var(--available-height))] gap-3 overflow-y-auto p-3 outline-none [&>*]:shrink-0", className),
-            render: /* @__PURE__ */ jsx33(MenuPanel, {}),
-            children: content
+            className: cn("w-[360px] p-3 outline-none", className),
+            render: /* @__PURE__ */ jsx34(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3 [&>*]:shrink-0", children: content })
           }
         )
       }
@@ -1648,15 +1703,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx34("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
+  return /* @__PURE__ */ jsx35("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
 }
 
 // src/RailItem.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "a",
     {
       href,
@@ -1664,14 +1719,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn(
               "flex items-center justify-center rounded-lg p-2 transition-colors",
               active ? "bg-bg-selected" : "group-hover:bg-bg-hover"
             ),
-            children: /* @__PURE__ */ jsx35(
+            children: /* @__PURE__ */ jsx36(
               "span",
               {
                 className: cn(
@@ -1683,52 +1738,49 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx35("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx36("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "nav",
     {
       "aria-label": ariaLabel,
-      className: cn(
-        "flex w-60 shrink-0 flex-col gap-px overflow-y-auto border-r border-border-default bg-bg-surface px-2.5 py-3",
-        className
-      ),
-      children
+      className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
+      children: /* @__PURE__ */ jsx37(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
     return (
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      /* @__PURE__ */ jsxs23("div", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx37("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs25("div", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
         children
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs23("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx37("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+  return /* @__PURE__ */ jsxs25("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx38("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
     children
   ] });
 }
 
 // src/Reaction.tsx
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, type, ...props }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "button",
     {
       type: type ?? "button",
@@ -1739,13 +1791,20 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
         "inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2",
         "border transition-colors",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        pressed ? "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover" : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
+        pressed ? (
+          /* In the ship theme the accent on its own wash measures 2.70:1
+             (Finding 4), and the count was the thing that vanished
+             (Katerina, 2026-09-08). The number reads in the text colour
+             there; the accent keeps the edge and the fill. Signal keeps
+             Peek's blue-on-wash, which reads. */
+          "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary"
+        ) : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
-        /* @__PURE__ */ jsx38("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
+        /* @__PURE__ */ jsx39("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -1754,9 +1813,9 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
@@ -1766,7 +1825,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -1774,65 +1833,113 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx39(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx40(Kbd, { children: shortcut })
       ]
     }
   );
 }
 
 // src/SectionHeader.tsx
-import { useState as useState6 } from "react";
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
-  const [isHovered, setIsHovered] = useState6(false);
-  return /* @__PURE__ */ jsxs26(
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", render, className }) {
+  const titleElement = useRender({
+    render: render ?? (chevron ? /* @__PURE__ */ jsx41("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx41("span", {})),
+    props: {
+      // `text-left`: a button centres its text. `h-full` and `flex-1`: the
+      // whole row up to the actions is the hit target, as it was when the
+      // row itself carried the click.
+      className: "flex h-full min-w-0 flex-1 items-center gap-1 text-left",
+      children: /* @__PURE__ */ jsxs28(Fragment5, { children: [
+        chevron && /* @__PURE__ */ jsx41(
+          IconChevronRight2,
+          {
+            size: 12,
+            stroke: 1.5,
+            className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
+          }
+        ),
+        /* @__PURE__ */ jsx41(SectionLabel, { children: title })
+      ] })
+    }
+  });
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
-        "flex h-[32px] items-center justify-between rounded-lg px-2 transition-colors",
-        isHovered && "bg-bg-hover",
-        chevron && "cursor-pointer",
+        "group flex h-[32px] items-center gap-1 rounded-lg px-2 transition-colors",
+        // The fill says "this does something": a row with a toggle or actions
+        // lights up, a fixed heading over rows does not (2026-09-09, the
+        // Sidebar's fixed group).
+        (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
         className
       ),
-      onClick: chevron ? onToggle : void 0,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex shrink-0 items-center gap-1", children: [
-          chevron && /* @__PURE__ */ jsx40(
-            IconChevronRight2,
-            {
-              size: 12,
-              stroke: 1.5,
-              className: cn("text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
-            }
-          ),
-          /* @__PURE__ */ jsx40(SectionLabel, { children: title })
-        ] }),
-        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx40("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx40(
-          IconButton,
+        titleElement,
+        actions && actions.length > 0 && /* @__PURE__ */ jsx41(
+          "div",
           {
-            tooltip: action.tooltip,
-            "aria-label": action.tooltip,
-            onClick: (event) => {
-              event.stopPropagation();
-              action.onClick();
-            },
-            children: action.icon
-          },
-          action.tooltip
-        )) })
+            className: cn(
+              "-mr-1 flex shrink-0 items-center gap-1",
+              showActions === "hover" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
+            ),
+            children: actions.map((action) => /* @__PURE__ */ jsx41(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+          }
+        )
       ]
     }
   );
 }
 
+// src/CollapsibleSection.tsx
+import { useState as useState6 } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+var OPEN = "open";
+var CLOSED = "closed";
+function readStored(key) {
+  if (!key) return void 0;
+  try {
+    const value = window.localStorage.getItem(key);
+    return value === OPEN ? true : value === CLOSED ? false : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, open) {
+  if (!key) return;
+  try {
+    window.localStorage.setItem(key, open ? OPEN : CLOSED);
+  } catch {
+  }
+}
+function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, actions, showActions, children, className, contentClassName }) {
+  const [openState, setOpenState] = useState6(() => readStored(storageKey) ?? defaultOpen);
+  const open = openProp ?? openState;
+  const setOpen = (next) => {
+    setOpenState(next);
+    writeStored(storageKey, next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs29(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx42(SectionHeader, { title, chevron: true, isExpanded: open, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx42(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx42(
+      Collapsible.Panel,
+      {
+        hiddenUntilFound: true,
+        className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
+        children: /* @__PURE__ */ jsx42("div", { className: cn("flex flex-col", contentClassName), children })
+      }
+    )
+  ] });
+}
+
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     BaseTabs.Root,
     {
       value: active,
@@ -1840,14 +1947,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx43(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs27(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs30(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -1860,9 +1967,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs27("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs30("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx41("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx43("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -1878,7 +1985,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo3, useState as useState7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { IconCircleCheck } from "@tabler/icons-react";
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
@@ -1896,7 +2003,7 @@ var ACTION_BORDER_STYLES = {
 };
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -1908,11 +2015,11 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx42(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
-          /* @__PURE__ */ jsx42("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 shrink-0", children: [
+          leadingIcon && /* @__PURE__ */ jsx44(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
+          /* @__PURE__ */ jsx44("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
         ] }),
-        hasAction && /* @__PURE__ */ jsx42(
+        hasAction && /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
@@ -1922,7 +2029,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
               ACTION_BORDER_STYLES[type],
               type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
             ),
-            children: /* @__PURE__ */ jsx42("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
+            children: /* @__PURE__ */ jsx44("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
           }
         )
       ]
@@ -1949,10 +2056,10 @@ function ToastProvider({ children }) {
     return () => clearTimeout(timer);
   }, [toast]);
   const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs28(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value, children: [
     children,
     toast && createPortal2(
-      /* @__PURE__ */ jsx42("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx44("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx44(
         Toast,
         {
           className: "pointer-events-auto",
@@ -1985,6 +2092,7 @@ export {
   Checkbox,
   Chip,
   ChipInput,
+  CollapsibleSection,
   ConfirmDialog,
   DialogShell,
   Divider,
@@ -2013,6 +2121,7 @@ export {
   RailItem,
   Reaction,
   ReactionPicker,
+  ScrollArea,
   SearchInput,
   SectionHeader,
   SectionLabel,