@estiva-app/ui 0.11.0 → 0.12.1

package/dist/index.js

@@ -34,11 +34,36 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/TopBar.tsx
+// src/ScrollArea.tsx
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { jsx, jsxs } 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__ */ jsxs(BaseScrollArea.Root, { className: cn("relative min-h-0 min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
+      }
+    ),
+    vertical && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
+    horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
+    vertical && horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Corner, {})
+  ] });
+}
+
+// src/TopBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function TopBar({ variant = "solid", menu, logo, search, right, className }) {
   const floating = variant === "floating";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "header",
     {
       className: cn(
@@ -47,27 +72,27 @@ function TopBar({ variant = "solid", menu, logo, search, right, className }) {
         className
       ),
       children: [
-        (menu || logo) && /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
+        (menu || logo) && /* @__PURE__ */ jsxs2("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
           menu,
-          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
+          logo && /* @__PURE__ */ jsx2("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
+        /* @__PURE__ */ jsx2("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
+        /* @__PURE__ */ jsx2("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
       ]
     }
   );
 }
 
 // src/AppShell.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav, children }) {
-  const bar = /* @__PURE__ */ jsx2(TopBar, { variant, menu, logo, search, right: identity });
+  const bar = /* @__PURE__ */ jsx3(TopBar, { variant, menu, logo, search, right: identity });
   if (variant === "floating") {
-    return /* @__PURE__ */ jsxs2("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
+    return /* @__PURE__ */ jsxs3("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
       bar,
-      /* @__PURE__ */ jsxs2("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
         nav,
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             className: cn(
@@ -76,7 +101,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
             ),
             children: [
               banner,
-              /* @__PURE__ */ jsx2("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+              /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
             ]
           }
         )
@@ -84,20 +109,22 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
     ] });
   }
   return (
-    /* `relative overflow-hidden` is the seal the floating manner already has,
+    /* `relative overflow-hidden` is the seal the floating manner already has
+       (and the ScrollArea's own root is `relative`, so an absolutely placed
+       stray inside a page now belongs to the region and scrolls with it),
        and it takes both halves: an absolutely positioned descendant with no
        positioned ancestor belongs to the *viewport*, so a scroll container
        never clips it and the document itself gains its position as scroll
        range — the whole page scrolls, navigation and top bar included.
        `relative` claims such strays for the shell; `overflow-hidden` clips
        them at its edge. Either alone seals nothing. */
-    /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
       bar,
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1", children: [
         nav,
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
           banner,
-          /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+          /* @__PURE__ */ jsx3(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex min-h-full flex-col", children: /* @__PURE__ */ jsx3("main", { className: "flex min-w-0 flex-1 flex-col", children }) })
         ] })
       ] })
     ] })
@@ -107,7 +134,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
 // src/Avatar.tsx
 import { useState } from "react";
 import { IconUserFilled } from "@tabler/icons-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
 var hueFor = (key) => {
   let h = 0;
@@ -123,13 +150,13 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
   const [broken, setBroken] = useState(false);
   const label = name || alt;
   const picture = src && !broken ? src : void 0;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ...spoken ? { role: "img", "aria-label": spoken } : { "aria-hidden": true },
       className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className),
       style: { width: size, height: size },
-      children: picture ? /* @__PURE__ */ jsx3("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx3(
+      children: picture ? /* @__PURE__ */ jsx4("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx4(
         "div",
         {
           className: "w-full h-full flex items-center justify-center font-semibold leading-none",
@@ -143,29 +170,29 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
           },
           children: initialsFor(label)
         }
-      ) : /* @__PURE__ */ jsx3("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx3(IconUserFilled, { size: Math.round(size * 0.5) }) })
+      ) : /* @__PURE__ */ jsx4("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx4(IconUserFilled, { size: Math.round(size * 0.5) }) })
     }
   );
 }
 
 // src/AvatarGroup.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function AvatarGroup({ members, size = 24 }) {
   const visible = members.slice(0, 3);
   const overlap = Math.round(size / 3);
   const ring = size / 12;
