@estiva-app/ui 0.12.0 → 0.12.2

package/dist/index.js

@@ -20,7 +20,7 @@ var FONT_SIZE_TOKENS = [
   "chip"
 ];
 var BOX_SHADOW_TOKENS = ["sm", "md", "lg", "focus-ring", "glow-warning", "glow-success", "glow-accent", "highlight-inset"];
-var DROP_SHADOW_TOKENS = ["glow-success", "glow-accent"];
+var DROP_SHADOW_TOKENS = ["glow-success", "glow-accent", "glow-warning"];
 var twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
@@ -34,11 +34,38 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/TopBar.tsx
+// src/ScrollArea.tsx
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { jsx, jsxs } from "react/jsx-runtime";
+var BAR = "flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0";
+var THUMB = "rounded-full bg-border-strong";
+function ScrollArea({ orientation = "vertical", className, viewportClassName, contentClassName, viewportRef, onScroll, children }) {
+  const vertical = orientation !== "horizontal";
+  const horizontal = orientation !== "vertical";
+  return /* @__PURE__ */ jsxs(BaseScrollArea.Root, { className: cn("relative min-h-0 min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      BaseScrollArea.Viewport,
+      {
+        ref: viewportRef,
+        onScroll,
+        className: cn(
+          "h-full w-full outline-none data-[has-overflow-x]:overscroll-x-contain data-[has-overflow-y]:overscroll-y-contain",
+          viewportClassName
+        ),
+        children: /* @__PURE__ */ jsx(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
+      }
+    ),
+    vertical && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
+    horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
+    vertical && horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Corner, {})
+  ] });
+}
+
+// src/TopBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function TopBar({ variant = "solid", menu, logo, search, right, className }) {
   const floating = variant === "floating";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "header",
     {
       className: cn(
@@ -47,27 +74,27 @@ function TopBar({ variant = "solid", menu, logo, search, right, className }) {
         className
       ),
       children: [
-        (menu || logo) && /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
+        (menu || logo) && /* @__PURE__ */ jsxs2("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
           menu,
-          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
+          logo && /* @__PURE__ */ jsx2("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
+        /* @__PURE__ */ jsx2("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
+        /* @__PURE__ */ jsx2("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
       ]
     }
   );
 }
 
 // src/AppShell.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav, children }) {
-  const bar = /* @__PURE__ */ jsx2(TopBar, { variant, menu, logo, search, right: identity });
+  const bar = /* @__PURE__ */ jsx3(TopBar, { variant, menu, logo, search, right: identity });
   if (variant === "floating") {
-    return /* @__PURE__ */ jsxs2("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
+    return /* @__PURE__ */ jsxs3("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
       bar,
-      /* @__PURE__ */ jsxs2("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
         nav,
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             className: cn(
@@ -76,7 +103,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
             ),
             children: [
               banner,
-              /* @__PURE__ */ jsx2("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+              /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
             ]
           }
         )
@@ -84,20 +111,22 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
     ] });
   }
   return (
-    /* `relative overflow-hidden` is the seal the floating manner already has,
+    /* `relative overflow-hidden` is the seal the floating manner already has
+       (and the ScrollArea's own root is `relative`, so an absolutely placed
+       stray inside a page now belongs to the region and scrolls with it),
        and it takes both halves: an absolutely positioned descendant with no
        positioned ancestor belongs to the *viewport*, so a scroll container
        never clips it and the document itself gains its position as scroll
        range — the whole page scrolls, navigation and top bar included.
        `relative` claims such strays for the shell; `overflow-hidden` clips
        them at its edge. Either alone seals nothing. */
-    /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
       bar,
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1", children: [
         nav,
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
           banner,
-          /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+          /* @__PURE__ */ jsx3(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex min-h-full flex-col", children: /* @__PURE__ */ jsx3("main", { className: "flex min-w-0 flex-1 flex-col", children }) })
         ] })
       ] })
     ] })
@@ -107,7 +136,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
 // src/Avatar.tsx
 import { useState } from "react";
 import { IconUserFilled } from "@tabler/icons-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
 var hueFor = (key) => {
   let h = 0;
@@ -123,13 +152,13 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
   const [broken, setBroken] = useState(false);
   const label = name || alt;
   const picture = src && !broken ? src : void 0;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ...spoken ? { role: "img", "aria-label": spoken } : { "aria-hidden": true },
       className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className),
       style: { width: size, height: size },
