@estiva-app/ui 0.18.0 → 0.20.0

package/dist/index.js

@@ -38,7 +38,7 @@ function cn(...inputs) {
 // 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 BAR = "z-10 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";
@@ -163,13 +163,13 @@ var VARIANT_CLASSES = {
   underlined: "underline underline-offset-2 hover:text-text-primary",
   plain: ""
 };
-function Link({ href, variant = "text", external = false, className, children, ...props }) {
+function Link({ href, variant = "text", external = false, truncate = false, className, children, ...props }) {
   return /* @__PURE__ */ jsx4(
     "a",
     {
       href,
       ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      className: cn(VARIANT_CLASSES[variant], className),
+      className: cn(VARIANT_CLASSES[variant], truncate && "truncate", className),
       ...props,
       children
     }
@@ -210,6 +210,7 @@ function Card({
   active = false,
   attention,
   unreadable = false,
+  clip = false,
   className,
   children,
   ...props
@@ -231,12 +232,16 @@ function Card({
     active && "bg-bg-selected border-accent-primary",
     !active && attention && ATTENTION_CLASSES[attention],
     unreadable && "border-dashed",
+    clip && "overflow-hidden",
     href && "block",
     className
   );
   if (href !== void 0) {
     const { ref, ...anchorProps } = props;
-    return /* @__PURE__ */ jsx5(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children });
+    return (
+      // @estiva-escape: a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
+      /* @__PURE__ */ jsx5(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children })
+    );
   }
   return /* @__PURE__ */ jsx5("div", { className: classes, ...props, children });
 }
@@ -298,19 +303,13 @@ function TooltipSurface({ label, shortcut, placement }) {
       children: /* @__PURE__ */ jsx7(
         BaseTooltip.Popup,
         {
-          render: /* @__PURE__ */ jsx7(
-            Tooltip,
-            {
-              label,
-              shortcut,
-              className: cn(
-                "transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none",
-                "data-[ending-style]:duration-[80ms] data-[instant]:duration-0",
-                "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
-                "data-[side=top]:data-[starting-style]:translate-y-[4px] data-[side=top]:data-[ending-style]:translate-y-[4px]",
-                "data-[side=bottom]:data-[starting-style]:-translate-y-[4px] data-[side=bottom]:data-[ending-style]:-translate-y-[4px]"
-              )
-            }
+          render: /* @__PURE__ */ jsx7(Tooltip, { label, shortcut }),
+          className: cn(
+            "transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none",
+            "data-[ending-style]:duration-[80ms] data-[instant]:duration-0",
+            "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+            "data-[side=top]:data-[starting-style]:translate-y-[4px] data-[side=top]:data-[ending-style]:translate-y-[4px]",
+            "data-[side=bottom]:data-[starting-style]:-translate-y-[4px] data-[side=bottom]:data-[ending-style]:-translate-y-[4px]"
           )
         }
       )
@@ -334,6 +333,8 @@ function TooltipTrigger({ label, shortcut, placement = "top", children }) {
 import { jsx as jsx8 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
+  pressed,
+  glow = false,
   className,
   children,
   disabled,
@@ -365,11 +366,17 @@ function IconButton({
         // 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" && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+        !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" && "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
@@ -378,6 +385,7 @@ function IconButton({
         state.disabled && "cursor-not-allowed",
         className
       ),
+      "aria-pressed": pressed,
       ...props,
       children
     }
@@ -471,75 +479,85 @@ function AttachmentCard({
   if (pending) {
     const failed = state === "failed";
     const warning = state === "warning";
-    return /* @__PURE__ */ jsxs5(
-      Card,
-      {
-        fill: "elevated",
-        className: cn("group relative flex items-center gap-2 w-[200px] p-1.5 pr-3", failed ? "border-error-default" : warning && "border-warning-default", className),
-        ...props,
-        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,
+    return (
+      // @estiva-escape: a failed or warning file's strong hairline is AttachmentCard's own state; Card's attention hairlines are the soft ones (UIG-9, Katerina 17 September)
+      /* @__PURE__ */ jsxs5(
+        Card,
+        {
+          fill: "elevated",
+          className: cn("group relative flex items-center gap-2 w-[200px] p-1.5 pr-3", failed ? "border-error-default" : warning && "border-warning-default", className),
+          ...props,
+          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: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
+                  hint: noteHint,
+                  className: cn(NOTE_CLASSES, failed ? "text-error-default" : warning ? "text-warning-default" : "text-text-secondary")
+                }
+              )
+            ] }),
+            onRemove && /* @__PURE__ */ jsx9(
+              BaseButton2,
               {
-                text: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
-                hint: noteHint,
-                className: cn(NOTE_CLASSES, failed ? "text-error-default" : warning ? "text-warning-default" : "text-text-secondary")
+                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",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onRemove();
+                },
+                children: /* @__PURE__ */ jsx9(IconX, { size: 11, stroke: 1.75 })
               }
             )
-          ] }),
-          onRemove && /* @__PURE__ */ jsx9(
-            BaseButton2,
-            {
-              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",
-              onClick: (event) => {
-                event.stopPropagation();
-                onRemove();
-              },
-              children: /* @__PURE__ */ jsx9(IconX, { size: 11, stroke: 1.75 })
-            }
-          )
-        ]
-      }
+          ]
+        }
+      )
     );
   }
-  const download = onDownload ? /* @__PURE__ */ jsx9(
-    IconButton,
-    {
-      variant: "muted",
-      tooltip: "Download",
-      "aria-label": `Download ${name}`,
-      className: "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity",
-      onClick: (event) => {
-        event.stopPropagation();
-        onDownload();
-      },
-      children: /* @__PURE__ */ jsx9(IconDownload, { size: 16, stroke: 1.5 })
-    }
+  const download = onDownload ? (
+    // @estiva-escape: Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
+    /* @__PURE__ */ jsx9(
+      IconButton,
+      {
+        variant: "muted",
+        tooltip: "Download",
+        "aria-label": `Download ${name}`,
+        className: "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity",
+        onClick: (event) => {
+          event.stopPropagation();
+          onDownload();
+        },
+        children: /* @__PURE__ */ jsx9(IconDownload, { size: 16, stroke: 1.5 })
+      }
+    )
   ) : null;
   if (state === "loading") {
     return (
       // `role="status"`: a plain box may not carry a name (axe, aria-prohibited-attr), and a
       // status says what it is doing — loading — to a reader that cannot see the pulse.
+      // @estiva-escape: the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
       /* @__PURE__ */ jsx9(Card, { role: "status", fill: "inset", "aria-busy": "true", "aria-label": `Loading ${name}`, className: cn("w-[180px] h-28 animate-pulse", className), ...props, children: null })
     );
   }
   if (state === "unreadable") {
-    return /* @__PURE__ */ jsxs5(Card, { fill: "inset", unreadable: true, className: cn("flex items-center gap-2 w-[240px] p-1.5 opacity-70", className), ...props, children: [
-      /* @__PURE__ */ jsx9("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-        /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
-        /* @__PURE__ */ jsx9("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
+    return (
+      // @estiva-escape: a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+      /* @__PURE__ */ jsxs5(Card, { fill: "inset", unreadable: true, className: cn("flex items-center gap-2 w-[240px] p-1.5 opacity-70", className), ...props, children: [
+        /* @__PURE__ */ jsx9("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
+          /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
+          /* @__PURE__ */ jsx9("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
+        ] })
       ] })
-    ] });
+    );
   }
   if (image && src) {
     const picture = /* @__PURE__ */ jsx9("img", { src, alt: name, className: "w-full h-28 object-cover" });
-    return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: "hairline", className: cn("group relative flex flex-col w-[180px] overflow-hidden", className), ...props, children: [
+    return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: "hairline", clip: true, className: cn("group relative flex flex-col w-[180px]", className), ...props, children: [
       onOpen ? /* @__PURE__ */ jsx9(
         BaseButton2,
         {
@@ -566,10 +584,13 @@ function AttachmentCard({
       /* @__PURE__ */ jsx9("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: href ? "hairline" : "none", className: cn("group flex items-center gap-2 w-[240px] p-1.5 pr-1", !href && "opacity-70", className), ...props, children: [
-    href ? /* @__PURE__ */ jsx9(Link, { href, external: true, variant: "plain", className: "flex items-center gap-2 min-w-0 flex-1 cursor-pointer", onClick: (event) => event.stopPropagation(), children: body }) : /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
-    download
-  ] });
+  return (
+    // @estiva-escape: a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+    /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: href ? "hairline" : "none", className: cn("group flex items-center gap-2 w-[240px] p-1.5 pr-1", !href && "opacity-70", className), ...props, children: [
+      href ? /* @__PURE__ */ jsx9(Link, { href, external: true, variant: "plain", className: "flex items-center gap-2 min-w-0 flex-1", onClick: (event) => event.stopPropagation(), children: body }) : /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
+      download
+    ] })
+  );
 }
 
 // src/Avatar.tsx
@@ -671,7 +692,7 @@ function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className
   }
   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, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
+    /* @__PURE__ */ jsx12(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
   ] });
 }
 