-  return /* @__PURE__ */ jsx4("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
     /*
       The wrapper carries the overlap and the ring; the face carries
       neither. It must never clip — see the note at the top of the file —
       so it has the avatar's own radius and no overflow of its own.
     */
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "span",
       {
         className: "relative flex rounded-sm",
         style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
-        children: /* @__PURE__ */ jsx4(Avatar, { size, name: member.name, src: member.picture, label: member.name })
+        children: /* @__PURE__ */ jsx5(Avatar, { size, name: member.name, src: member.picture, label: member.name })
       },
       i
     )
@@ -182,9 +209,9 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
 // src/Kbd.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Kbd({ children, className }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "kbd",
     {
       className: cn(
@@ -199,21 +226,21 @@ function Kbd({ children, className }) {
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
 function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children }) {
-  return /* @__PURE__ */ jsx6(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
+  return /* @__PURE__ */ jsx7(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
-  return /* @__PURE__ */ jsxs3("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg", className), ...props, children: [
-    /* @__PURE__ */ jsx6("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
-    shortcut && /* @__PURE__ */ jsx6(Kbd, { children: shortcut })
+  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg", className), ...props, children: [
+    /* @__PURE__ */ jsx7("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
+    shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
   ] });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
 function TooltipSurface({ label, shortcut, placement }) {
-  return /* @__PURE__ */ jsx6(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(
     BaseTooltip.Positioner,
     {
       side: placement,
@@ -222,10 +249,10 @@ function TooltipSurface({ label, shortcut, placement }) {
       collisionPadding: VIEWPORT_PAD,
       positionMethod: "fixed",
       className: "pointer-events-none z-[9999]",
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         BaseTooltip.Popup,
         {
-          render: /* @__PURE__ */ jsx6(
+          render: /* @__PURE__ */ jsx7(
             Tooltip,
             {
               label,
@@ -245,20 +272,20 @@ function TooltipSurface({ label, shortcut, placement }) {
   ) });
 }
 function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
-  return /* @__PURE__ */ jsxs3(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx6(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx6("div", { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
-    /* @__PURE__ */ jsx6(TooltipSurface, { label, shortcut, placement })
+  return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7("div", { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 function TooltipTrigger({ label, shortcut, placement = "top", children }) {
-  return /* @__PURE__ */ jsxs3(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx6(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
-    /* @__PURE__ */ jsx6(TooltipSurface, { label, shortcut, placement })
+  return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
+    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 
 // src/IconButton.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
   className,
@@ -271,7 +298,7 @@ function IconButton({
   type = "button",
   ...props
 }) {
-  const button = /* @__PURE__ */ jsx7(
+  const button = /* @__PURE__ */ jsx8(
     BaseButton,
     {
       type,
@@ -299,13 +326,13 @@ function IconButton({
   );
   const label = disabledReason ?? tooltip;
   if (label) {
-    return /* @__PURE__ */ jsx7(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx8(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
   }
   return button;
 }
 
 // src/Banner.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var TONE_STYLES = {
   ok: "bg-success-muted text-success-default",
   error: "bg-error-muted text-error-default",
@@ -315,17 +342,17 @@ var TONE_STYLES = {
 function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
   const role = tone === "error" ? "alert" : "status";
   if (!onDismiss) {
-    return /* @__PURE__ */ jsx8("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+    return /* @__PURE__ */ jsx9("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
   }
-  return /* @__PURE__ */ jsxs4("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1", children }),
-    /* @__PURE__ */ jsx8(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx8(IconX, { size: 16, stroke: 1.5 }) })
+  return /* @__PURE__ */ jsxs5("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1", children }),
+    /* @__PURE__ */ jsx9(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx9(IconX, { size: 16, stroke: 1.5 }) })
   ] });
 }
 
 // src/Button.tsx
 import { Button as BaseButton2 } from "@base-ui/react/button";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -338,7 +365,7 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  const button = /* @__PURE__ */ jsxs5(
+  const button = /* @__PURE__ */ jsxs6(
     BaseButton2,
     {
       type,
@@ -372,13 +399,13 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx9(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx10(TooltipTrigger, { label: disabledReason, children: button }) : button;
 }
 
 // src/Checkbox.tsx
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { IconCheck } from "@tabler/icons-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function squareClasses(checked, disabled, interactive, className) {
   return cn(
     "inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors",
@@ -391,9 +418,9 @@ function squareClasses(checked, disabled, interactive, className) {
 var tickClasses = (checked) => cn("flex", !checked && "invisible");
 function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
   if (!onChange) {
-    return /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx10("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx10(IconCheck, { size: 12, stroke: 3 }) }) });
+    return /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx11("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) }) });
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     BaseCheckbox.Root,
     {
       checked,
@@ -403,13 +430,13 @@ function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
       onCheckedChange: (next) => onChange(next),
       onClick: (e) => e.stopPropagation(),
       className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx10(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx10(IconCheck, { size: 12, stroke: 3 }) })
+      children: /* @__PURE__ */ jsx11(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
 }
 
 // src/Chip.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
   brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
@@ -419,10 +446,18 @@ 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: [
-    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 }),
-    trailingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+  return /* @__PURE__ */ jsxs7("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__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+    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__ */ jsx12("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__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
@@ -459,22 +494,6 @@ 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 overscroll-contain outline-none", 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 jsx13 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
@@ -1428,8 +1447,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
 import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
-function EmptyState({ icon, message, className }) {
-  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
+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 })
   ] });
@@ -1475,13 +1497,14 @@ function Breadcrumb({ items, className }) {
   }, [measure, items]);
   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;
@@ -1489,6 +1512,7 @@ function Breadcrumb({ items, className }) {
     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
@@ -1519,7 +1543,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       children: [
         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: "shrink-0 font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        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
       ]
     }
   );
@@ -1818,58 +1842,106 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 }
 
 // src/SectionHeader.tsx
-import { useState as useState6 } from "react";
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
-  const [isHovered, setIsHovered] = useState6(false);
+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__ */ jsxs28("div", { className: "flex shrink-0 items-center gap-1", children: [
-          chevron && /* @__PURE__ */ jsx41(
-            IconChevronRight2,
-            {
-              size: 12,
-              stroke: 1.5,
-              className: cn("text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
-            }
-          ),
-          /* @__PURE__ */ jsx41(SectionLabel, { children: title })
-        ] }),
-        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx41(
-          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 jsx42, jsxs as jsxs29 } 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__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     BaseTabs.Root,
     {
       value: active,
@@ -1877,14 +1949,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx42(
+      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__ */ jsxs29(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs30(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -1897,9 +1969,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs29("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs30("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx42("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
                 ] })
               ]
             },
@@ -1915,7 +1987,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 jsx43, jsxs as jsxs30 } 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)]",
@@ -1933,7 +2005,7 @@ var ACTION_BORDER_STYLES = {
 };
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -1945,11 +2017,11 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx43(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
-          /* @__PURE__ */ jsx43("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__ */ jsx43(
+        hasAction && /* @__PURE__ */ jsx44(
           "button",
           {
             type: "button",
@@ -1959,7 +2031,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__ */ jsx43("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 })
           }
         )
       ]
@@ -1986,10 +2058,10 @@ function ToastProvider({ children }) {
     return () => clearTimeout(timer);
   }, [toast]);
   const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs30(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value, children: [
     children,
     toast && createPortal2(
-      /* @__PURE__ */ jsx43("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx44(
         Toast,
         {
           className: "pointer-events-auto",
@@ -2022,6 +2094,7 @@ export {
   Checkbox,
   Chip,
   ChipInput,
+  CollapsibleSection,
   ConfirmDialog,
   DialogShell,
   Divider,