@estiva-app/ui 0.23.0 → 0.24.1

package/dist/index.js

@@ -91,25 +91,30 @@ 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__ */ jsx3(TopBar, { variant, menu, logo, search, right: identity });
   if (variant === "floating") {
-    return /* @__PURE__ */ jsxs3("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
-      bar,
-      /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
-        nav,
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            className: cn(
-              "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
-              "signal:border signal:border-border-subtle signal:shadow-highlight-inset"
-            ),
-            children: [
-              banner,
-              /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
-            ]
-          }
-        )
+    return (
+      // `signal-canvas`: in the Signal theme, the preset draws the control-room dot
+      // grid behind everything in the frame (Peek's, moved here with the frame:
+      // UIG-14, Katerina, 19 September — the canvas is the theme's, not an app's).
+      /* @__PURE__ */ jsxs3("div", { className: "signal-canvas relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
+        bar,
+        /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
+          nav,
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
+                "signal:border signal:border-border-subtle signal:shadow-highlight-inset"
+              ),
+              children: [
+                banner,
+                /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+              ]
+            }
+          )
+        ] })
       ] })
-    ] });
+    );
   }
   return (
     /* `relative overflow-hidden` is the seal the floating manner already has
@@ -283,8 +288,8 @@ function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children })
   return /* @__PURE__ */ jsx7(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
-  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 }),
+  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1 shadow-lg", className), ...props, children: [
+    /* @__PURE__ */ jsx7("span", { className: "min-w-0 text-caption text-text-primary break-words", children: label }),
     shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
   ] });
 }
@@ -316,9 +321,10 @@ function TooltipSurface({ label, shortcut, placement }) {
     }
   ) });
 }
-function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
+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("div", { 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 })
   ] });
 }
