@estiva-app/ui 0.24.0 → 0.25.0

package/dist/index.js

@@ -324,7 +324,7 @@ function TooltipSurface({ label, shortcut, placement }) {
 function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, inline = false, children }) {
   const Wrapper = inline ? "span" : "div";
   return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7(Wrapper, { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7(Wrapper, { className: cn("inline-flex shrink-0", inline && "align-top", wrapperClassName) }), children }),
     /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
@@ -723,8 +723,8 @@ function Button({
         // this package's own story frames, each of which asks for the top.
         // A control does not get to decide where its caller puts it.
         "inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium",
-        size === "default" && "h-8 text-btn-default",
-        size === "small" && "h-6 text-btn-small",
+        size === "default" && "h-8 min-h-8 text-btn-default",
+        size === "small" && "h-6 min-h-6 text-btn-small",
         // Extra right padding beside a leading icon, for optical balance.
         size === "default" && (hasLeadingIcon ? "pl-2 pr-3" : "px-2"),
         size === "small" && (hasLeadingIcon ? "pl-1.5 pr-2" : "px-1.5"),
@@ -1143,6 +1143,9 @@ function MenuSection({ label, children, className }) {
     children
   ] });
 }
+function MenuSeparator() {
+  return /* @__PURE__ */ jsx18(Divider, { className: "my-1" });
+}
 function MenuRow({ children, className }) {
   return /* @__PURE__ */ jsx18("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
@@ -1432,7 +1435,7 @@ function SkeletonBar({ className, style }) {
 }
 var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
 function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg", children: [
     /* @__PURE__ */ jsx23(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
     /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
@@ -1818,7 +1821,7 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       "aria-haspopup": "menu",
       "aria-expanded": open,
       className: cn(
-        "flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
+        "flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
         open && "bg-bg-hover",
         // Under a `Menu` the open state is Base UI's, not a prop: the trigger
         // carries `data-popup-open` while its menu is up, and sets its own
@@ -1956,7 +1959,7 @@ var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, disabledReason, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  const held = Boolean(disabledReason) && !disabled;
+  const held = Boolean(disabledReason);
   const trigger = /* @__PURE__ */ jsxs22(
     BaseSelect.Trigger,
     {
@@ -1983,7 +1986,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
         "focus-visible:border-border-focus aria-expanded:border-border-focus",
         "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
         size === "default" && "px-3 py-2 text-input-value",
-        size === "small" && "h-6 px-2 text-caption",
+        size === "small" && "h-6 min-h-6 px-2 text-caption",
         className
       ),
       children: [
@@ -2009,7 +2012,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       },
       ...held ? { open: false, onOpenChange: () => {
       } } : {},
-      disabled,
+      disabled: disabled && !held,
       modal: false,
       children: [
         held ? /* @__PURE__ */ jsx30(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
@@ -2073,7 +2076,7 @@ var TextInput = forwardRef2(function TextInput2({ className, type = "text", size
         "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg",
         // The small size is the small Select's trigger, class for class.
         size === "default" && "px-3 py-2 text-input-value",
-        size === "small" && "h-6 px-2 text-caption",
+        size === "small" && "h-6 min-h-6 px-2 text-caption",
         "text-text-primary placeholder:text-text-muted",
         "outline-none transition-colors",
         "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
@@ -2307,9 +2310,36 @@ 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 jsx36 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    console.error(`${this.props.label ?? "part of the page"} crashed:`, error, info.componentStack ?? "");
+  }
+  render() {
+    if (!this.state.hasError) return this.props.children;
+    const message = /* @__PURE__ */ jsx36(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx36(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__ */ jsx36("div", { className: this.props.fallbackClassName, children: message }) : message;
+  }
+};
+
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } 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.
@@ -2322,13 +2352,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__ */ jsx36(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx36(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx36(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx37(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx37(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx37(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
 import { Fragment as Fragment7, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef7, useState as useState6 } from "react";
-import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef7(null);
   const labelRefs = useRef7([]);
@@ -2348,7 +2378,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx37("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__ */ jsx38("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(
@@ -2369,23 +2399,23 @@ 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__ */ jsx37("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx37(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx37("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+      /* @__PURE__ */ jsx38("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx38(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx38("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
     return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      index > 0 && /* @__PURE__ */ jsx37("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx37("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      index > 0 && /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx38("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__ */ jsx37(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx38(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
   return /* @__PURE__ */ jsxs26(
     "a",
@@ -2402,9 +2432,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx38("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx38("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx38(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx38("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx39("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx39(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx39("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
@@ -2413,7 +2443,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 jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } 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 }) {
@@ -2430,8 +2460,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx39(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx39(BasePopover.Portal, { children: /* @__PURE__ */ jsx39(
+        trigger && /* @__PURE__ */ jsx40(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx40(BasePopover.Portal, { children: /* @__PURE__ */ jsx40(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -2440,20 +2470,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__ */ jsx39(
+            children: /* @__PURE__ */ jsx40(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx39(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx39(
+                render: /* @__PURE__ */ jsx40(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx40(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx39(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx40(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -2467,9 +2497,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 jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx40(
+  const strip = /* @__PURE__ */ jsx41(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -2480,24 +2510,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx40(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx41(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx40(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx41(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
+function ToolbarLink({ ref, href, ...props }) {
+  return /* @__PURE__ */ jsx41(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx41(IconButton, { href, ...props }) });
+}
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx40(BaseToolbar.Input, { render: /* @__PURE__ */ jsx40(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx41(BaseToolbar.Input, { render: /* @__PURE__ */ jsx41(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -2507,9 +2540,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx41(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx42(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
@@ -2519,14 +2552,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__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2535,23 +2568,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 jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } 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__ */ jsxs28(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx42("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx43("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx42(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx43(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2559,12 +2592,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__ */ jsx42(
+        children: /* @__PURE__ */ jsx43(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx42(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx43(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx43(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2573,30 +2606,30 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx43("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__ */ jsx44("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 jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
   return /* @__PURE__ */ jsxs29(
     "a",
     {
       href,
       "aria-current": active ? "page" : void 0,
-      className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
+      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__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "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__ */ jsx44(
+            children: /* @__PURE__ */ jsx45(
               "span",
               {
                 className: cn(
@@ -2608,27 +2641,27 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx44("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx45("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "nav",
     {
       "aria-label": ariaLabel,
       className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx45(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx46(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 jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -2637,20 +2670,20 @@ function Property({ label, layout = "row", children, className }) {
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
       /* @__PURE__ */ jsxs30("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx46("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx46("dd", { className: VALUE_CLASSES, children })
+        /* @__PURE__ */ jsx47("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx47("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
   return /* @__PURE__ */ jsxs30("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx46("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx46("dd", { className: VALUE_CLASSES, children })
+    /* @__PURE__ */ jsx47("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx47("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return /* @__PURE__ */ jsxs31(
     Toggle,
@@ -2659,7 +2692,7 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
       className: cn(
         // Chip's pill at a control's height, so a reaction and a status chip
         // read as the same family — 24px matches Button `small`.
-        "inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2",
+        "inline-flex h-6 min-h-6 items-center justify-center gap-1.5 rounded-full px-2",
         "border transition-colors",
         "disabled:cursor-not-allowed disabled:opacity-50",
         pressed ? (
@@ -2674,8 +2707,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-        /* @__PURE__ */ jsx47("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx48("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+        /* @__PURE__ */ jsx48("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -2684,7 +2717,7 @@ 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 jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
   return /* @__PURE__ */ jsxs32(
     "div",
@@ -2698,7 +2731,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -2706,7 +2739,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx48(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx49(Kbd, { children: shortcut })
       ]
     }
   );
@@ -2715,17 +2748,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 jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs33 } 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__ */ jsx49("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx49("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx50("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx50("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__ */ jsxs33(Fragment8, { children: [
-        chevron && /* @__PURE__ */ jsx49(
+        chevron && /* @__PURE__ */ jsx50(
           IconChevronRight2,
           {
             size: 12,
@@ -2733,7 +2766,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx49(SectionLabel, { children: title })
+        /* @__PURE__ */ jsx50(SectionLabel, { children: title })
       ] })
     }
   });
@@ -2741,7 +2774,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
     "div",
     {
       className: cn(
-        "group flex h-[32px] items-center gap-1 rounded-lg px-2 transition-colors",
+        "group flex h-[32px] shrink-0 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).
@@ -2750,15 +2783,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx49("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx49(
+        trailing != null && /* @__PURE__ */ jsx50("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx50(
           "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__ */ jsx49(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx50(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -2768,22 +2801,60 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 
 // src/ContainerHeader.tsx
 import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 function ContainerHeader({ title, chevron = false, actions, className }) {
   const text = typeof title === "string";
   return /* @__PURE__ */ jsxs34("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__ */ jsx50("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-      text ? /* @__PURE__ */ jsx50("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx50("div", { className: "min-w-0 flex-1", children: title }),
-      chevron && /* @__PURE__ */ jsx50(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+    /* @__PURE__ */ jsx51("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+      text ? /* @__PURE__ */ jsx51("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx51("div", { className: "min-w-0 flex-1", children: title }),
+      chevron && /* @__PURE__ */ jsx51(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
     ] }) }),
-    actions && /* @__PURE__ */ jsx50("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx50("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+    actions && /* @__PURE__ */ jsx51("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx51("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
   ] });
 }
 
+// src/ListColumn.tsx
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: cn(
+        // `shrink-0`: the column keeps its 290px beside a main area that grows.
+        "flex shrink-0 flex-col overflow-hidden border-r border-border-subtle transition-[width,opacity] duration-300 ease-in-out",
+        collapsed ? "w-0 border-r-0 opacity-0" : "w-[290px] opacity-100",
+        className
+      ),
+      "data-collapsed": collapsed || void 0,
+      children: [
+        /* @__PURE__ */ jsx52(ContainerHeader, { title, chevron, actions }),
+        above,
+        broken ? (
+          // The message takes the room the list had and centres itself in it (Katerina, 19 September).
+          /* @__PURE__ */ jsx52("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx52(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+      ]
+    }
+  );
+}
+function ListColumn(props) {
+  return /* @__PURE__ */ jsx52(
+    ErrorBoundary,
+    {
+      label: "list panel",
+      frame: (message) => (
+        // Only the name comes back with the message: the actions and the row above may be what threw.
+        /* @__PURE__ */ jsx52(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+      ),
+      children: /* @__PURE__ */ jsx52(Column, { ...props })
+    }
+  );
+}
+
 // src/CollapsibleSection.tsx
 import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2810,14 +2881,14 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs35(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx51(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx51(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs36(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx53(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx53(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx53(
       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__ */ jsx51("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx53("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -2825,9 +2896,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     BaseTabs.Root,
     {
       value: active,
@@ -2835,14 +2906,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx54(
         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__ */ jsxs36(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs37(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -2855,9 +2926,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs36("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs37("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx52("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx54("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -2873,7 +2944,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 import { createContext as createContext5, useContext as useContext5, useMemo as useMemo4 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
@@ -2909,16 +2980,16 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx53(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx55(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
 }
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs37("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx53(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx53("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs38("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx55(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx55("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx55(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext5(null);
@@ -2939,9 +3010,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx53(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs37(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx55(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs38(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx53(BaseToast.Portal, { children: /* @__PURE__ */ jsx53(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx53(ToastList, {}) }) })
+    /* @__PURE__ */ jsx55(BaseToast.Portal, { children: /* @__PURE__ */ jsx55(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx55(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -2949,25 +3020,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx53(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx53(BaseToast.Title, { render: /* @__PURE__ */ jsx53("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx55(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx55(BaseToast.Title, { render: /* @__PURE__ */ jsx55("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx53(
+          actionLabel && /* @__PURE__ */ jsx55(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx55(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3007,6 +3078,7 @@ export {
   EditableText,
   EmptyState,
   EnterHint,
+  ErrorBoundary,
   Field,
   FieldLine,
   FilePicker,
@@ -3020,11 +3092,13 @@ export {
   InputChip,
   Kbd,
   Link,
+  ListColumn,
   Menu,
   MenuItem,
   MenuPanel,
   MenuRow,
   MenuSection,
+  MenuSeparator,
   MenuSub,
   NavItem,
   Person,
@@ -3054,6 +3128,7 @@ export {
   Toolbar,
   ToolbarButton,
   ToolbarInput,
+  ToolbarLink,
   ToolbarSeparator,
   Tooltip,
   TooltipProvider,