-      children: picture ? /* @__PURE__ */ jsx3("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx3(
+      children: picture ? /* @__PURE__ */ jsx4("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx4(
         "div",
         {
           className: "w-full h-full flex items-center justify-center font-semibold leading-none",
@@ -143,29 +172,29 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
           },
           children: initialsFor(label)
         }
-      ) : /* @__PURE__ */ jsx3("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx3(IconUserFilled, { size: Math.round(size * 0.5) }) })
+      ) : /* @__PURE__ */ jsx4("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx4(IconUserFilled, { size: Math.round(size * 0.5) }) })
     }
   );
 }
 
 // src/AvatarGroup.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function AvatarGroup({ members, size = 24 }) {
   const visible = members.slice(0, 3);
   const overlap = Math.round(size / 3);
   const ring = size / 12;
-  return /* @__PURE__ */ jsx4("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
     /*
       The wrapper carries the overlap and the ring; the face carries
       neither. It must never clip — see the note at the top of the file —
       so it has the avatar's own radius and no overflow of its own.
     */
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "span",
       {
         className: "relative flex rounded-sm",
         style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
-        children: /* @__PURE__ */ jsx4(Avatar, { size, name: member.name, src: member.picture, label: member.name })
+        children: /* @__PURE__ */ jsx5(Avatar, { size, name: member.name, src: member.picture, label: member.name })
       },
       i
     )