@@ -715,7 +736,7 @@ function Button({
         // 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"),
-        !state.disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold",
+        !state.disabled && (variant === "primary" || variant === "resolve") && "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold",
         !state.disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer",
         !state.disabled && variant === "muted" && "hover:bg-bg-hover text-text-primary cursor-pointer",
         !state.disabled && variant === "destructive" && "hover:bg-error-muted text-error-default cursor-pointer",
@@ -727,6 +748,8 @@ function Button({
         // and a prevented `onClick`), so nothing else needs it.
         state.disabled && !disabledReason && "pointer-events-none",
         state.disabled && variant === "outlined" && "border border-border-default",
+        // Disabled too, as it always drew.
+        variant === "resolve" && "signal:bg-transparent signal:border signal:border-border-default signal:text-text-primary signal:shadow-none signal:hover:bg-success-muted signal:hover:border-success-outline signal:hover:text-success-default signal:transition-colors",
         className
       ),
       ...props,
@@ -755,7 +778,8 @@ function squareClasses(checked, disabled, interactive, className) {
 }
 var tickClasses = (checked) => cn("flex", !checked && "invisible");
 var WORDS_CLASSES = "text-body-2 text-text-primary";
-function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, className, ...aria }) {
+var ROW_CLASSES = "flex shrink-0 items-center gap-3 h-10 px-3 rounded-lg transition-colors";
+function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row, leading, className, ...aria }) {
   const formBusy = useFormBusy();
   const disabled = ownDisabled || formBusy;
   if (!onChange) {
@@ -780,6 +804,13 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, cla
     }
   );
   if (label === void 0) return box;