@@ -343,48 +349,51 @@ function IconButton({
   tooltipShortcut,
   tooltipPlacement,
   type = "button",
+  href,
   ...props
 }) {
   const formBusy = useFormBusy();
-  const button = /* @__PURE__ */ jsx8(
+  const unusable = disabled || !!disabledReason || formBusy;
+  const look = (off) => cn(
+    // `shrink-0` stops a flex parent squashing the button; `self-center`
+    // stops one stretching it. Two different failures, and both have
+    // happened here: a row with no `items-*` drew this 24 wide and 228
+    // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
+    // is the size of its icon and its padding, whatever box it lands in.
+    //
+    // This is the one of the two that needs it: an IconButton states no
+    // height, so its cross size is `auto` and a stretching parent takes
+    // it. Measured in the same 260px row on 2026-09-12: 24px with this
+    // class, 226px without. `Button` states `h-8`/`h-6`, so it cannot be
+    // stretched and carries no `self-center` — see the note there.
+    "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer",
+    !off && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
+    !off && (variant === "muted" || variant === "resolve") && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+    !off && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
+    !off && variant === "current" && "hover:bg-bg-hover",
+    off && variant === "primary" && "bg-bg-disabled text-text-disabled",
+    off && (variant === "muted" || variant === "resolve") && "text-text-disabled",
+    off && variant === "outlined" && "border border-border-default text-text-disabled",
+    // Always, disabled too: the colour of where it sits, and Resolve's green.
+    variant === "current" && "text-current",
+    variant === "resolve" && "signal:hover:bg-success-muted signal:hover:text-success-default",
+    pressed && "bg-bg-active text-text-primary",
+    glow && "signal:shadow-glow-accent",
+    // `pointer-events-none` only where the button is truly out of reach:
+    // with a `disabledReason` the button IS the tooltip's trigger, and a
+    // trigger the pointer cannot land on never opens one. Base UI already
+    // swallows the click.
+    off && !disabledReason && "pointer-events-none",
+    off && "cursor-not-allowed",
+    className
+  );
+  const button = href && !unusable ? /* @__PURE__ */ jsx8("a", { href, className: look(false), ...props, children }) : /* @__PURE__ */ jsx8(
     BaseButton,
     {
       type,
-      disabled: disabled || !!disabledReason || formBusy,
+      disabled: unusable,
       focusableWhenDisabled: !!disabledReason,
-      className: (state) => cn(
-        // `shrink-0` stops a flex parent squashing the button; `self-center`
-        // stops one stretching it. Two different failures, and both have
-        // happened here: a row with no `items-*` drew this 24 wide and 228
-        // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
-        // is the size of its icon and its padding, whatever box it lands in.
-        //
-        // This is the one of the two that needs it: an IconButton states no
-        // height, so its cross size is `auto` and a stretching parent takes
-        // it. Measured in the same 260px row on 2026-09-12: 24px with this
-        // class, 226px without. `Button` states `h-8`/`h-6`, so it cannot be
-        // stretched and carries no `self-center` — see the note there.
-        "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer",
-        !state.disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
-        !state.disabled && (variant === "muted" || variant === "resolve") && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        !state.disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
-        !state.disabled && variant === "current" && "hover:bg-bg-hover",
-        state.disabled && variant === "primary" && "bg-bg-disabled text-text-disabled",
-        state.disabled && (variant === "muted" || variant === "resolve") && "text-text-disabled",
-        state.disabled && variant === "outlined" && "border border-border-default text-text-disabled",
-        // Always, disabled too: the colour of where it sits, and Resolve's green.
-        variant === "current" && "text-current",
-        variant === "resolve" && "signal:hover:bg-success-muted signal:hover:text-success-default",
-        pressed && "bg-bg-active text-text-primary",
-        glow && "signal:shadow-glow-accent",
-        // `pointer-events-none` only where the button is truly out of reach:
-        // with a `disabledReason` the button IS the tooltip's trigger, and a
-        // trigger the pointer cannot land on never opens one. Base UI already
-        // swallows the click.
-        state.disabled && !disabledReason && "pointer-events-none",
-        state.disabled && "cursor-not-allowed",
-        className
-      ),
+      className: (state) => look(state.disabled),
       "aria-pressed": pressed,
       ...props,
       children
@@ -434,7 +443,7 @@ function TypeIcon({ name }) {
   const Icon = ICON_BY_EXTENSION[extensionOf(name)] ?? IconFile;
   return /* @__PURE__ */ jsx9(Icon, { size: 20, stroke: 1.5 });
 }
-function Truncating({ text, hint, className, wrapperClassName }) {
+function Truncating({ text, hint, className, wrapperClassName, placement }) {
   const ref = useRef(null);
   const [cut, setCut] = useState(false);
   useLayoutEffect(() => {
@@ -456,7 +465,7 @@ function Truncating({ text, hint, className, wrapperClassName }) {
   }, [text, cut]);
   const line = /* @__PURE__ */ jsx9("span", { ref, className, children: text });
   if (!hint && !cut) return line;
-  return /* @__PURE__ */ jsx9(WithTooltip, { label: hint ?? text, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
+  return /* @__PURE__ */ jsx9(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
 }
 function AttachmentCard({
   name,
@@ -490,7 +499,7 @@ function AttachmentCard({
           children: [
             /* @__PURE__ */ jsx9("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx9(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx9(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx9(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx9("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx9("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
             /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
-              /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
+              /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
               /* @__PURE__ */ jsx9(
                 Truncating,
                 {
@@ -505,7 +514,7 @@ function AttachmentCard({
               {
                 type: "button",
                 "aria-label": `Remove ${name}`,
-                className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 transition-opacity",
+                className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity",
                 onClick: (event) => {
                   event.stopPropagation();
                   onRemove();
@@ -714,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"),
@@ -1406,6 +1415,7 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
       },
       onKeyDown,
       onSubmit: (event) => {
+        if (event.target !== event.currentTarget) return;
         event.preventDefault();
         if (busyNow.current) return;
         void onSubmit();
@@ -1422,7 +1432,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 } })
   ] });
@@ -1808,7 +1818,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
@@ -1944,56 +1954,65 @@ import { Select as BaseSelect } from "@base-ui/react/select";
 import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
-function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
+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);
+  const trigger = /* @__PURE__ */ jsxs22(
+    BaseSelect.Trigger,
+    {
+      "aria-label": ariaLabel,
+      "aria-required": aria["aria-required"],
+      "aria-disabled": held || void 0,
+      className: cn(
+        /*
+         * `min-w-0 max-w-full`: a trigger must never outgrow its container
+         * (Katerina, 2026-09-01 — a long label stretched the files panel's
+         * Lead row past its card). In a flex row the default min-width:auto
+         * forbids shrinking below the label's width, which is what kept
+         * `truncate` from ever engaging; in a block container max-w-full is
+         * the cap. Full-width callers are unaffected.
+         */
+        "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
+        "border-border-default text-text-primary outline-none transition-colors",
+        // The focused border survives a hover: hover alone strengthens the
+        // hairline, but hover while focused must not grey the focus colour —
+        // the stacked variant outranks plain hover by specificity.
+        !held && "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus",
+        "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
+        held && "cursor-not-allowed bg-bg-disabled text-text-disabled",
+        "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 min-h-6 px-2 text-caption",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs22("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+          selected?.leading && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+          /* @__PURE__ */ jsx30(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+        ] }),
+        /* @__PURE__ */ jsx30(
+          BaseSelect.Icon,
+          {
+            render: /* @__PURE__ */ jsx30(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs22(
     BaseSelect.Root,
     {
       value,
-      onValueChange: (next) => onChange(next),
-      disabled,
+      onValueChange: (next) => {
+        if (!held) onChange(next);
+      },
+      ...held ? { open: false, onOpenChange: () => {
+      } } : {},
+      disabled: disabled && !held,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs22(
-          BaseSelect.Trigger,
-          {
-            "aria-label": ariaLabel,
-            "aria-required": aria["aria-required"],
-            className: cn(
-              /*
-               * `min-w-0 max-w-full`: a trigger must never outgrow its container
-               * (Katerina, 2026-09-01 — a long label stretched the files panel's
-               * Lead row past its card). In a flex row the default min-width:auto
-               * forbids shrinking below the label's width, which is what kept
-               * `truncate` from ever engaging; in a block container max-w-full is
-               * the cap. Full-width callers are unaffected.
-               */
-              "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
-              "border-border-default text-text-primary outline-none transition-colors",
-              // The focused border survives a hover: hover alone strengthens the
-              // hairline, but hover while focused must not grey the focus colour —
-              // the stacked variant outranks plain hover by specificity.
-              "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
-              "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",
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsxs22("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-                selected?.leading && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-                /* @__PURE__ */ jsx30(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
-              ] }),
-              /* @__PURE__ */ jsx30(
-                BaseSelect.Icon,
-                {
-                  render: /* @__PURE__ */ jsx30(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-                }
-              )
-            ]
-          }
-        ),
+        held ? /* @__PURE__ */ jsx30(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
         /* @__PURE__ */ jsx30(BaseSelect.Portal, { children: /* @__PURE__ */ jsx30(
           BaseSelect.Positioner,
           {
@@ -2054,7 +2073,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",
@@ -2474,6 +2493,9 @@ function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
     }
   );
 }
+function ToolbarLink({ ref, href, ...props }) {
+  return /* @__PURE__ */ jsx40(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx40(IconButton, { href, ...props }) });
+}
 function ToolbarInput({ size, ...props }) {
   return /* @__PURE__ */ jsx40(BaseToolbar.Input, { render: /* @__PURE__ */ jsx40(TextInput, { size }), ...props });
 }
@@ -2521,7 +2543,7 @@ 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, wrapperClassName }) {
+function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, contentClassName, wrapperClassName }) {
   return /* @__PURE__ */ jsxs28(BasePreviewCard.Root, { children: [
     /* @__PURE__ */ jsx42(
       BasePreviewCard.Trigger,
@@ -2543,9 +2565,9 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         children: /* @__PURE__ */ jsx42(
           BasePreviewCard.Popup,
           {
-            className: cn("w-[360px] p-3 outline-none", className),
+            className: cn("w-[360px] p-0 outline-none", className),
             render: /* @__PURE__ */ jsx42(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3", children: content })
+            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2567,7 +2589,7 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
     {
       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(
@@ -2640,7 +2662,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 ? (
@@ -2697,7 +2719,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 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";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
+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", {})),
     props: {
@@ -2722,11 +2744,11 @@ 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).
-        (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
+        hover === "fill" && (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
         className
       ),
       children: [
@@ -2761,10 +2783,32 @@ function ContainerHeader({ title, chevron = false, actions, className }) {
   ] });
 }
 
+// src/ListColumn.tsx
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+function ListColumn({ title, chevron = false, actions, above, spacing = "rows", collapsed = false, children, className }) {
+  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__ */ jsx51(ContainerHeader, { title, chevron, actions }),
+        above,
+        /* @__PURE__ */ jsx51(ScrollArea, { className: "flex-1", contentClassName: cn("flex flex-col px-3 pt-4 pb-3", spacing === "rows" ? "gap-0.5" : "gap-1"), children })
+      ]
+    }
+  );
+}
+
 // 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 jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2791,14 +2835,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__ */ jsx52(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx52(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx52(
       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__ */ jsx52("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -2806,9 +2850,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 jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     BaseTabs.Root,
     {
       value: active,
@@ -2816,14 +2860,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx53(
         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,
@@ -2836,9 +2880,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__ */ jsx53("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -2854,7 +2898,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 jsx54, 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",
@@ -2890,16 +2934,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__ */ jsx54(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__ */ jsx54(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx54("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx54(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext5(null);
@@ -2920,9 +2964,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx53(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs37(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx54(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__ */ jsx54(BaseToast.Portal, { children: /* @__PURE__ */ jsx54(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx54(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -2930,25 +2974,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__ */ jsx54(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx54(BaseToast.Title, { render: /* @__PURE__ */ jsx54("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx53(
+          actionLabel && /* @__PURE__ */ jsx54(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx54(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3001,6 +3045,7 @@ export {
   InputChip,
   Kbd,
   Link,
+  ListColumn,
   Menu,
   MenuItem,
   MenuPanel,
@@ -3035,6 +3080,7 @@ export {
   Toolbar,
   ToolbarButton,
   ToolbarInput,
+  ToolbarLink,
   ToolbarSeparator,
   Tooltip,
   TooltipProvider,