@@ -182,9 +211,9 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
 // src/Kbd.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Kbd({ children, className }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "kbd",
     {
       className: cn(
@@ -199,21 +228,21 @@ function Kbd({ children, className }) {
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
 function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children }) {
-  return /* @__PURE__ */ jsx6(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
+  return /* @__PURE__ */ jsx7(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
-  return /* @__PURE__ */ jsxs3("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg", className), ...props, children: [
-    /* @__PURE__ */ jsx6("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
-    shortcut && /* @__PURE__ */ jsx6(Kbd, { children: shortcut })
+  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg", className), ...props, children: [
+    /* @__PURE__ */ jsx7("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
+    shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
   ] });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
 function TooltipSurface({ label, shortcut, placement }) {
-  return /* @__PURE__ */ jsx6(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(
     BaseTooltip.Positioner,
     {
       side: placement,
@@ -222,10 +251,10 @@ function TooltipSurface({ label, shortcut, placement }) {
       collisionPadding: VIEWPORT_PAD,
       positionMethod: "fixed",
       className: "pointer-events-none z-[9999]",
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         BaseTooltip.Popup,
         {
-          render: /* @__PURE__ */ jsx6(
+          render: /* @__PURE__ */ jsx7(
             Tooltip,
             {
               label,
@@ -245,20 +274,20 @@ function TooltipSurface({ label, shortcut, placement }) {
   ) });
 }
 function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
-  return /* @__PURE__ */ jsxs3(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx6(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx6("div", { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
-    /* @__PURE__ */ jsx6(TooltipSurface, { label, shortcut, placement })
+  return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7("div", { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 function TooltipTrigger({ label, shortcut, placement = "top", children }) {
-  return /* @__PURE__ */ jsxs3(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx6(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
-    /* @__PURE__ */ jsx6(TooltipSurface, { label, shortcut, placement })
+  return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
+    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 
 // src/IconButton.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
   className,
@@ -271,7 +300,7 @@ function IconButton({
   type = "button",
   ...props
 }) {
-  const button = /* @__PURE__ */ jsx7(
+  const button = /* @__PURE__ */ jsx8(
     BaseButton,
     {
       type,
@@ -299,13 +328,13 @@ function IconButton({
   );
   const label = disabledReason ?? tooltip;
   if (label) {
-    return /* @__PURE__ */ jsx7(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx8(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
   }
   return button;
 }
 
 // src/Banner.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var TONE_STYLES = {
   ok: "bg-success-muted text-success-default",
   error: "bg-error-muted text-error-default",
@@ -315,17 +344,17 @@ var TONE_STYLES = {
 function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
   const role = tone === "error" ? "alert" : "status";
   if (!onDismiss) {
-    return /* @__PURE__ */ jsx8("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+    return /* @__PURE__ */ jsx9("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
   }
-  return /* @__PURE__ */ jsxs4("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1", children }),
-    /* @__PURE__ */ jsx8(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx8(IconX, { size: 16, stroke: 1.5 }) })
+  return /* @__PURE__ */ jsxs5("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1", children }),
+    /* @__PURE__ */ jsx9(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx9(IconX, { size: 16, stroke: 1.5 }) })
   ] });
 }
 
 // src/Button.tsx
 import { Button as BaseButton2 } from "@base-ui/react/button";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -338,7 +367,7 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  const button = /* @__PURE__ */ jsxs5(
+  const button = /* @__PURE__ */ jsxs6(
     BaseButton2,
     {
       type,
@@ -372,13 +401,13 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx9(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx10(TooltipTrigger, { label: disabledReason, children: button }) : button;
 }
 
 // src/Checkbox.tsx
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { IconCheck } from "@tabler/icons-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function squareClasses(checked, disabled, interactive, className) {
   return cn(
     "inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors",
@@ -391,9 +420,9 @@ function squareClasses(checked, disabled, interactive, className) {
 var tickClasses = (checked) => cn("flex", !checked && "invisible");
 function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
   if (!onChange) {
-    return /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx10("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx10(IconCheck, { size: 12, stroke: 3 }) }) });
+    return /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx11("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) }) });
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     BaseCheckbox.Root,
     {
       checked,
@@ -403,13 +432,13 @@ function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
       onCheckedChange: (next) => onChange(next),
       onClick: (e) => e.stopPropagation(),
       className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx10(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx10(IconCheck, { size: 12, stroke: 3 }) })
+      children: /* @__PURE__ */ jsx11(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
 }
 
 // src/Chip.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
   brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
@@ -419,8 +448,8 @@ var typeStyles = {
   error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
-    leadingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+  return /* @__PURE__ */ jsxs7("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
+    leadingIcon && /* @__PURE__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
     label && // A chip given a `max-w-*` cuts a long label with an ellipsis instead
     // of growing past it — Ship's project chip on an issue row
     // (2026-09-09). Clipped sideways only: `overflow-x-clip`, not
@@ -429,8 +458,8 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
     // the screenshot diff caught every descender cut off. `clip` is the
     // one overflow that leaves the other axis visible. A chip with no cap
     // draws exactly as before.
-    /* @__PURE__ */ jsx11("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
-    trailingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+    /* @__PURE__ */ jsx12("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
+    trailingIcon && /* @__PURE__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
@@ -467,31 +496,6 @@ function triggerDisabled(trigger) {
   return !!(props.disabled || props.disabledReason);
 }
 
-// src/ScrollArea.tsx
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var BAR = "flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0";
-var THUMB = "rounded-full bg-border-strong";
-function ScrollArea({ orientation = "vertical", className, viewportClassName, contentClassName, children }) {
-  const vertical = orientation !== "horizontal";
-  const horizontal = orientation !== "vertical";
-  return /* @__PURE__ */ jsxs7(BaseScrollArea.Root, { className: cn("relative min-h-0 min-w-0", className), children: [
-    /* @__PURE__ */ jsx12(
-      BaseScrollArea.Viewport,
-      {
-        className: cn(
-          "h-full w-full outline-none data-[has-overflow-x]:overscroll-x-contain data-[has-overflow-y]:overscroll-y-contain",
-          viewportClassName
-        ),
-        children: /* @__PURE__ */ jsx12(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
-      }
-    ),
-    vertical && /* @__PURE__ */ jsx12(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5"), children: /* @__PURE__ */ jsx12(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
-    horizontal && /* @__PURE__ */ jsx12(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5"), children: /* @__PURE__ */ jsx12(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
-    vertical && horizontal && /* @__PURE__ */ jsx12(BaseScrollArea.Corner, {})
-  ] });
-}
-
 // src/SectionLabel.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
@@ -1088,6 +1092,11 @@ function Note({ children }) {
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField } from "@base-ui/react/field";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var LINE_STYLES = {
+  helper: "text-caption text-text-muted",
+  warning: "text-caption text-warning-default",
+  error: "text-caption text-error-default"
+};
 function Field({ label, required = false, helper, error, children }) {
   const control = required && isValidElement(children) ? cloneElement(children, {
     "aria-required": children.props["aria-required"] ?? true
@@ -1099,10 +1108,13 @@ function Field({ label, required = false, helper, error, children }) {
     ] }),
     /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
       control,
-      error != null ? /* @__PURE__ */ jsx20(BaseField.Error, { match: true, className: "text-caption text-error-default", children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField.Description, { className: "text-caption text-text-muted", children: helper }) : null
+      error != null ? /* @__PURE__ */ jsx20(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
     ] })
   ] });
 }
+function FieldLine({ tone = "helper", children, className }) {
+  return /* @__PURE__ */ jsx20("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+}
 
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
@@ -1257,7 +1269,7 @@ import { Dialog } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { IconX as IconX3 } from "@tabler/icons-react";
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width = 502, alert = false }) {
+function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog;
   const popupRef = useRef3(null);
   return /* @__PURE__ */ jsx24(
@@ -1287,7 +1299,15 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx24("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              bodyMaxHeight ? /* @__PURE__ */ jsx24(
+                ScrollArea,
+                {
+                  className: cn(footer != null && "border-b border-border-subtle"),
+                  viewportClassName: bodyMaxHeight,
+                  contentClassName: cn("pl-5 pr-4 py-4", bodyClassName),
+                  children
+                }
+              ) : /* @__PURE__ */ jsx24("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
               footer != null && /* @__PURE__ */ jsx24("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
@@ -1573,7 +1593,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
           {
             anchor: anchorTarget,
             side,
-            align: align === "right" ? "end" : "start",
+            align: align === "right" ? "end" : align === "center" ? "center" : "start",
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD4,
             className: "z-50 data-[anchor-hidden]:hidden",
@@ -1843,7 +1863,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 Fragment5, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", render, className }) {
+function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
   const titleElement = useRender({
     render: render ?? (chevron ? /* @__PURE__ */ jsx41("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx41("span", {})),
     props: {
@@ -1877,6 +1897,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
       ),
       children: [
         titleElement,
+        trailing != null && /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center", children: trailing }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx41(
           "div",
           {
@@ -1914,7 +1935,7 @@ function writeStored(key, open) {
   } catch {
   }
 }
-function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, actions, showActions, children, className, contentClassName }) {
+function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }) {
   const [openState, setOpenState] = useState6(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
@@ -1923,7 +1944,7 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     onOpenChange?.(next);
   };
   return /* @__PURE__ */ jsxs29(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx42(SectionHeader, { title, chevron: true, isExpanded: open, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx42(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx42(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx42(Collapsible.Trigger, {}) }),
     /* @__PURE__ */ jsx42(
       Collapsible.Panel,
       {
@@ -1984,25 +2005,42 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 // src/Toast.tsx
 import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo3, useState as useState7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { IconCircleCheck } from "@tabler/icons-react";
+import { IconAlertCircle, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
 import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
-  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]"
+  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
+  warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
+  error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]"
+};
+var ICONS = {
+  success: IconCircleCheck,
+  brand: IconCircleCheck,
+  neutral: IconCircleCheck,
+  warning: IconAlertCircle,
+  error: IconCircleX
 };
 var ICON_STYLES = {
   success: "signal:text-success-default signal:drop-shadow-glow-success",
   brand: "signal:text-text-interactive signal:drop-shadow-glow-accent",
-  neutral: "signal:text-text-secondary"
+  neutral: "signal:text-text-secondary",
+  warning: "signal:text-warning-default signal:drop-shadow-glow-warning",
+  // No glow: the theme defines `--glow-warning`, `--glow-success` and
+  // `--glow-accent` and no error glow, and a colour with no token is not
+  // approximated here (D16).
+  error: "signal:text-error-default"
 };
 var ACTION_BORDER_STYLES = {
   success: "signal:border signal:border-border-default signal:hover:border-border-strong",
   brand: "signal:border signal:border-border-default signal:hover:border-border-strong",
-  neutral: "border border-border-default"
+  neutral: "border border-border-default",
+  warning: "signal:border signal:border-border-default signal:hover:border-border-strong",
+  error: "signal:border signal:border-border-default signal:hover:border-border-strong"
 };
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
+  const LeadingIcon = ICONS[type];
   return /* @__PURE__ */ jsxs31(
     "div",
     {
@@ -2016,7 +2054,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
       ),
       children: [
         /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx44(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
+          leadingIcon && /* @__PURE__ */ jsx44(LeadingIcon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
           /* @__PURE__ */ jsx44("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
         ] }),
         hasAction && /* @__PURE__ */ jsx44(
@@ -2100,6 +2138,7 @@ export {
   EmptyState,
   EnterHint,
   Field,
+  FieldLine,
   IconButton,
   IdentityMenu,
   IdentityPanel,