+  if (row) {
+    return /* @__PURE__ */ jsx14(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs9(BaseField.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
+      leading,
+      /* @__PURE__ */ jsx14("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
+      box
+    ] }) });
+  }
   return /* @__PURE__ */ jsx14(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs9(BaseField.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
     box,
     /* @__PURE__ */ jsx14("span", { className: WORDS_CLASSES, children: label })
@@ -814,8 +845,8 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
 
 // src/CommandPalette.tsx
 import {
-  createContext as createContext3,
-  useContext as useContext3,
+  createContext as createContext4,
+  useContext as useContext4,
   useEffect,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo2,
@@ -833,10 +864,42 @@ import { Combobox } from "@base-ui/react/combobox";
 import { IconX as IconX3 } from "@tabler/icons-react";
 
 // src/Menu.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 
+// src/Divider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { Separator } from "@base-ui/react/separator";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var DividerInPanel = createContext2(false);
+function Divider({ orientation = "horizontal", label, tone = "default", className }) {
+  const inset = useContext2(DividerInPanel) ? "mx-0" : "mx-3";
+  if (label && orientation === "horizontal") {
+    const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
+    return /* @__PURE__ */ jsxs11(
+      Separator,
+      {
+        orientation: "horizontal",
+        "aria-label": label,
+        className: cn("flex shrink-0 items-center gap-2", inset, className),
+        children: [
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx16("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    Separator,
+    {
+      orientation,
+      className: cn("shrink-0 bg-border-subtle", orientation === "horizontal" ? cn("h-px", inset) : "w-px self-stretch", className)
+    }
+  );
+}
+
 // src/triggerDisabled.ts
 function triggerDisabled(trigger) {
   const props = trigger.props;
@@ -844,13 +907,14 @@ function triggerDisabled(trigger) {
 }
 
 // src/SectionLabel.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx16(
+import { jsx as jsx17 } from "react/jsx-runtime";
+function SectionLabel({ children, tone = "primary", className }) {
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
-        "text-h5 leading-3 text-text-primary signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        tone === "secondary" ? "text-text-secondary" : "text-text-primary",
         className
       ),
       children
@@ -859,10 +923,10 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-var MenuContext = createContext2(null);
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var MenuContext = createContext3(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: cn(
@@ -892,7 +956,7 @@ var VIEWPORT_PAD2 = 8;
 var HOVER_OPEN_DELAY = 0;
 var HOVER_CLOSE_DELAY = 150;
 function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange, actionsRef, children, className, contentClassName }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     BaseMenu.Root,
     {
       open,
@@ -900,7 +964,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
       actionsRef,
       modal: false,
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           BaseMenu.Trigger,
           {
             render: trigger,
@@ -910,7 +974,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             closeDelay: HOVER_CLOSE_DELAY
           }
         ),
-        /* @__PURE__ */ jsx17(BaseMenu.Portal, { children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(BaseMenu.Portal, { children: /* @__PURE__ */ jsx18(
           BaseMenu.Positioner,
           {
             side: "bottom",
@@ -918,13 +982,13 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             sideOffset: GAP2,
             collisionPadding: VIEWPORT_PAD2,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               BaseMenu.Popup,
               {
                 "data-interactive": true,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx17(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx17(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2 [&>[role=separator]]:mx-0", contentClassName), children: /* @__PURE__ */ jsx17(MenuContext.Provider, { value: { openOnHover }, children }) })
+                render: /* @__PURE__ */ jsx18(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2", contentClassName), children: /* @__PURE__ */ jsx18(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx18(DividerInPanel.Provider, { value: true, children }) }) })
               }
             )
           }
@@ -934,26 +998,26 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
   );
 }
 function MenuSub({ label, leading, selected, children, className }) {
-  const menu = useContext2(MenuContext);
+  const menu = useContext3(MenuContext);
   if (!isProduction() && menu?.openOnHover) {
     console.error(
       '[@estiva-app/ui] Menu: `openOnHover` and `MenuSub` cannot be used together \u2014 leaving the submenu panel strands the menu open. Open this menu on a press instead. See Menu.mdx, "Hover-opened menus".'
     );
   }
-  return /* @__PURE__ */ jsxs11(BaseMenu.SubmenuRoot, { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs12(BaseMenu.SubmenuRoot, { children: [
+    /* @__PURE__ */ jsx18(
       BaseMenu.SubmenuTrigger,
       {
         openOnHover: true,
         delay: 0,
         closeDelay: 150,
         nativeButton: true,
-        render: /* @__PURE__ */ jsx17("button", { type: "button" }),
+        render: /* @__PURE__ */ jsx18("button", { type: "button" }),
         className: menuItemClassName({ size: "default", selected }),
-        children: /* @__PURE__ */ jsx17(MenuItemBody, { label, leading, submenu: true })
+        children: /* @__PURE__ */ jsx18(MenuItemBody, { label, leading, submenu: true })
       }
     ),
-    /* @__PURE__ */ jsx17(BaseMenu.Portal, { children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(BaseMenu.Portal, { children: /* @__PURE__ */ jsx18(
       BaseMenu.Positioner,
       {
         side: "inline-end",
@@ -961,7 +1025,7 @@ function MenuSub({ label, leading, selected, children, className }) {
         sideOffset: GAP2,
         collisionPadding: VIEWPORT_PAD2,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx17(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx17(MenuPanel, {}), children })
+        children: /* @__PURE__ */ jsx18(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx18(MenuPanel, {}), children })
       }
     ) })
   ] });
@@ -996,25 +1060,25 @@ function menuItemClassName({ size, selected, className }) {
   );
 }
 function MenuItemBody({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected }) {
-  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx17(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx17(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    leading && /* @__PURE__ */ jsx17("span", { className: "flex shrink-0 items-center", children: leading }),
-    children ?? /* @__PURE__ */ jsxs11("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx17("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx17("span", { className: "truncate text-caption text-text-secondary", children: description })
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx18(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx18(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: leading }),
+    children ?? /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__PURE__ */ jsx18("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx18("span", { className: "truncate text-caption text-text-secondary", children: description })
     ] }),
     (edge || hint) && // One grid cell holding both, right-aligned: the slot is as wide as
     // the wider of the two and never changes, so revealing the hint moves
     // nothing. No transition here either — the hint switches on the same
     // :hover / `selected` as the fill, in the same frame.
-    /* @__PURE__ */ jsxs11("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-      edge && /* @__PURE__ */ jsx17("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
-      hint && /* @__PURE__ */ jsx17("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
+    /* @__PURE__ */ jsxs12("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+      edge && /* @__PURE__ */ jsx18("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
+      hint && /* @__PURE__ */ jsx18("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
     ] })
   ] });
 }
 function MenuItem({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }) {
-  const body = /* @__PURE__ */ jsx17(
+  const body = /* @__PURE__ */ jsx18(
     MenuItemBody,
     {
       label,
@@ -1031,14 +1095,14 @@ function MenuItem({ label, children, size = "default", description, leading, tra
     }
   );
   const rowClassName = menuItemClassName({ size, selected, className });
-  if (!useContext2(MenuContext)) {
-    return /* @__PURE__ */ jsx17("button", { type: "button", className: rowClassName, ...props, children: body });
+  if (!useContext3(MenuContext)) {
+    return /* @__PURE__ */ jsx18("button", { type: "button", className: rowClassName, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     BaseMenu.Item,
     {
       nativeButton: true,
-      render: /* @__PURE__ */ jsx17("button", { type: "button" }),
+      render: /* @__PURE__ */ jsx18("button", { type: "button" }),
       className: rowClassName,
       ...props,
       children: body
@@ -1046,31 +1110,31 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs11("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx17(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx17("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider", children: target })
+  return /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+    /* @__PURE__ */ jsx18(Kbd, { children: "\u21A9 Enter" }),
+    target && /* @__PURE__ */ jsx18("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
-  const inMenu = useContext2(MenuContext) !== null;
-  const heading = /* @__PURE__ */ jsx17("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx17(SectionLabel, { className: "text-text-secondary", children: label }) });
+  const inMenu = useContext3(MenuContext) !== null;
+  const heading = /* @__PURE__ */ jsx18("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx18(SectionLabel, { tone: "secondary", children: label }) });
   if (!inMenu) {
-    return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs11(BaseMenu.Group, { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx17(BaseMenu.GroupLabel, { render: heading }),
+  return /* @__PURE__ */ jsxs12(BaseMenu.Group, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx18(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx17("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx18("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var CHIP_BOX = (
   // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
   // rounded-sm corners — never a forced circle — and the chip's corner
@@ -1081,10 +1145,10 @@ var CHIP_LABEL = "text-caption font-medium text-text-primary";
 var CHIP_REMOVE = "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary";
 var chipPadding = (leading, removable) => cn(leading ? "pl-[2px]" : "pl-2", removable ? "pr-1" : "pr-2");
 function InputChip({ label, leading, onRemove, removeLabel, truncate, className }) {
-  return /* @__PURE__ */ jsxs12("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
-    leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: leading }),
-    /* @__PURE__ */ jsx18("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
-    onRemove && /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs13("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
+    leading && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center", children: leading }),
+    /* @__PURE__ */ jsx19("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
+    onRemove && /* @__PURE__ */ jsx19(
       BaseButton4,
       {
         type: "button",
@@ -1094,7 +1158,7 @@ function InputChip({ label, leading, onRemove, removeLabel, truncate, className
         },
         className: cn(CHIP_REMOVE, truncate && "shrink-0"),
         "aria-label": removeLabel ?? `Remove ${label}`,
-        children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx19(IconX3, { size: 10, stroke: 1.5 })
       }
     )
   ] });
@@ -1147,7 +1211,7 @@ function ChipInput({
       setQuery("");
     }
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     Combobox.Root,
     {
       multiple: true,
@@ -1164,13 +1228,13 @@ function ChipInput({
       filter,
       itemToStringLabel: (option) => option.label,
       children: [
-        /* @__PURE__ */ jsxs12(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
-          value.map((option) => /* @__PURE__ */ jsxs12(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
-            chipLeading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
-            /* @__PURE__ */ jsx18("span", { className: CHIP_LABEL, children: option.label }),
-            /* @__PURE__ */ jsx18(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 }) })
+        /* @__PURE__ */ jsxs13(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
+          value.map((option) => /* @__PURE__ */ jsxs13(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
+            chipLeading && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
+            /* @__PURE__ */ jsx19("span", { className: CHIP_LABEL, children: option.label }),
+            /* @__PURE__ */ jsx19(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx19(IconX3, { size: 10, stroke: 1.5 }) })
           ] }, option.id)),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             Combobox.Input,
             {
               autoFocus,
@@ -1182,18 +1246,18 @@ function ChipInput({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx18(Combobox.Portal, { children: /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(Combobox.Portal, { children: /* @__PURE__ */ jsx19(
           Combobox.Positioner,
           {
             anchor: box,
             sideOffset: GAP3,
             collisionPadding: VIEWPORT_PAD3,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx18(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx18(MenuPanel, {}), children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx18(Combobox.List, { children: (option) => /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx19(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx19(MenuPanel, {}), children: /* @__PURE__ */ jsx19(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx19(Combobox.List, { children: (option) => /* @__PURE__ */ jsx19(
               Combobox.Item,
               {
                 value: option,
-                render: /* @__PURE__ */ jsx18(
+                render: /* @__PURE__ */ jsx19(
                   MenuItem,
                   {
                     size: "tall",
@@ -1216,21 +1280,21 @@ var VIEWPORT_PAD3 = 8;
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function EmptyState({ icon, message, scope = "page", className }) {
   if (scope === "section") {
-    return /* @__PURE__ */ jsx19("p", { className: cn("text-caption text-text-muted", className), children: message });
+    return /* @__PURE__ */ jsx20("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
-    /* @__PURE__ */ jsx19("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx19(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx19("p", { className: "text-body-2 text-text-secondary text-center", 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 })
   ] });
 }
 
 // src/Field.tsx
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField2 } from "@base-ui/react/field";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var LINE_STYLES = {
   helper: "text-caption text-text-muted",
   warning: "text-caption text-warning-default",
@@ -1240,26 +1304,26 @@ function Field({ label, required = false, helper, error, children }) {
   const control = required && isValidElement(children) ? cloneElement(children, {
     "aria-required": children.props["aria-required"] ?? true
   }) : children;
-  return /* @__PURE__ */ jsxs14(BaseField2.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs14(BaseField2.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+  return /* @__PURE__ */ jsxs15(BaseField2.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs15(BaseField2.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
       label,
-      required && /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1.5", children: [
       control,
-      error != null ? /* @__PURE__ */ jsx20(BaseField2.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField2.Description, { className: LINE_STYLES.helper, children: helper }) : null
+      error != null ? /* @__PURE__ */ jsx21(BaseField2.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx21(BaseField2.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 });
+  return /* @__PURE__ */ jsx21("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
 }
 
 // src/Form.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
 import { Fieldset } from "@base-ui/react/fieldset";
 import { Form as BaseForm } from "@base-ui/react/form";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])';
 var ONE_LINE = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
 function usable(element) {
@@ -1318,7 +1382,7 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
     const oneLine = ONE_LINE.has((target.getAttribute("type") ?? "").toLowerCase()) && target.getAttribute("role") !== "combobox";
     if (enterSends && oneLine) form.current?.requestSubmit();
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     BaseForm,
     {
       ref: form,
@@ -1340,32 +1404,32 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
         if (busyNow.current) return;
         void onSubmit();
       },
-      children: /* @__PURE__ */ jsx21(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx21(FormBusyContext.Provider, { value: busy, children }) })
+      children: /* @__PURE__ */ jsx22(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx22(FormBusyContext.Provider, { value: busy, children }) })
     }
   );
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx22("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx23("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
 }
 var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
 function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx22(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx22(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  return /* @__PURE__ */ jsxs16("div", { className: "flex 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 } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx22("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx22(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx23("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx23(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/CommandPalette.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var PaletteContext = createContext3(null);
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var PaletteContext = createContext4(null);
 function usePalette(part) {
-  const palette = useContext3(PaletteContext);
+  const palette = useContext4(PaletteContext);
   if (!palette) throw new Error(`[@estiva-app/ui] ${part} must be inside a CommandPalette.`);
   return palette;
 }
@@ -1388,9 +1452,9 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
     return () => cancelAnimationFrame(frame);
   });
   const context = useMemo2(() => ({ where, modKey, popupRef }), [where, modKey]);
-  return /* @__PURE__ */ jsx23(Dialog.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs16(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx23(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-    /* @__PURE__ */ jsx23(Dialog.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(Dialog.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs17(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx24(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+    /* @__PURE__ */ jsx24(Dialog.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx24(
       Dialog.Popup,
       {
         ref: popupRef,
@@ -1400,13 +1464,13 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
           if (e.target === popupRef.current) firstControl(popupRef.current)?.focus();
         },
         className: "flex w-[658px] max-w-[calc(100vw-32px)] flex-col overflow-hidden rounded-lg border border-border-default bg-bg-elevated shadow-lg outline-none",
-        children: /* @__PURE__ */ jsx23(PaletteContext.Provider, { value: context, children })
+        children: /* @__PURE__ */ jsx24(PaletteContext.Provider, { value: context, children })
       }
     ) })
   ] }) });
 }
 function LevelChip({ chip, onBack }) {
-  return /* @__PURE__ */ jsx23(InputChip, { label: chip.label, leading: chip.leading, onRemove: onBack, removeLabel: `Leave ${chip.label}`, truncate: true, className: "max-w-[272px] shrink-0" });
+  return /* @__PURE__ */ jsx24(InputChip, { label: chip.label, leading: chip.leading, onRemove: onBack, removeLabel: `Leave ${chip.label}`, truncate: true, className: "max-w-[272px] shrink-0" });
 }
 function useBack(chip, popupRef) {
   return () => {
@@ -1417,10 +1481,10 @@ function useBack(chip, popupRef) {
 }
 function Footer({ keys }) {
   const { where } = usePalette("The footer");
-  return /* @__PURE__ */ jsxs16("div", { className: "flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted", children: [
-    /* @__PURE__ */ jsx23("span", { className: "min-w-0 flex-1 truncate", children: where }),
-    keys.map(([key, word]) => /* @__PURE__ */ jsxs16("span", { className: "flex shrink-0 items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx23(Kbd, { children: key }),
+  return /* @__PURE__ */ jsxs17("div", { className: "flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted", children: [
+    /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 truncate", children: where }),
+    keys.map(([key, word]) => /* @__PURE__ */ jsxs17("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx24(Kbd, { children: key }),
       " ",
       word
     ] }, key))
@@ -1497,7 +1561,7 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
     ...chip && query === "" ? [["Backspace", "back"]] : [],
     ["Esc", "close"]
   ];
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     Autocomplete.Root,
     {
       items,
@@ -1520,10 +1584,10 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
         setLitId(id);
       },
       children: [
-        /* @__PURE__ */ jsxs16("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-          /* @__PURE__ */ jsx23(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
-          chip && /* @__PURE__ */ jsx23(LevelChip, { chip, onBack: back }),
-          /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs17("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+          /* @__PURE__ */ jsx24(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
+          chip && /* @__PURE__ */ jsx24(LevelChip, { chip, onBack: back }),
+          /* @__PURE__ */ jsx24(
             Autocomplete.Input,
             {
               ref: inputRef,
@@ -1535,43 +1599,43 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs16(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
-          children != null && /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
-          /* @__PURE__ */ jsx23(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs16(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx23(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx23(SectionLabel, { className: "text-text-secondary", children: group.value }) }),
-            /* @__PURE__ */ jsx23(Autocomplete.Collection, { children: (row) => (
+        /* @__PURE__ */ jsxs17(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
+          children != null && /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
+          /* @__PURE__ */ jsx24(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs17(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx24(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx24(SectionLabel, { tone: "secondary", children: group.value }) }),
+            /* @__PURE__ */ jsx24(Autocomplete.Collection, { children: (row) => (
               /* The menu row, as the list's own option — the way Select
                  puts it on `Select.Item`. One row, two parts. */
-              /* @__PURE__ */ jsx23(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx24(
                 MenuItemBody,
                 {
                   size: "tall",
                   label: row.label,
                   description: row.description,
-                  leading: /* @__PURE__ */ jsx23(RowLeading, { row }),
+                  leading: /* @__PURE__ */ jsx24(RowLeading, { row }),
                   submenu: !!row.onGoIn,
-                  hint: row.onGoIn ? /* @__PURE__ */ jsx23(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx23(EnterHint, {})
+                  hint: row.onGoIn ? /* @__PURE__ */ jsx24(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx24(EnterHint, {})
                 }
               ) }, row.id)
             ) })
           ] }, group.value) }),
-          /* @__PURE__ */ jsx23(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs16(Fragment3, { children: [
-            /* @__PURE__ */ jsx23(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
-            /* @__PURE__ */ jsx23("span", { className: "text-caption text-text-muted", children: pending })
+          /* @__PURE__ */ jsx24(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+            /* @__PURE__ */ jsx24(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
+            /* @__PURE__ */ jsx24("span", { className: "text-caption text-text-muted", children: pending })
           ] }) }),
-          notes.map((note) => /* @__PURE__ */ jsx23("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx23(FieldLine, { children: note }) }, note)),
-          /* @__PURE__ */ jsx23(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx23(EmptyState, { scope: "section", message: empty }) })
+          notes.map((note) => /* @__PURE__ */ jsx24("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx24(FieldLine, { children: note }) }, note)),
+          /* @__PURE__ */ jsx24(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx24(EmptyState, { scope: "section", message: empty }) })
         ] }),
-        /* @__PURE__ */ jsx23(Footer, { keys })
+        /* @__PURE__ */ jsx24(Footer, { keys })
       ]
     }
   );
 }
 function RowLeading({ row }) {
   if (row.icon != null) {
-    return /* @__PURE__ */ jsx23("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
+    return /* @__PURE__ */ jsx24("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
   }
-  return /* @__PURE__ */ jsx23("span", { className: "flex size-8 items-center justify-center", children: row.leading });
+  return /* @__PURE__ */ jsx24("span", { className: "flex size-8 items-center justify-center", children: row.leading });
 }
 var TEXT_TYPES = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
 function isTextField(el) {
@@ -1613,56 +1677,56 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
     ...backNamed ? [["Backspace", "back"]] : [],
     ["Esc", "close"]
   ];
-  return /* @__PURE__ */ jsxs16("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-      icon != null && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
-      /* @__PURE__ */ jsx23(LevelChip, { chip, onBack: back })
+  return /* @__PURE__ */ jsxs17("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+      icon != null && /* @__PURE__ */ jsx24("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
+      /* @__PURE__ */ jsx24(LevelChip, { chip, onBack: back })
     ] }),
-    /* @__PURE__ */ jsxs16(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, className: "flex min-h-0 flex-col", children: [
-      /* @__PURE__ */ jsx23(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-4", children }) }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
-        /* @__PURE__ */ jsx23("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx23(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx23(FieldLine, { tone: "error", children: error }) : null }),
-        /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsxs17(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, className: "flex min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsx24(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-4", children }) }),
+      /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
+        /* @__PURE__ */ jsx24("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx24(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx24(FieldLine, { tone: "error", children: error }) : null }),
+        /* @__PURE__ */ jsx24(
           Button,
           {
             type: "submit",
             variant: "primary",
             disabled: busy,
             disabledReason: busy ? void 0 : submitWaits,
-            leadingIcon: busy ? /* @__PURE__ */ jsx23(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
+            leadingIcon: busy ? /* @__PURE__ */ jsx24(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
             children: working ? working.button : submitLabel
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx23(Footer, { keys })
+    /* @__PURE__ */ jsx24(Footer, { keys })
   ] });
 }
 var BAR_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
 function CommandPaletteWorking({ children, bars = 2 }) {
-  return /* @__PURE__ */ jsxs16("div", { role: "status", className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs16("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
-      /* @__PURE__ */ jsx23(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
+  return /* @__PURE__ */ jsxs17("div", { role: "status", className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
+      /* @__PURE__ */ jsx24(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
       children
     ] }),
-    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx23(SkeletonBar, { className: cn("h-3", width) }, width))
+    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx24(SkeletonBar, { className: cn("h-3", width) }, width))
   ] });
 }
 function CommandPaletteAnswer({ children, note }) {
   const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
-  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
-    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx23("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
-      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx23("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx24("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx24("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
     ) }, i)),
-    note && /* @__PURE__ */ jsx23(FieldLine, { children: note })
+    note && /* @__PURE__ */ jsx24(FieldLine, { children: note })
   ] });
 }
 function CommandPaletteQuote({ children }) {
-  return /* @__PURE__ */ jsx23("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
+  return /* @__PURE__ */ jsx24("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
 }
 
 // src/InlineChip.tsx
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var INLINE_CHIP_CLASSES = "inline-flex h-[1.4em] items-center gap-1 rounded-sm px-1 mx-0.5 align-top text-body-2 font-normal select-none";
 var INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
@@ -1684,49 +1748,20 @@ function inlineChipClassName(tone, className) {
   return cn(INLINE_CHIP_CLASSES, INLINE_CHIP_TONE_CLASSES[tone], className);
 }
 function InlineChip({ tone = "neutral", icon, href, className, children, ...props }) {
-  const body = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    icon && /* @__PURE__ */ jsx24("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+  const body = /* @__PURE__ */ jsxs18(Fragment4, { children: [
+    icon && /* @__PURE__ */ jsx25("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
     children
   ] });
   const classes = inlineChipClassName(tone, className);
   if (href === void 0) {
-    return /* @__PURE__ */ jsx24("span", { className: classes, ...props, children: body });
+    return /* @__PURE__ */ jsx25("span", { className: classes, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx24("a", { href, className: classes, ...props, children: body });
+  return /* @__PURE__ */ jsx25("a", { href, className: classes, ...props, children: body });
 }
 
 // src/IdentityMenu.tsx
 import { useCallback, useRef as useRef4 } from "react";
 
-// src/Divider.tsx
-import { Separator } from "@base-ui/react/separator";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-function Divider({ orientation = "horizontal", label, tone = "default", className }) {
-  if (label && orientation === "horizontal") {
-    const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
-    return /* @__PURE__ */ jsxs18(
-      Separator,
-      {
-        orientation: "horizontal",
-        "aria-label": label,
-        className: cn("flex shrink-0 items-center gap-2 mx-3", className),
-        children: [
-          /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
-          /* @__PURE__ */ jsx25("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
-          /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx25(
-    Separator,
-    {
-      orientation,
-      className: cn("shrink-0 bg-border-subtle", orientation === "horizontal" ? "h-px mx-3" : "w-px self-stretch", className)
-    }
-  );
-}
-
 // src/Person.tsx
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
@@ -1799,7 +1834,7 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
   const appRows = typeof children === "function" ? children(onClose) : children;
   return /* @__PURE__ */ jsxs21(Fragment5, { children: [
     /* @__PURE__ */ jsxs21(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx28(MenuRow, { children: /* @__PURE__ */ jsx28(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx28(MenuRow, { children: /* @__PURE__ */ jsx28("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx28(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
       /* @__PURE__ */ jsx28(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
       me.email && /* @__PURE__ */ jsxs21(Note, { children: [
         me.email,
@@ -2090,14 +2125,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                   }
                 )
               ] }),
-              bodyMaxHeight ? /* @__PURE__ */ jsx33(
-                ScrollArea,
-                {
-                  className: cn(footer != null && "border-b border-border-subtle"),
-                  viewportClassName: bodyMaxHeight,
-                  contentClassName: cn("pl-5 pr-4 py-4", bodyClassName),
-                  children
-                }
+              bodyMaxHeight ? (
+                // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
+                /* @__PURE__ */ jsx33("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx33(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
               ) : /* @__PURE__ */ jsx33("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
               footer != null && /* @__PURE__ */ jsx33("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
@@ -2127,12 +2157,11 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       alert: true,
       title,
       onClose,
-      bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
       footer: /* @__PURE__ */ jsxs24(Fragment6, { children: [
         /* @__PURE__ */ jsx34(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
         /* @__PURE__ */ jsx34(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children
+      children: /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
@@ -2311,8 +2340,11 @@ function Breadcrumb({ items, className }) {
     const crumb = item.href ? (
       // `plain` adds no look of its own: a crumb keeps the trail's size and
       // tone, and brightens on hover. The package's own Link, so a trail
-      // follows whatever a link learns to do (UIG-5).
-      /* @__PURE__ */ jsx37(Link, { ref: setLabelRef, variant: "plain", href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label })
+      // follows whatever a link learns to do (UIG-5). The size and tone are
+      // on a box around it, which the link takes them from, rather than
+      // pushed into it (UIG-9); the link is still the one element that
+      // truncates and is measured.
+      /* @__PURE__ */ jsx37("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx37(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
     ) : /* @__PURE__ */ jsx37("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
     return /* @__PURE__ */ jsxs25(Fragment7, { children: [
       index > 0 && /* @__PURE__ */ jsx37("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
@@ -2395,8 +2427,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
-                    contentClassName: cn("flex flex-col p-2 [&>[role=separator]]:mx-0", contentClassName),
-                    children
+                    contentClassName: cn("flex flex-col p-2", contentClassName),
+                    children: /* @__PURE__ */ jsx39(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -2468,8 +2500,8 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
-        className: "size-7 text-h3 leading-none",
-        children: /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", children: option.emoji })
+        className: "size-7",
+        children: /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2507,7 +2539,7 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
           {
             className: cn("w-[360px] p-3 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 [&>*]:shrink-0", children: content })
+            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3", children: content })
           }
         )
       }
@@ -2799,7 +2831,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext4, useContext as useContext4, useMemo as useMemo4 } from "react";
+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";
@@ -2850,7 +2882,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
     hasAction && /* @__PURE__ */ jsx52(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
-var ToastContext = createContext4(null);
+var ToastContext = createContext5(null);
 var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
   const manager = useMemo4(() => BaseToast.createToastManager(), []);
@@ -2906,7 +2938,7 @@ function ToastList() {
   });
 }
 function useToast() {
-  const ctx = useContext4(ToastContext);
+  const ctx = useContext5(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }