@estiva-app/ui 0.22.0 → 0.24.0

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", 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();
@@ -678,27 +687,10 @@ function AvatarGroup({ members, size = 24 }) {
 
 // src/Banner.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var TONE_STYLES = {
-  ok: "bg-success-muted text-success-default",
-  error: "bg-error-muted text-error-default",
-  info: "bg-info-muted text-info-default",
-  warning: "bg-warning-muted text-warning-default"
-};
-function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
-  const role = tone === "error" ? "alert" : "status";
-  if (!onDismiss) {
-    return /* @__PURE__ */ jsx12("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
-  }
-  return /* @__PURE__ */ jsxs7("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1", children }),
-    /* @__PURE__ */ jsx12(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
-  ] });
-}
 
 // src/Button.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -712,7 +704,7 @@ function Button({
 }) {
   const hasLeadingIcon = !!leadingIcon;
   const formBusy = useFormBusy();
-  const button = /* @__PURE__ */ jsxs8(
+  const button = /* @__PURE__ */ jsxs7(
     BaseButton3,
     {
       type,
@@ -759,7 +751,29 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx13(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx12(TooltipTrigger, { label: disabledReason, children: button }) : button;
+}
+
+// src/Banner.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  ok: "bg-success-muted text-success-default",
+  error: "bg-error-muted text-error-default",
+  info: "bg-info-muted text-info-default",
+  warning: "bg-warning-muted text-warning-default"
+};
+function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismiss", className }) {
+  const role = tone === "error" ? "alert" : "status";
+  if (!onDismiss && !icon && !action) {
+    return /* @__PURE__ */ jsx13("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+  }
+  const oneLine = Boolean(icon || action);
+  return /* @__PURE__ */ jsxs8("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    icon && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0", children: icon }),
+    /* @__PURE__ */ jsx13("span", { className: cn("min-w-0 flex-1", oneLine && "truncate"), children }),
+    action && /* @__PURE__ */ jsx13(Button, { variant: "muted", size: "small", className: "shrink-0", onClick: action.onClick, children: action.label }),
+    onDismiss && /* @__PURE__ */ jsx13(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx13(IconX2, { size: 16, stroke: 1.5 }) })
+  ] });
 }
 
 // src/Checkbox.tsx
@@ -1281,13 +1295,14 @@ var VIEWPORT_PAD3 = 8;
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-function EmptyState({ icon, message, scope = "page", className }) {
+function EmptyState({ icon, message, scope = "page", action, className }) {
   if (scope === "section") {
     return /* @__PURE__ */ jsx20("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
   return /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
     /* @__PURE__ */ jsx20("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx20(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx20("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+    /* @__PURE__ */ jsx20("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
+    action && /* @__PURE__ */ jsx20(Button, { variant: "outlined", className: "mt-2", onClick: action.onClick, children: action.label })
   ] });
 }
 
@@ -1400,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();
@@ -1938,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) && !disabled;
+  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 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),
+      onValueChange: (next) => {
+        if (!held) onChange(next);
+      },
+      ...held ? { open: false, onOpenChange: () => {
+      } } : {},
       disabled,
       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,
           {
@@ -2515,7 +2540,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,
@@ -2537,9 +2562,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 })
           }
         )
       }
@@ -2691,7 +2716,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: {
@@ -2720,7 +2745,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
         // 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: [
@@ -2741,10 +2766,24 @@ 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";
+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" })
+    ] }) }),
+    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 }) })
+  ] });
+}
+
 // src/CollapsibleSection.tsx
 import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2771,14 +2810,14 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs34(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx50(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx50(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx50(
+  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(
       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__ */ jsx50("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx51("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -2786,9 +2825,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     BaseTabs.Root,
     {
       value: active,
@@ -2796,14 +2835,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx52(
         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__ */ jsxs35(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs36(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -2816,9 +2855,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs35("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs36("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx51("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx52("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -2834,7 +2873,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 jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs37 } 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",
@@ -2870,16 +2909,16 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx52(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx53(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__ */ jsxs36("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx52(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx52("span", { className: LABEL_CLASSES, children: label })
+  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 })
     ] }),
-    hasAction && /* @__PURE__ */ jsx52(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext5(null);
@@ -2900,9 +2939,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx52(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs36(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx53(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs37(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx52(BaseToast.Portal, { children: /* @__PURE__ */ jsx52(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx52(ToastList, {}) }) })
+    /* @__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, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -2910,25 +2949,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx52(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx52(BaseToast.Title, { render: /* @__PURE__ */ jsx52("span", {}), className: LABEL_CLASSES })
+          /* @__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 })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx52(
+          actionLabel && /* @__PURE__ */ jsx53(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx52(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -2962,6 +3001,7 @@ export {
   CommandPaletteSearch,
   CommandPaletteWorking,
   ConfirmDialog,
+  ContainerHeader,
   DialogShell,
   Divider,
   EditableText,