@estiva-app/ui 0.30.0 → 0.31.0

package/dist/index.js

@@ -2251,20 +2251,36 @@ import { useRef as useRef6 } from "react";
 import { Dialog as Dialog3 } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { IconX as IconX5 } from "@tabler/icons-react";
+
+// src/ContainerHeader.tsx
+import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+function ContainerHeader({ title, chevron = false, actions, className }) {
+  const text = typeof title === "string";
+  return /* @__PURE__ */ jsxs24("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
+    /* @__PURE__ */ jsx34("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+      text ? /* @__PURE__ */ jsx34("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx34("div", { className: "min-w-0 flex-1", children: title }),
+      chevron && /* @__PURE__ */ jsx34(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+    ] }) }),
+    actions && /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+  ] });
+}
+
+// src/DialogShell.tsx
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog3;
   const popupRef = useRef6(null);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Parts.Root,
     {
       open: true,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs24(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx34(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx34("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs24(
+      children: /* @__PURE__ */ jsxs25(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx35(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx35("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs25(
           Parts.Popup,
           {
             ref: popupRef,
@@ -2273,20 +2289,37 @@ 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__ */ jsxs24("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-                headerContent ?? /* @__PURE__ */ jsx34(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx34("span", {}), children: title }),
-                /* @__PURE__ */ jsx34(
-                  Parts.Close,
-                  {
-                    render: /* @__PURE__ */ jsx34(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx34(IconX5, { size: 16, stroke: 1.5 }) })
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsx35(
+                ContainerHeader,
+                {
+                  title: headerContent ?? /* @__PURE__ */ jsx35(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx35("span", {}), children: title }),
+                  actions: (
+                    /*
+                                    The ✕ IS the `Close` part now, rather than a button that calls
+                                    `onClose` beside one (stage 4, 2026-09-07). Stage 3 could not do
+                                    this: an `IconButton` carrying a `tooltip` returned the tooltip
+                                    wrapper `<div>` as its root, so the part composed onto the
+                                    wrapper and not the button. Porting Tooltip removed the wrapper
+                                    — the trigger is the button itself — and the composition works.
+                    
+                                    What it buys: the dialog closes through its own state machine,
+                                    so the ✕, Escape and the outside press are one path with one
+                                    reason attached, instead of one of the three going around.
+                                  */
+                    /* @__PURE__ */ jsx35(
+                      Parts.Close,
+                      {
+                        render: /* @__PURE__ */ jsx35(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx35(IconX5, { size: 16, stroke: 1.5 }) })
+                      }
+                    )
+                  )
+                }
+              ),
               bodyMaxHeight ? (
                 // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
-                /* @__PURE__ */ jsx34("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
-              ) : /* @__PURE__ */ jsx34("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx34("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+                /* @__PURE__ */ jsx35("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx35(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
+              ) : /* @__PURE__ */ jsx35("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx35("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -2296,7 +2329,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState4(false);
   const confirm = async () => {
@@ -2308,17 +2341,17 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
-      footer: /* @__PURE__ */ jsxs25(Fragment6, { children: [
-        /* @__PURE__ */ jsx35(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx35(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs26(Fragment6, { children: [
+        /* @__PURE__ */ jsx36(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx36(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
+      children: /* @__PURE__ */ jsx36("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
@@ -2327,7 +2360,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 import { useEffect as useEffect3, useRef as useRef7, useState as useState5 } from "react";
 import { Field as BaseField4 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
   const [editing, setEditing] = useState5(false);
   const [draft, setDraft] = useState5(value);
@@ -2385,7 +2418,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__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -2395,11 +2428,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx36(
+    return multiline ? /* @__PURE__ */ jsx37(
       BaseField4.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx36("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx37("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -2408,7 +2441,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx36(
+    ) : /* @__PURE__ */ jsx37(
       Input2,
       {
         ref: fieldRef,
@@ -2422,7 +2455,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "button",
     {
       type: "button",
@@ -2442,7 +2475,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 // src/ErrorBoundary.tsx
 import { Component } from "react";
 import { IconAlertTriangle as IconAlertTriangle2 } from "@tabler/icons-react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -2453,22 +2486,22 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (!this.state.hasError) return this.props.children;
-    const message = /* @__PURE__ */ jsx37(
+    const message = /* @__PURE__ */ jsx38(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx37(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
+        icon: /* @__PURE__ */ jsx38(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
         message: `Something went wrong${this.props.label ? ` in the ${this.props.label}` : ""}. Your data is safe \u2014 try again.`,
         action: { label: "Try again", onClick: () => this.setState({ hasError: false }) }
       }
     );
     if (this.props.frame) return this.props.frame(message);
-    return this.props.fallbackClassName ? /* @__PURE__ */ jsx37("div", { className: this.props.fallbackClassName, children: message }) : message;
+    return this.props.fallbackClassName ? /* @__PURE__ */ jsx38("div", { className: this.props.fallbackClassName, children: message }) : message;
   }
 };
 
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TRACK_CLASSES = {
   default: "h-1.5 w-full overflow-hidden rounded-full bg-bg-inset",
   // 4px, Katerina's ruling of 14 September; Peek's own bar is 3px until it takes this one.
@@ -2481,13 +2514,13 @@ var INDICATOR_CLASSES = {
 function ProgressBar({ value, max, label, variant = "default", className }) {
   return (
     // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
-    /* @__PURE__ */ jsx38(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx38(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx38(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx39(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx39(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx39(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
 import { Fragment as Fragment7, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef8(null);
   const labelRefs = useRef8([]);
@@ -2507,7 +2540,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx39("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx40("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", 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(
@@ -2528,25 +2561,25 @@ function Breadcrumb({ items, className }) {
       // on a box around it, which the link takes them from, rather than
       // pushed into it (UIG-9); the link is still the one element that
       // truncates and is measured.
-      /* @__PURE__ */ jsx39("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx39(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx39("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-      index > 0 && /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      /* @__PURE__ */ jsx40("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx40(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx40("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+      index > 0 && /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx40("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__ */ jsx39(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx40(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "a",
     {
       href,
@@ -2561,9 +2594,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx40("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx40("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx40(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx40("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx41("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx41("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx41(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx41("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
@@ -2572,7 +2605,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
 // src/Popover.tsx
 import { useMemo as useMemo3 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var GAP5 = 4;
 var VIEWPORT_PAD5 = 8;
 function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }) {
@@ -2581,7 +2614,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     BasePopover.Root,
     {
       open,
@@ -2589,8 +2622,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx41(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx41(BasePopover.Portal, { children: /* @__PURE__ */ jsx41(
+        trigger && /* @__PURE__ */ jsx42(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx42(BasePopover.Portal, { children: /* @__PURE__ */ jsx42(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -2599,20 +2632,20 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD5,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx42(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx41(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx41(
+                render: /* @__PURE__ */ jsx42(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx42(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx41(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx42(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -2626,9 +2659,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 jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx42(
+  const strip = /* @__PURE__ */ jsx43(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -2639,27 +2672,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx42(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx43(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx42(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx43(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx42(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx42(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx43(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx43(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx42(BaseToolbar.Input, { render: /* @__PURE__ */ jsx42(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx43(BaseToolbar.Input, { render: /* @__PURE__ */ jsx43(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -2669,9 +2702,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx43(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx44(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
@@ -2681,14 +2714,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__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2697,23 +2730,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 jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var GAP6 = 12;
 var VIEWPORT_PAD6 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
 function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, contentClassName, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs29(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs30(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx45(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx44("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx45("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx44(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx45(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2721,12 +2754,12 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         sideOffset: GAP6,
         collisionPadding: VIEWPORT_PAD6,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx45(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx44(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx44(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx45(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx45(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2735,15 +2768,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx45("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__ */ jsx46("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 jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "a",
     {
       href,
@@ -2751,14 +2784,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "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__ */ jsx46(
+            children: /* @__PURE__ */ jsx47(
               "span",
               {
                 className: cn(
@@ -2770,27 +2803,27 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx46("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx47("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "nav",
     {
       "aria-label": ariaLabel,
       className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx47(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx48(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 jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -2798,23 +2831,23 @@ function Property({ label, layout = "row", children, className }) {
       // 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__ */ jsxs31("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx48("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx48("dd", { className: VALUE_CLASSES, children })
+      /* @__PURE__ */ jsxs32("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx49("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx49("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs31("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx48("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx48("dd", { className: VALUE_CLASSES, children })
+  return /* @__PURE__ */ jsxs32("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx49("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx49("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     Toggle,
     {
       pressed,
@@ -2836,8 +2869,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-        /* @__PURE__ */ jsx49("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+        /* @__PURE__ */ jsx50("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -2846,9 +2879,9 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: cn(
@@ -2860,7 +2893,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(
           Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -2868,7 +2901,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx50(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx51(Kbd, { children: shortcut })
       ]
     }
   );
@@ -2877,17 +2910,17 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", render, className }) {
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx51("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx51("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx52("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx52("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__ */ jsxs34(Fragment8, { children: [
-        chevron && /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsxs35(Fragment8, { children: [
+        chevron && /* @__PURE__ */ jsx52(
           IconChevronRight2,
           {
             size: 12,
@@ -2895,11 +2928,11 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx51(SectionLabel, { children: title })
+        /* @__PURE__ */ jsx52(SectionLabel, { children: title })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: cn(
@@ -2912,15 +2945,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx51("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx51(
+        trailing != null && /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx52(
           "div",
           {
             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__ */ jsx51(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx52(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -2928,20 +2961,6 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
   );
 }
 
-// src/ContainerHeader.tsx
-import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
-function ContainerHeader({ title, chevron = false, actions, className }) {
-  const text = typeof title === "string";
-  return /* @__PURE__ */ jsxs35("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
-    /* @__PURE__ */ jsx52("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-      text ? /* @__PURE__ */ jsx52("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx52("div", { className: "min-w-0 flex-1", children: title }),
-      chevron && /* @__PURE__ */ jsx52(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-    ] }) }),
-    actions && /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
-  ] });
-}
-
 // src/ListColumn.tsx
 import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {