@estiva-app/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -19,7 +19,7 @@ var FONT_SIZE_TOKENS = [
   "input-helper",
   "chip"
 ];
-var BOX_SHADOW_TOKENS = ["sm", "md", "lg", "focus-ring", "glow-warning", "highlight-inset"];
+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 twMerge = extendTailwindMerge({
   extend: {
@@ -119,22 +119,33 @@ var initialsFor = (name) => {
   const initials = words.map((w) => w[0]).join("") || name.trim().charAt(0);
   return initials.toUpperCase();
 };
-function Avatar({ src, name, alt = "", size = 36, className }) {
+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("div", { 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: alt || name || "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: "w-full h-full flex items-center justify-center font-semibold leading-none",
-      style: {
-        color: "#08121c",
-        fontSize: Math.round(size * 0.36),
-        background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`
-      },
-      children: initialsFor(label)
+      ...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(
+        "div",
+        {
+          className: "w-full h-full flex items-center justify-center font-semibold leading-none",
+          style: {
+            // The one ink colour that reads on all eight hues, which are a
+            // palette rather than tokens (see the note at the top) — so its
+            // ink cannot be a token either.
+            color: "#08121c",
+            fontSize: Math.round(size * 0.36),
+            background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`
+          },
+          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__ */ 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) }) }) });
+  );
 }
 
 // src/AvatarGroup.tsx
@@ -154,7 +165,7 @@ function AvatarGroup({ members, size = 24 }) {
       {
         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, alt: member.name })
+        children: /* @__PURE__ */ jsx4(Avatar, { size, name: member.name, src: member.picture, label: member.name })
       },
       i
     )
@@ -162,28 +173,18 @@ function AvatarGroup({ members, size = 24 }) {
 }
 
 // src/Banner.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var TONE_STYLES = {
-  ok: "bg-success-muted text-success-default",
-  error: "bg-error-muted text-error-default",
-  info: "bg-info-muted text-info-default",
-  warning: "bg-warning-muted text-warning-default"
-};
-function Banner({ tone, children, className }) {
-  return /* @__PURE__ */ jsx5("div", { role: tone === "error" ? "alert" : "status", className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
-}
+import { IconX } from "@tabler/icons-react";
 
-// src/Button.tsx
+// src/IconButton.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
 
 // src/Tooltip.tsx
-import { useCallback, useLayoutEffect, useRef, useState as useState2 } from "react";
-import { createPortal } from "react-dom";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
 // src/Kbd.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Kbd({ children, className }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "kbd",
     {
       className: cn(
@@ -198,48 +199,133 @@ function Kbd({ children, className }) {
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function Tooltip({ label, shortcut, className }) {
-  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), children: [
-    /* @__PURE__ */ jsx7("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
-    shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
+import { jsx as jsx6, jsxs as jsxs3 } 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 });
+}
+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 })
   ] });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
+function TooltipSurface({ label, shortcut, placement }) {
+  return /* @__PURE__ */ jsx6(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx6(
+    BaseTooltip.Positioner,
+    {
+      side: placement,
+      align: "center",
+      sideOffset: GAP,
+      collisionPadding: VIEWPORT_PAD,
+      positionMethod: "fixed",
+      className: "pointer-events-none z-[9999]",
+      children: /* @__PURE__ */ jsx6(
+        BaseTooltip.Popup,
+        {
+          render: /* @__PURE__ */ jsx6(
+            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]"
+              )
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
 function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
-  const [show, setShow] = useState2(false);
-  const ref = useRef(null);
-  const tooltipRef = useRef(null);
-  const [style, setStyle] = useState2({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
-  const reposition = useCallback(() => {
-    const trigger = ref.current;
-    const tip = tooltipRef.current;
-    if (!trigger || !tip) return;
-    const triggerRect = trigger.getBoundingClientRect();
-    const tipRect = tip.getBoundingClientRect();
-    let top = placement === "bottom" ? triggerRect.bottom + GAP : triggerRect.top - tipRect.height - GAP;
-    if (placement === "top" && top < VIEWPORT_PAD) top = triggerRect.bottom + GAP;
-    else if (placement === "bottom" && top + tipRect.height > window.innerHeight - VIEWPORT_PAD) top = triggerRect.top - tipRect.height - GAP;
-    top = Math.max(VIEWPORT_PAD, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_PAD));
-    let left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
-    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_PAD));
-    setStyle({ position: "fixed", top, left, zIndex: 9999, pointerEvents: "none", visibility: "visible" });
-  }, [placement]);
-  useLayoutEffect(() => {
-    if (show) reposition();
-  }, [show, reposition]);
-  return /* @__PURE__ */ jsxs3("div", { ref, className: cn("inline-flex shrink-0", wrapperClassName), onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [
-    children,
-    show && createPortal(
-      /* @__PURE__ */ jsx7("div", { ref: tooltipRef, style, children: /* @__PURE__ */ jsx7(Tooltip, { label, shortcut }) }),
-      document.body
-    )
+  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 })
+  ] });
+}
+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 })
   ] });
 }
 
-// src/Button.tsx
+// src/IconButton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function IconButton({
+  variant = "muted",
+  className,
+  children,
+  disabled,
+  disabledReason,
+  tooltip,
+  tooltipShortcut,
+  tooltipPlacement,
+  type = "button",
+  ...props
+}) {
+  const button = /* @__PURE__ */ jsx7(
+    BaseButton,
+    {
+      type,
+      disabled: disabled || !!disabledReason,
+      focusableWhenDisabled: !!disabledReason,
+      className: (state) => cn(
+        "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 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 === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
+        state.disabled && variant === "primary" && "bg-bg-disabled text-text-disabled",
+        state.disabled && variant === "muted" && "text-text-disabled",
+        state.disabled && variant === "outlined" && "border border-border-default text-text-disabled",
+        // `pointer-events-none` only where the button is truly out of reach:
+        // with a `disabledReason` the button IS the tooltip's trigger, and a
+        // trigger the pointer cannot land on never opens one. Base UI already
+        // swallows the click.
+        state.disabled && !disabledReason && "pointer-events-none",
+        state.disabled && "cursor-not-allowed",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+  const label = disabledReason ?? tooltip;
+  if (label) {
+    return /* @__PURE__ */ jsx7(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";
+var TONE_STYLES = {
+  ok: "bg-success-muted text-success-default",
+  error: "bg-error-muted text-error-default",
+  info: "bg-info-muted text-info-default",
+  warning: "bg-warning-muted text-warning-default"
+};
+function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
+  const role = tone === "error" ? "alert" : "status";
+  if (!onDismiss) {
+    return /* @__PURE__ */ jsx8("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 }) })
+  ] });
+}
+
+// src/Button.tsx
+import { Button as BaseButton2 } from "@base-ui/react/button";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -252,8 +338,8 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  const button = /* @__PURE__ */ jsxs4(
-    BaseButton,
+  const button = /* @__PURE__ */ jsxs5(
+    BaseButton2,
     {
       type,
       disabled: disabled || !!disabledReason,
@@ -269,7 +355,13 @@ function Button({
         !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",
-        state.disabled && "bg-bg-disabled text-text-disabled pointer-events-none",
+        state.disabled && "bg-bg-disabled text-text-disabled",
+        // `pointer-events-none` only where the button is truly out of reach.
+        // With a `disabledReason` the button IS the tooltip's trigger, and a
+        // trigger the pointer cannot land on never opens one — Base UI already
+        // swallows the click (`focusableWhenDisabled` gives `aria-disabled`
+        // and a prevented `onClick`), so nothing else needs it.
+        state.disabled && !disabledReason && "pointer-events-none",
         state.disabled && variant === "outlined" && "border border-border-default",
         className
       ),
@@ -280,13 +372,13 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx8(WithTooltip, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx9(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 jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } 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",
@@ -299,24 +391,25 @@ 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__ */ jsx9("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx9("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx9(IconCheck, { size: 12, stroke: 3 }) }) });
+    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__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     BaseCheckbox.Root,
     {
       checked,
       disabled,
       "aria-label": aria["aria-label"],
+      "aria-required": aria["aria-required"],
       onCheckedChange: (next) => onChange(next),
       onClick: (e) => e.stopPropagation(),
       className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx9(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx9(IconCheck, { size: 12, stroke: 3 }) })
+      children: /* @__PURE__ */ jsx10(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx10(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
 }
 
 // src/Chip.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } 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",
@@ -326,17 +419,17 @@ 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__ */ jsxs5("div", { className: cn("inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1", typeStyles[type], className), children: [
-    leadingIcon && /* @__PURE__ */ jsx10("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
-    label && /* @__PURE__ */ jsx10("span", { className: "text-chip whitespace-nowrap signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
-    trailingIcon && /* @__PURE__ */ jsx10("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+  return /* @__PURE__ */ jsxs6("div", { className: cn("inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1", typeStyles[type], className), children: [
+    leadingIcon && /* @__PURE__ */ jsx11("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+    label && /* @__PURE__ */ jsx11("span", { className: "text-chip whitespace-nowrap 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 })
   ] });
 }
 
 // src/ChipInput.tsx
-import { useState as useState4, useRef as useRef3, useMemo, useEffect as useEffect2, useLayoutEffect as useLayoutEffect3 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
-import { IconX } from "@tabler/icons-react";
+import { useState as useState2, useRef, useMemo, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { IconX as IconX2 } from "@tabler/icons-react";
 
 // src/fit.ts
 var MARGIN = 8;
@@ -354,35 +447,16 @@ function fitMenu({
   const maxHeight = Math.max(Math.min(cap, openUp ? above : below), 120);
   return openUp ? { left, bottom: viewport.height - anchor.top + GAP2, maxHeight } : { left, top: anchor.bottom + GAP2, maxHeight };
 }
-function clampBox({
-  box,
-  viewport
-}) {
-  const left = Math.max(MARGIN, Math.min(box.left, viewport.width - box.width - MARGIN));
-  const maxHeight = Math.max(Math.min(box.height, viewport.height - 2 * MARGIN), 120);
-  const top = Math.max(MARGIN, Math.min(box.top, viewport.height - maxHeight - MARGIN));
-  return { left, top, maxHeight };
-}
-function fitSubmenu({
-  row,
-  panel,
-  viewport
-}) {
-  const fitsRight = row.right + GAP2 + panel.width <= viewport.width - MARGIN;
-  const left = Math.max(MARGIN, fitsRight ? row.right + GAP2 : row.left - GAP2 - panel.width);
-  const top = Math.max(MARGIN, Math.min(row.top, viewport.height - panel.height - MARGIN));
-  return { left, top };
-}
 
 // src/Menu.tsx
-import { createContext, useCallback as useCallback2, useContext, useEffect, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { createContext, useContext } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
-import { createPortal as createPortal2 } from "react-dom";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 
 // src/SectionLabel.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
       className: cn(
@@ -395,224 +469,216 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var MenuHoverContext = createContext(null);
+import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var MenuContext = createContext(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
-      className: cn("flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg", className),
+      className: cn(
+        "flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg",
+        /*
+         * A divider in a menu runs the width of the rows it separates.
+         *
+         * `Divider` is inset 12px each side, which is right in a page and
+         * wrong here: measured in a 180px menu, the rule started 21px from the
+         * panel's edge where the rows start at 9px — 12px narrower on each side
+         * than the things it divides. `IdentityMenu` was already cancelling it
+         * by hand with `mx-0`, which is the sign it belonged here (Katerina,
+         * 2026-09-08). Direct children only, so a divider a caller puts inside
+         * a row keeps its own spacing.
+         */
+        "[&>[role=separator]]:mx-0",
+        className
+      ),
       ...props,
       children
     }
   );
 }
-function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false, children, className }) {
-  const ref = useRef2(null);
-  const leaveTimer = useRef2(void 0);
-  const hold = useCallback2(() => clearTimeout(leaveTimer.current), []);
-  const release = useCallback2(() => {
-    if (!closeOnLeave) return;
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(onClose, 150);
-  }, [closeOnLeave, onClose]);
-  useEffect(() => () => clearTimeout(leaveTimer.current), []);
-  const portalled = Boolean(anchor || position);
-  const [placed, setPlaced] = useState3(null);
-  useEffect(() => {
-    const onDown = (event) => {
-      if (!ref.current?.contains(event.target)) onClose();
-    };
-    const onKey = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("mousedown", onDown);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", onDown);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [onClose]);
-  const posLeft = position && "left" in position ? position.left : void 0;
-  const posRight = position && "right" in position ? position.right : void 0;
-  const posTop = position?.top;
-  useLayoutEffect2(() => {
-    if (!portalled || !ref.current) return;
-    const viewport = { width: window.innerWidth, height: window.innerHeight };
-    const menu = ref.current;
-    if (anchor) {
-      const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
-      const left = align === "right" ? rect.right - menu.offsetWidth : rect.left;
-      setPlaced(
-        fitMenu({
-          anchor: { left, top: rect.top, bottom: rect.bottom },
-          menu: { width: menu.offsetWidth, contentHeight: menu.scrollHeight },
-          viewport
-        })
-      );
-    } else if (posTop !== void 0) {
-      const left = posLeft ?? viewport.width - (posRight ?? 0) - menu.offsetWidth;
-      setPlaced(clampBox({ box: { left, top: posTop, width: menu.offsetWidth, height: menu.offsetHeight }, viewport }));
-    }
-  }, [portalled, anchor, align, posLeft, posRight, posTop]);
-  useEffect(() => {
-    if (!anchor) return;
-    const onScroll = (event) => {
-      if (event.target instanceof Node && ref.current?.contains(event.target)) return;
-      onClose();
-    };
-    window.addEventListener("resize", onClose);
-    window.addEventListener("scroll", onScroll, true);
-    return () => {
-      window.removeEventListener("resize", onClose);
-      window.removeEventListener("scroll", onScroll, true);
-    };
-  }, [anchor, onClose]);
-  const style = portalled ? placed ? { left: placed.left, top: placed.top, bottom: placed.bottom, maxHeight: placed.maxHeight } : (
-    // The provisional render: measured by the layout effect, never seen.
-    { left: 0, top: 0, visibility: "hidden" }
-  ) : void 0;
-  const node = /* @__PURE__ */ jsx12(MenuHoverContext.Provider, { value: { hold, release }, children: /* @__PURE__ */ jsx12(
-    MenuPanel,
+var isProduction = () => globalThis.process?.env?.NODE_ENV === "production";
+var GAP3 = 4;
+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 }) {
+  return /* @__PURE__ */ jsxs7(
+    BaseMenu.Root,
     {
-      ref,
-      role: "menu",
-      "data-interactive": true,
-      className: cn(
-        "z-50 min-w-[180px]",
-        portalled ? "fixed overflow-y-auto" : "absolute right-0 top-full mt-1",
-        className
-      ),
-      style,
-      onClick: (event) => event.stopPropagation(),
-      onMouseEnter: closeOnLeave ? hold : void 0,
-      onMouseLeave: closeOnLeave ? release : void 0,
-      children
+      open,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      actionsRef,
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsx13(
+          BaseMenu.Trigger,
+          {
+            render: trigger,
+            openOnHover,
+            delay: HOVER_OPEN_DELAY,
+            closeDelay: HOVER_CLOSE_DELAY
+          }
+        ),
+        /* @__PURE__ */ jsx13(BaseMenu.Portal, { children: /* @__PURE__ */ jsx13(
+          BaseMenu.Positioner,
+          {
+            side: "bottom",
+            align: align === "right" ? "end" : "start",
+            sideOffset: GAP3,
+            collisionPadding: VIEWPORT_PAD2,
+            className: "z-50 data-[anchor-hidden]:hidden",
+            children: /* @__PURE__ */ jsx13(
+              BaseMenu.Popup,
+              {
+                "data-interactive": true,
+                className: cn("min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none", className),
+                render: /* @__PURE__ */ jsx13(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx13(MenuContext.Provider, { value: { openOnHover }, children })
+              }
+            )
+          }
+        ) })
+      ]
     }
-  ) });
-  return portalled ? createPortal2(node, document.body) : node;
+  );
 }
 function MenuSub({ label, leading, selected, children, className }) {
-  const [open, setOpen] = useState3(false);
-  const rowRef = useRef2(null);
-  const panelRef = useRef2(null);
-  const closeTimer = useRef2(void 0);
-  const [placed, setPlaced] = useState3(null);
-  const menuHover = useContext(MenuHoverContext);
-  const enter = () => {
-    clearTimeout(closeTimer.current);
-    menuHover?.hold();
-    setOpen(true);
-  };
-  const leave = () => {
-    closeTimer.current = setTimeout(() => setOpen(false), 150);
-    menuHover?.release();
-  };
-  useEffect(() => () => clearTimeout(closeTimer.current), []);
-  useLayoutEffect2(() => {
-    if (!open || !rowRef.current || !panelRef.current) {
-      setPlaced(null);
-      return;
-    }
-    const row = rowRef.current.getBoundingClientRect();
-    setPlaced(
-      fitSubmenu({
-        row: { left: row.left, right: row.right, top: row.top },
-        panel: { width: panelRef.current.offsetWidth, height: panelRef.current.offsetHeight },
-        viewport: { width: window.innerWidth, height: window.innerHeight }
-      })
+  const menu = useContext(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".'
     );
-  }, [open]);
-  return /* @__PURE__ */ jsxs6("div", { ref: rowRef, onMouseEnter: enter, onMouseLeave: leave, children: [
-    /* @__PURE__ */ jsx12(MenuItem, { label, leading, selected, submenu: true }),
-    open && createPortal2(
-      /* @__PURE__ */ jsx12(
-        MenuPanel,
-        {
-          ref: panelRef,
-          role: "menu",
-          "data-interactive": true,
-          className: cn("fixed z-50 w-[160px]", className),
-          style: placed ?? { left: 0, top: 0, visibility: "hidden" },
-          onMouseEnter: enter,
-          onMouseLeave: leave,
-          children
-        }
-      ),
-      document.body
-    )
+  }
+  return /* @__PURE__ */ jsxs7(BaseMenu.SubmenuRoot, { children: [
+    /* @__PURE__ */ jsx13(
+      BaseMenu.SubmenuTrigger,
+      {
+        openOnHover: true,
+        delay: 0,
+        closeDelay: 150,
+        nativeButton: true,
+        render: /* @__PURE__ */ jsx13("button", { type: "button" }),
+        className: menuItemClassName({ size: "default", selected }),
+        children: /* @__PURE__ */ jsx13(MenuItemBody, { label, leading, submenu: true })
+      }
+    ),
+    /* @__PURE__ */ jsx13(BaseMenu.Portal, { children: /* @__PURE__ */ jsx13(
+      BaseMenu.Positioner,
+      {
+        side: "inline-end",
+        align: "start",
+        sideOffset: GAP3,
+        collisionPadding: VIEWPORT_PAD2,
+        className: "z-50 data-[anchor-hidden]:hidden",
+        children: /* @__PURE__ */ jsx13(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx13(MenuPanel, {}), children })
+      }
+    ) })
+  ] });
+}
+function menuItemClassName({ size, selected, className }) {
+  return cn(
+    // shrink-0: a menu is a flex column that scrolls at its max height,
+    // and a flex child shrinks before its container does — so every row
+    // in an overflowing menu was squashed to its `min-h`, and a row given
+    // an explicit height silently lost it (Peek's `[` menu: h-12 rows
+    // measured 40px). The same fix NavItem took on 2026-09-02.
+    // `group`: the `hint` slot reveals itself from this row's own :hover,
+    // so the hint and the fill are one CSS state change, not two engines.
+    //
+    // No transition on the fill (Katerina, 2026-09-05). It faded over
+    // 150ms, and anything appearing with it had to fade too or arrive
+    // ahead of it — which, sweeping a pointer down a list, read as the
+    // hint flickering in and out. Both are instant now: they still change
+    // on exactly the same :hover, so they cannot come apart, and a row
+    // lights and unlights crisply as the pointer crosses it.
+    "group flex w-full shrink-0 cursor-pointer items-center rounded-lg text-left outline-none hover:bg-bg-hover data-[highlighted]:bg-bg-hover",
+    // tall: as tall as its content, never shorter than 40px (Katerina,
+    // 2026-09-01) — a single-line picker row sits at 40, a row with a
+    // 32px face and a role line comes out at its natural 48. One rule,
+    // not a hand-picked height per file.
+    size === "tall" ? "min-h-10 gap-3 px-3 py-1.5" : "gap-2 px-2 py-1.5",
+    selected && "bg-bg-hover",
+    className
+  );
+}
+function MenuItemBody({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected }) {
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx13(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx13(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    leading && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center", children: leading }),
+    children ?? /* @__PURE__ */ jsxs7("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__PURE__ */ jsx13("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx13("span", { className: "truncate text-[12px] leading-[120%] 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__ */ jsxs7("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+      edge && /* @__PURE__ */ jsx13("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
+      hint && /* @__PURE__ */ jsx13("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 edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx12(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx12(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs6(
-    "button",
+  const body = /* @__PURE__ */ jsx13(
+    MenuItemBody,
     {
-      type: "button",
-      role: "menuitem",
-      className: cn(
-        // shrink-0: a menu is a flex column that scrolls at its max height,
-        // and a flex child shrinks before its container does — so every row
-        // in an overflowing menu was squashed to its `min-h`, and a row given
-        // an explicit height silently lost it (Peek's `[` menu: h-12 rows
-        // measured 40px). The same fix NavItem took on 2026-09-02.
-        // `group`: the `hint` slot reveals itself from this row's own :hover,
-        // so the hint and the fill are one CSS state change, not two engines.
-        //
-        // No transition on the fill (Katerina, 2026-09-05). It faded over
-        // 150ms, and anything appearing with it had to fade too or arrive
-        // ahead of it — which, sweeping a pointer down a list, read as the
-        // hint flickering in and out. Both are instant now: they still change
-        // on exactly the same :hover, so they cannot come apart, and a row
-        // lights and unlights crisply as the pointer crosses it.
-        "group flex w-full shrink-0 cursor-pointer items-center rounded-lg text-left hover:bg-bg-hover",
-        // tall: as tall as its content, never shorter than 40px (Katerina,
-        // 2026-09-01) — a single-line picker row sits at 40, a row with a
-        // 32px face and a role line comes out at its natural 48. One rule,
-        // not a hand-picked height per file.
-        size === "tall" ? "min-h-10 gap-3 px-3 py-1.5" : "gap-2 px-2 py-1.5",
-        selected && "bg-bg-hover",
-        className
-      ),
+      label,
+      size,
+      description,
+      leading,
+      trailing,
+      hint,
+      shortcut,
+      submenu,
+      destructive,
+      selected,
+      children
+    }
+  );
+  const rowClassName = menuItemClassName({ size, selected, className });
+  if (!useContext(MenuContext)) {
+    return /* @__PURE__ */ jsx13("button", { type: "button", className: rowClassName, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsx13(
+    BaseMenu.Item,
+    {
+      nativeButton: true,
+      render: /* @__PURE__ */ jsx13("button", { type: "button" }),
+      className: rowClassName,
       ...props,
-      children: [
-        leading && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center", children: leading }),
-        children ?? /* @__PURE__ */ jsxs6("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-          /* @__PURE__ */ jsx12("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-          description && /* @__PURE__ */ jsx12("span", { className: "truncate text-[12px] leading-[120%] 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__ */ jsxs6("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-          edge && /* @__PURE__ */ jsx12("span", { className: cn("flex items-center", hint && "group-hover:opacity-0", hint && selected && "opacity-0"), children: edge }),
-          hint && /* @__PURE__ */ jsx12("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100", selected && "opacity-100"), children: hint })
-        ] })
-      ]
+      children: body
     }
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx12(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx12("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
+  return /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+    /* @__PURE__ */ jsx13(Kbd, { children: "\u21A9 Enter" }),
+    target && /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx12("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx12(SectionLabel, { className: "text-text-secondary", children: label }) }),
+  const inMenu = useContext(MenuContext) !== null;
+  const heading = /* @__PURE__ */ jsx13("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx13(SectionLabel, { className: "text-text-secondary", children: label }) });
+  if (!inMenu) {
+    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+      heading,
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(BaseMenu.Group, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx13(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx12("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx13("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function InputChip({ label, leading, onRemove, className }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn(
@@ -628,9 +694,9 @@ function InputChip({ label, leading, onRemove, className }) {
         className
       ),
       children: [
-        leading && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center", children: leading }),
-        /* @__PURE__ */ jsx13("span", { className: "text-caption font-medium text-text-primary", children: label }),
-        onRemove && /* @__PURE__ */ jsx13(
+        leading && /* @__PURE__ */ jsx14("span", { className: "flex shrink-0 items-center", children: leading }),
+        /* @__PURE__ */ jsx14("span", { className: "text-caption font-medium text-text-primary", children: label }),
+        onRemove && /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -640,7 +706,7 @@ function InputChip({ label, leading, onRemove, className }) {
             },
             className: "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary",
             "aria-label": `Remove ${label}`,
-            children: /* @__PURE__ */ jsx13(IconX, { size: 10, stroke: 1.5 })
+            children: /* @__PURE__ */ jsx14(IconX2, { size: 10, stroke: 1.5 })
           }
         )
       ]
@@ -655,14 +721,15 @@ function ChipInput({
   autoFocus,
   excludeIds = [],
   chipLeading,
-  rowLeading
+  rowLeading,
+  ...aria
 }) {
-  const [query, setQuery] = useState4("");
-  const [highlight, setHighlight] = useState4(0);
-  const [isFocused, setIsFocused] = useState4(false);
-  const [anchorRect, setAnchorRect] = useState4(null);
-  const wrapperRef = useRef3(null);
-  const inputRef = useRef3(null);
+  const [query, setQuery] = useState2("");
+  const [highlight, setHighlight] = useState2(0);
+  const [isFocused, setIsFocused] = useState2(false);
+  const [anchorRect, setAnchorRect] = useState2(null);
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
   const matches = useMemo(() => {
     const selectedIds = new Set(value.map((o) => o.id));
     const excludedIds = new Set(excludeIds);
@@ -674,11 +741,11 @@ function ChipInput({
       return o.label.toLowerCase().includes(q) || (o.description ?? "").toLowerCase().includes(q);
     });
   }, [query, value, excludeIds, options]);
-  useEffect2(() => {
+  useEffect(() => {
     setHighlight(0);
   }, [query, matches.length]);
   const showDropdown = isFocused && query.trim().length > 0 && matches.length > 0;
-  useLayoutEffect3(() => {
+  useLayoutEffect(() => {
     if (!showDropdown) return;
     const update = () => {
       if (wrapperRef.current) setAnchorRect(wrapperRef.current.getBoundingClientRect());
@@ -728,16 +795,16 @@ function ChipInput({
       }
     }
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         ref: wrapperRef,
         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",
         onClick: () => inputRef.current?.focus(),
         children: [
-          value.map((o) => /* @__PURE__ */ jsx13(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
-          /* @__PURE__ */ jsx13(
+          value.map((o) => /* @__PURE__ */ jsx14(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
+          /* @__PURE__ */ jsx14(
             "input",
             {
               ref: inputRef,
@@ -751,14 +818,15 @@ function ChipInput({
                 setTimeout(() => setIsFocused(false), 150);
               },
               placeholder: value.length === 0 ? placeholder : "",
+              "aria-required": aria["aria-required"],
               className: "flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
             }
           )
         ]
       }
     ),
-    showDropdown && anchorRect && createPortal3(
-      /* @__PURE__ */ jsx13(
+    showDropdown && anchorRect && createPortal(
+      /* @__PURE__ */ jsx14(
         "div",
         {
           className: "fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
@@ -771,7 +839,7 @@ function ChipInput({
             }),
             width: anchorRect.width
           },
-          children: matches.map((o, i) => /* @__PURE__ */ jsx13(
+          children: matches.map((o, i) => /* @__PURE__ */ jsx14(
             MenuItem,
             {
               size: "tall",
@@ -795,51 +863,8 @@ function ChipInput({
   ] });
 }
 
-// src/IconButton.tsx
-import { Button as BaseButton2 } from "@base-ui/react/button";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function IconButton({
-  variant = "muted",
-  className,
-  children,
-  disabled,
-  disabledReason,
-  tooltip,
-  tooltipShortcut,
-  tooltipPlacement,
-  type = "button",
-  ...props
-}) {
-  const button = /* @__PURE__ */ jsx14(
-    BaseButton2,
-    {
-      type,
-      disabled: disabled || !!disabledReason,
-      focusableWhenDisabled: !!disabledReason,
-      className: (state) => cn(
-        "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 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 === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
-        state.disabled && variant === "primary" && "bg-bg-disabled text-text-disabled",
-        state.disabled && variant === "muted" && "text-text-disabled",
-        state.disabled && variant === "outlined" && "border border-border-default text-text-disabled",
-        state.disabled && "pointer-events-none cursor-not-allowed",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-  const label = disabledReason ?? tooltip;
-  if (label) {
-    return /* @__PURE__ */ jsx14(WithTooltip, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
-  }
-  return button;
-}
-
 // src/IdentityMenu.tsx
-import { useRef as useRef4, useState as useState5 } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 
 // src/Divider.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
@@ -855,13 +880,13 @@ function Divider({ orientation = "horizontal", className }) {
 }
 
 // src/Person.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
   return (
     // gap-2: the face-to-name distance is one rule (8px) wherever a person
     // appears — Katerina, 2026-09-01, set on Person so PersonTrigger and every
     // row agree by construction.
-    /* @__PURE__ */ jsxs8("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs9("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
       /* @__PURE__ */ jsx16(Avatar, { name, src: picture, size }),
       /* @__PURE__ */ jsx16("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
@@ -871,7 +896,7 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
 // src/PersonTrigger.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
     return /* @__PURE__ */ jsx17(
@@ -880,13 +905,14 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        className: cn("cursor-pointer rounded-full focus:outline-none", className),
+        "aria-label": props["aria-label"] ?? name ?? fallback,
+        className: cn("cursor-pointer rounded-full", className),
         ...props,
         children: /* @__PURE__ */ jsx17(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     BaseButton3,
     {
       type: "button",
@@ -895,6 +921,11 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       className: cn(
         "flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
         open && "bg-bg-hover",
+        // Under a `Menu` the open state is Base UI's, not a prop: the trigger
+        // carries `data-popup-open` while its menu is up, and sets its own
+        // `aria-expanded`. Both spellings hold the fill, so this works whether
+        // the caller drives it or the menu does.
+        "data-[popup-open]:bg-bg-hover",
         className
       ),
       ...props,
@@ -907,30 +938,34 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, anchor, className, children }) {
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function IdentityPanel({ className, onClose = () => {
+}, ...rest }) {
+  return /* @__PURE__ */ jsx18(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx18(IdentityRows, { ...rest, onClose }) });
+}
+function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
     onClose();
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs10(Menu, { onClose, anchor, align: "right", className: cn("w-72", className), children: [
-    /* @__PURE__ */ jsxs10(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsxs11(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
       /* @__PURE__ */ jsx18(MenuRow, { children: /* @__PURE__ */ jsx18(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
       /* @__PURE__ */ jsx18(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__ */ jsxs10(Note, { children: [
+      me.email && /* @__PURE__ */ jsxs11(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs10(Fragment, { children: [
+    relayUrl && /* @__PURE__ */ jsxs11(Fragment2, { children: [
       /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs10(MenuSection, { label: "Workspace", children: [
+      /* @__PURE__ */ jsxs11(MenuSection, { label: "Workspace", children: [
         /* @__PURE__ */ jsx18(MenuRow, { children: /* @__PURE__ */ jsx18("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
         /* @__PURE__ */ jsx18(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs10(Fragment, { children: [
+    appRows && /* @__PURE__ */ jsxs11(Fragment2, { children: [
       /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
@@ -947,280 +982,179 @@ function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, o
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const [open, setOpen] = useState5(false);
-  const anchorRef = useRef4(null);
-  return /* @__PURE__ */ jsxs10("div", { ref: anchorRef, className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx18(
-      PersonTrigger,
-      {
-        name: me.name,
-        picture: me.picture,
-        fallback: "Anonymous",
-        compact,
-        size: compact ? 36 : void 0,
-        open,
-        onMouseDown: (event) => event.stopPropagation(),
-        onClick: () => setOpen((value) => !value),
-        "aria-label": compact ? "Account menu" : void 0
-      }
-    ),
-    open && /* @__PURE__ */ jsx18(
-      IdentityPanel,
+  const actions = useRef2(null);
+  const close = useCallback(() => actions.current?.close(), []);
+  return (
+    /* The wrapper carries the caller's `className` and nothing else. It used
+       to be `relative`, because the panel was positioned against it; the panel
+       hangs from the trigger and portals now, so a positioning context here
+       would only be a lie about what this box does. */
+    /* @__PURE__ */ jsx18("div", { className, children: /* @__PURE__ */ jsx18(
+      Menu,
       {
-        me,
-        signedIn,
-        relayUrl,
-        idBase,
-        onCopyKey,
-        onSignOut,
-        onClose: () => setOpen(false),
-        anchor: anchorRef.current,
-        children
+        align: "right",
+        actionsRef: actions,
+        className: "w-72",
+        trigger: /* @__PURE__ */ jsx18(
+          PersonTrigger,
+          {
+            name: me.name,
+            picture: me.picture,
+            fallback: "Anonymous",
+            compact,
+            size: compact ? 36 : void 0,
+            "aria-label": compact ? "Account menu" : void 0
+          }
+        ),
+        children: /* @__PURE__ */ jsx18(
+          IdentityRows,
+          {
+            me,
+            signedIn,
+            relayUrl,
+            idBase,
+            onCopyKey,
+            onSignOut,
+            onClose: close,
+            children
+          }
+        )
       }
-    )
-  ] });
+    ) })
+  );
 }
 function Note({ children }) {
   return /* @__PURE__ */ jsx18("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/Field.tsx
-import { createContext as createContext2, useContext as useContext2, useId } from "react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-var FieldControlIdContext = createContext2(void 0);
-function useFieldControlId(ownId) {
-  const fromField = useContext2(FieldControlIdContext);
-  return fromField ?? ownId;
-}
-function Field({ label, required = false, htmlFor, children }) {
-  const generated = useId();
-  const id = htmlFor ?? generated;
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs11(
-      "label",
-      {
-        htmlFor: id,
-        className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`,
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx19("span", { className: "text-error-default ml-0.5", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx19(FieldControlIdContext.Provider, { value: id, children })
+import { cloneElement, isValidElement } from "react";
+import { Field as BaseField } from "@base-ui/react/field";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function Field({ label, required = false, helper, error, children }) {
+  const line = error ?? helper;
+  const control = required && isValidElement(children) ? cloneElement(children, {
+    "aria-required": children.props["aria-required"] ?? true
+  }) : children;
+  return /* @__PURE__ */ jsxs12(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs12(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+      label,
+      required && /* @__PURE__ */ jsx19("span", { className: "text-error-default ml-0.5", children: "*" })
+    ] }),
+    line == null ? control : /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1.5", children: [
+      control,
+      error != null ? /* @__PURE__ */ jsx19(BaseField.Error, { match: true, className: "text-caption text-error-default", children: error }) : /* @__PURE__ */ jsx19(BaseField.Description, { className: "text-caption text-text-muted", children: helper })
+    ] })
   ] });
 }
 
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
-import { useCallback as useCallback3, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className }) {
-  const id = useId2();
-  const triggerRef = useRef5(null);
-  const menuRef = useRef5(null);
-  const [rect, setRect] = useState6(null);
-  const [placement, setPlacement] = useState6(null);
-  const open = rect !== null;
-  const selectedIndex = useMemo2(() => Math.max(0, options.findIndex((o) => o.value === value)), [options, value]);
-  const [activeIndex, setActiveIndex] = useState6(selectedIndex);
-  const close = useCallback3((refocus) => {
-    setRect(null);
-    if (refocus) triggerRef.current?.focus();
-  }, []);
-  const openMenu = useCallback3(() => {
-    setActiveIndex(selectedIndex);
-    setRect(triggerRef.current?.getBoundingClientRect() ?? null);
-  }, [selectedIndex]);
-  useLayoutEffect4(() => {
-    if (!rect || !menuRef.current) {
-      setPlacement(null);
-      return;
-    }
-    setPlacement(
-      fitMenu({
-        anchor: { left: rect.left, top: rect.top, bottom: rect.bottom },
-        menu: { width: menuRef.current.offsetWidth, contentHeight: menuRef.current.scrollHeight },
-        viewport: { width: window.innerWidth, height: window.innerHeight },
-        // The option list keeps its classic height (the old max-h-72); a menu
-        // panel passes no cap and stands as tall as the room it opens into.
-        cap: 288
-      })
-    );
-  }, [rect, options.length]);
-  useEffect3(() => {
-    if (!open) return;
-    document.getElementById(`${id}-${activeIndex}`)?.scrollIntoView?.({ block: "nearest" });
-  }, [open, activeIndex, id]);
-  useEffect3(() => {
-    if (!open) return;
-    const onDown = (e) => {
-      if (menuRef.current?.contains(e.target)) return;
-      if (triggerRef.current?.contains(e.target)) return;
-      setRect(null);
-    };
-    const onResize = () => setRect(null);
-    const onScroll = (e) => {
-      if (e.target instanceof Node && menuRef.current?.contains(e.target)) return;
-      setRect(null);
-    };
-    document.addEventListener("mousedown", onDown);
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, true);
-    return () => {
-      document.removeEventListener("mousedown", onDown);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll, true);
-    };
-  }, [open]);
-  const pick = (index) => {
-    const option = options[index];
-    if (!option) return;
-    onChange(option.value);
-    close(true);
-  };
-  const onKeyDown = (e) => {
-    if (!open) {
-      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
-        e.preventDefault();
-        openMenu();
-      }
-      return;
-    }
-    switch (e.key) {
-      case "Escape":
-        e.preventDefault();
-        close(true);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        setActiveIndex((i) => Math.min(options.length - 1, i + 1));
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setActiveIndex((i) => Math.max(0, i - 1));
-        break;
-      case "Home":
-        e.preventDefault();
-        setActiveIndex(0);
-        break;
-      case "End":
-        e.preventDefault();
-        setActiveIndex(options.length - 1);
-        break;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        pick(activeIndex);
-        break;
-      case "Tab":
-        close(false);
-        break;
-    }
-  };
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var GAP4 = 4;
+var VIEWPORT_PAD3 = 8;
+function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-    /* @__PURE__ */ jsxs12(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        disabled,
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-label": ariaLabel,
-        onClick: () => open ? close(false) : openMenu(),
-        onKeyDown,
-        className: cn(
-          /*
-           * `min-w-0 max-w-full`: a trigger must never outgrow its container
-           * (Katerina, 2026-09-01 — a long label stretched the files panel's
-           * Lead row past its card). In a flex row the default min-width:auto
-           * forbids shrinking below the label's width, which is what kept
-           * `truncate` from ever engaging; in a block container max-w-full is
-           * the cap. Full-width callers are unaffected.
-           */
-          "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
-          "border-border-default text-text-primary outline-none transition-colors",
-          // The focused border survives a hover: hover alone strengthens the
-          // hairline, but hover while focused must not grey the focus colour —
-          // the stacked variant outranks plain hover by specificity.
-          "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
-          "focus-visible:border-border-focus aria-expanded:border-border-focus",
-          "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
-          size === "default" && "px-3 py-2 text-[14px] leading-[1.4] font-normal",
-          size === "small" && "h-6 px-2 text-[12px] leading-[1.4] font-normal",
-          className
+  return /* @__PURE__ */ jsxs13(
+    BaseSelect.Root,
+    {
+      value,
+      onValueChange: (next) => onChange(next),
+      disabled,
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsxs13(
+          BaseSelect.Trigger,
+          {
+            "aria-label": ariaLabel,
+            "aria-required": aria["aria-required"],
+            className: cn(
+              /*
+               * `min-w-0 max-w-full`: a trigger must never outgrow its container
+               * (Katerina, 2026-09-01 — a long label stretched the files panel's
+               * Lead row past its card). In a flex row the default min-width:auto
+               * forbids shrinking below the label's width, which is what kept
+               * `truncate` from ever engaging; in a block container max-w-full is
+               * the cap. Full-width callers are unaffected.
+               */
+              "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
+              "border-border-default text-text-primary outline-none transition-colors",
+              // The focused border survives a hover: hover alone strengthens the
+              // hairline, but hover while focused must not grey the focus colour —
+              // the stacked variant outranks plain hover by specificity.
+              "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
+              "focus-visible:border-border-focus aria-expanded:border-border-focus",
+              "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
+              size === "default" && "px-3 py-2 text-[14px] leading-[1.4] font-normal",
+              size === "small" && "h-6 px-2 text-[12px] leading-[1.4] font-normal",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs13("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+                selected?.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+                /* @__PURE__ */ jsx20(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+              ] }),
+              /* @__PURE__ */ jsx20(
+                BaseSelect.Icon,
+                {
+                  render: /* @__PURE__ */ jsx20(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                }
+              )
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx20("span", { className: "truncate", children: selected?.label ?? placeholder })
-          ] }),
-          /* @__PURE__ */ jsx20(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-        ]
-      }
-    ),
-    open && rect && createPortal4(
-      /* @__PURE__ */ jsx20(
-        "div",
-        {
-          ref: menuRef,
-          role: "listbox",
-          "aria-activedescendant": `${id}-${activeIndex}`,
-          tabIndex: -1,
-          style: placement ? { ...placement, minWidth: rect.width } : (
-            // Provisional frame: measured by the layout effect above,
-            // replaced before paint. Hidden so a cut-off position is
-            // never visible, not even for a frame.
-            { top: rect.bottom + 4, left: rect.left, minWidth: rect.width, visibility: "hidden" }
-          ),
-          className: "fixed z-50 overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
-          children: options.map((option, index) => /* @__PURE__ */ jsxs12(
-            "div",
-            {
-              id: `${id}-${index}`,
-              role: "option",
-              "aria-selected": option.value === value,
-              onMouseEnter: () => setActiveIndex(index),
-              onMouseDown: (e) => {
-                e.preventDefault();
-                pick(index);
-              },
-              className: cn(
-                "flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 transition-colors",
-                "text-[14px] font-normal leading-[1.4] text-text-primary",
-                index === activeIndex && "bg-bg-hover",
-                option.value === value && "font-medium"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                  /* @__PURE__ */ jsx20("span", { className: "truncate", children: option.label })
-                ] }),
-                option.value === value && /* @__PURE__ */ jsx20(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-              ]
-            },
-            option.value
-          ))
-        }
-      ),
-      document.body
-    )
-  ] });
+        /* @__PURE__ */ jsx20(BaseSelect.Portal, { children: /* @__PURE__ */ jsx20(
+          BaseSelect.Positioner,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: GAP4,
+            collisionPadding: VIEWPORT_PAD3,
+            alignItemWithTrigger: false,
+            className: "z-50 data-[anchor-hidden]:hidden",
+            children: /* @__PURE__ */ jsx20(
+              BaseSelect.Popup,
+              {
+                className: "max-h-[min(288px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
+                children: options.map((option) => /* @__PURE__ */ jsxs13(
+                  BaseSelect.Item,
+                  {
+                    value: option.value,
+                    className: "flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 text-[14px] font-normal leading-[1.4] text-text-primary transition-colors data-[highlighted]:bg-bg-hover data-[selected]:font-medium",
+                    children: [
+                      /* @__PURE__ */ jsxs13("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx20(BaseSelect.ItemText, { className: "truncate", children: option.label })
+                      ] }),
+                      /* @__PURE__ */ jsx20(
+                        BaseSelect.ItemIndicator,
+                        {
+                          render: /* @__PURE__ */ jsx20(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
 }
 
 // src/TextInput.tsx
 import { forwardRef } from "react";
+import { Input } from "@base-ui/react/input";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var TextInput = forwardRef(function TextInput2({ className, type = "text", id, ...props }, ref) {
-  const controlId = useFieldControlId(id);
+var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
   return /* @__PURE__ */ jsx21(
-    "input",
+    Input,
     {
       ref,
-      id: controlId,
       type,
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
@@ -1237,14 +1171,14 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", id, .
 
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
+import { Field as BaseField2 } from "@base-ui/react/field";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var Textarea = forwardRef2(function Textarea2({ className, id, ...props }, ref) {
-  const controlId = useFieldControlId(id);
+var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx22(
-    "textarea",
+    BaseField2.Control,
     {
       ref,
-      id: controlId,
+      render: /* @__PURE__ */ jsx22("textarea", {}),
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
         "text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted",
@@ -1259,51 +1193,58 @@ var Textarea = forwardRef2(function Textarea2({ className, id, ...props }, ref)
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState7 } from "react";
+import { useState as useState3 } from "react";
 
 // src/DialogShell.tsx
-import { useEffect as useEffect4 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
-import { IconX as IconX2 } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
-function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width = 502 }) {
-  useEffect4(() => {
-    const onKey = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  return createPortal5(
-    /* @__PURE__ */ jsxs13(Fragment3, { children: [
-      /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-40 bg-scrim", onClick: onClose }),
-      /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs13(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": title,
-          className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden",
-          style: { width },
-          children: [
-            /* @__PURE__ */ jsxs13("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-              headerContent ?? /* @__PURE__ */ jsx23("span", { className: "text-h4 text-text-primary", children: title }),
-              /* @__PURE__ */ jsx23(IconButton, { tooltip: "Close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx23(IconX2, { size: 16, stroke: 1.5 }) })
-            ] }),
-            /* @__PURE__ */ jsx23("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-            footer != null && /* @__PURE__ */ jsx23("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
-          ]
-        }
-      ) })
-    ] }),
-    document.body
+import { useRef as useRef3 } from "react";
+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 jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width = 502, alert = false }) {
+  const Parts = alert ? AlertDialog : Dialog;
+  const popupRef = useRef3(null);
+  return /* @__PURE__ */ jsx23(
+    Parts.Root,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsxs14(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx23(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
+          Parts.Popup,
+          {
+            ref: popupRef,
+            initialFocus: popupRef,
+            "aria-label": headerContent != null ? title : void 0,
+            className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none",
+            style: { width },
+            children: [
+              /* @__PURE__ */ jsxs14("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+                headerContent ?? /* @__PURE__ */ jsx23(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx23("span", {}), children: title }),
+                /* @__PURE__ */ jsx23(
+                  Parts.Close,
+                  {
+                    render: /* @__PURE__ */ jsx23(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx23(IconX3, { size: 16, stroke: 1.5 }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx23("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx23("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+            ]
+          }
+        ) })
+      ] })
+    }
   );
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState7(false);
+  const [busy, setBusy] = useState3(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -1316,10 +1257,11 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
   return /* @__PURE__ */ jsx24(
     DialogShell,
     {
+      alert: true,
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
-      footer: /* @__PURE__ */ jsxs14(Fragment4, { children: [
+      footer: /* @__PURE__ */ jsxs15(Fragment3, { children: [
         /* @__PURE__ */ jsx24(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
         /* @__PURE__ */ jsx24(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
@@ -1329,14 +1271,16 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 }
 
 // src/EditableText.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { Field as BaseField3 } from "@base-ui/react/field";
+import { Input as Input2 } from "@base-ui/react/input";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState8(false);
-  const [draft, setDraft] = useState8(value);
-  const [busy, setBusy] = useState8(false);
-  const fieldRef = useRef6(null);
-  useEffect5(() => {
+  const [editing, setEditing] = useState4(false);
+  const [draft, setDraft] = useState4(value);
+  const [busy, setBusy] = useState4(false);
+  const fieldRef = useRef4(null);
+  useEffect2(() => {
     if (editing) {
       fieldRef.current?.focus();
       fieldRef.current?.select();
@@ -1381,23 +1325,30 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     className
   );
   if (readOnly) {
-    return /* @__PURE__ */ jsx25(
-      "div",
-      {
-        "aria-label": label,
-        className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
-        children: display ?? value ? displayNode ?? (display ?? value) : placeholder
-      }
+    return (
+      /*
+        No `aria-label` here. It sat on a bare `<div>`, which has no role, and
+        ARIA does not let an author name a generic element — so the name was
+        written and never read. Read-only, this is a line of text: whatever
+        names the region around it (a `Field`, a `Property`) names this too.
+      */
+      /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
+          children: display ?? value ? displayNode ?? (display ?? value) : placeholder
+        }
+      )
     );
   }
   if (editing) {
     return multiline ? /* @__PURE__ */ jsx25(
-      "textarea",
+      BaseField3.Control,
       {
         ref: fieldRef,
+        render: /* @__PURE__ */ jsx25("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
-        rows: 4,
         disabled: busy,
         onChange: (event) => setDraft(event.target.value),
         onKeyDown,
@@ -1405,7 +1356,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         className: fieldClass
       }
     ) : /* @__PURE__ */ jsx25(
-      "input",
+      Input2,
       {
         ref: fieldRef,
         "aria-label": label,
@@ -1423,7 +1374,6 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     {
       type: "button",
       onClick: open,
-      title: "Click to edit",
       "aria-label": `Edit ${label.toLowerCase()}`,
       className: cn(
         "w-full rounded-md border border-transparent px-2 py-1 text-left transition-colors hover:border-border-default",
@@ -1438,22 +1388,22 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 function EmptyState({ icon, message, className }) {
-  return /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
     /* @__PURE__ */ jsx26("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx26(IconMessage2, { size: 16, stroke: 1.5 }) }),
     /* @__PURE__ */ jsx26("p", { className: "text-body-2 text-text-secondary text-center", children: message })
   ] });
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
   return /* @__PURE__ */ jsx27("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__ */ jsxs16("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+  return /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
     /* @__PURE__ */ jsx27(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
     /* @__PURE__ */ jsx27(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
@@ -1463,20 +1413,20 @@ function SkeletonList({ rows = 8, className }) {
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment5, useCallback as useCallback4, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState9 } from "react";
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
-  const navRef = useRef7(null);
-  const labelRefs = useRef7([]);
-  const [truncated, setTruncated] = useState9(/* @__PURE__ */ new Set());
-  const measure = useCallback4(() => {
+  const navRef = useRef5(null);
+  const labelRefs = useRef5([]);
+  const [truncated, setTruncated] = useState5(/* @__PURE__ */ new Set());
+  const measure = useCallback2(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
       if (el && el.scrollWidth > el.clientWidth) next.add(index);
     });
     setTruncated((prev) => prev.size === next.size && [...next].every((i) => prev.has(i)) ? prev : next);
   }, []);
-  useLayoutEffect5(() => {
+  useLayoutEffect2(() => {
     measure();
     const nav = navRef.current;
     if (!nav || typeof ResizeObserver === "undefined") return;
@@ -1497,8 +1447,8 @@ function Breadcrumb({ items, className }) {
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
-    const crumb = item.href ? /* @__PURE__ */ jsx28("a", { ref: setLabelRef, href: item.href, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx28("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    const crumb = item.href ? /* @__PURE__ */ jsx28("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx28("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs18(Fragment4, { children: [
       index > 0 && /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
       truncated.has(index) ? (
         // `min-w-0 shrink` undoes the wrapper's own shrink-0 — the crumb
@@ -1511,9 +1461,9 @@ function Breadcrumb({ items, className }) {
 }
 
 // src/NavItem.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "a",
     {
       href,
@@ -1536,16 +1486,171 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
   );
 }
 
+// src/Popover.tsx
+import { useMemo as useMemo2 } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var GAP5 = 4;
+var VIEWPORT_PAD4 = 8;
+function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className }) {
+  const anchorTarget = useMemo2(() => {
+    if (!anchor) return void 0;
+    if (anchor instanceof Element) return anchor;
+    return { getBoundingClientRect: () => anchor };
+  }, [anchor]);
+  return /* @__PURE__ */ jsxs20(
+    BasePopover.Root,
+    {
+      open,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      actionsRef,
+      modal: false,
+      children: [
+        trigger && /* @__PURE__ */ jsx30(BasePopover.Trigger, { render: trigger }),
+        /* @__PURE__ */ jsx30(BasePopover.Portal, { children: /* @__PURE__ */ jsx30(
+          BasePopover.Positioner,
+          {
+            anchor: anchorTarget,
+            side,
+            align: align === "right" ? "end" : "start",
+            sideOffset: GAP5,
+            collisionPadding: VIEWPORT_PAD4,
+            className: "z-50 data-[anchor-hidden]:hidden",
+            children: /* @__PURE__ */ jsx30(
+              BasePopover.Popup,
+              {
+                "aria-label": ariaLabel,
+                initialFocus: trigger ? void 0 : false,
+                finalFocus,
+                className: cn("min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none", className),
+                render: /* @__PURE__ */ jsx30(MenuPanel, {}),
+                children
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/Toolbar.tsx
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
+  const strip = /* @__PURE__ */ jsx31(
+    BaseToolbar.Root,
+    {
+      "aria-label": ariaLabel,
+      orientation,
+      loopFocus,
+      className: cn("flex items-center gap-1", orientation === "vertical" && "flex-col", className),
+      children
+    }
+  );
+  if (!surface) return strip;
+  return /* @__PURE__ */ jsx31(MenuPanel, { className: "w-fit p-1", children: strip });
+}
+function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
+  return /* @__PURE__ */ jsx31(
+    BaseToolbar.Button,
+    {
+      ref,
+      disabled: disabled || !!disabledReason,
+      focusableWhenDisabled: true,
+      render: /* @__PURE__ */ jsx31(IconButton, { disabled, disabledReason, ...props })
+    }
+  );
+}
+function ToolbarInput(props) {
+  return /* @__PURE__ */ jsx31(BaseToolbar.Input, { render: /* @__PURE__ */ jsx31(TextInput, {}), ...props });
+}
+function ToolbarSeparator({ className }) {
+  return /* @__PURE__ */ jsx31(
+    BaseToolbar.Separator,
+    {
+      orientation: "vertical",
+      className: cn("mx-1 h-4 w-px shrink-0 bg-border-default", className)
+    }
+  );
+}
+
+// src/ReactionPicker.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
+  return /* @__PURE__ */ jsx32(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+    /*
+              A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
+              would become the toolbar's item and the button inside it would never
+              join the walk — and it is unnecessary since stage 4, because an
+              `IconButton` with a `tooltip` IS the trigger.
+    
+              The tooltip names it for a pointer, `aria-label` for everything else,
+              and both say the meaning rather than the glyph.
+            */
+    /* @__PURE__ */ jsx32(
+      ToolbarButton,
+      {
+        "aria-label": option.label,
+        tooltip: option.label,
+        onClick: () => onSelect(option.emoji),
+        className: "size-7 text-[18px] leading-none",
+        children: /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: option.emoji })
+      },
+      option.emoji
+    )
+  )) });
+}
+
+// src/PreviewCard.tsx
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+var GAP6 = 12;
+var VIEWPORT_PAD5 = 8;
+var OPEN_DELAY2 = 350;
+var CLOSE_DELAY = 200;
+function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
+  return /* @__PURE__ */ jsxs21(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx33(
+      BasePreviewCard.Trigger,
+      {
+        delay,
+        closeDelay,
+        render: /* @__PURE__ */ jsx33("span", { className: cn("inline-flex", wrapperClassName) }),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx33(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx33(
+      BasePreviewCard.Positioner,
+      {
+        side,
+        align: "start",
+        sideOffset: GAP6,
+        collisionPadding: VIEWPORT_PAD5,
+        className: "z-50 data-[anchor-hidden]:hidden",
+        children: /* @__PURE__ */ jsx33(
+          BasePreviewCard.Popup,
+          {
+            className: cn("w-[360px] max-h-[min(300px,var(--available-height))] gap-3 overflow-y-auto p-3 outline-none [&>*]:shrink-0", className),
+            render: /* @__PURE__ */ jsx33(MenuPanel, {}),
+            children: content
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
 // src/Rail.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx30("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
+  return /* @__PURE__ */ jsx34("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
 }
 
 // src/RailItem.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs22(
     "a",
     {
       href,
@@ -1553,14 +1658,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: cn(
               "flex items-center justify-center rounded-lg p-2 transition-colors",
               active ? "bg-bg-selected" : "group-hover:bg-bg-hover"
             ),
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx35(
               "span",
               {
                 className: cn(
@@ -1572,16 +1677,16 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx31("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx35("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx36(
     "nav",
     {
       "aria-label": ariaLabel,
@@ -1595,29 +1700,29 @@ function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className })
 }
 
 // src/Property.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
     return (
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx33("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs23("div", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx37("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
         children
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs20("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx33("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+  return /* @__PURE__ */ jsxs23("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx37("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
     children
   ] });
 }
 
 // src/Reaction.tsx
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, type, ...props }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "button",
     {
       type: type ?? "button",
@@ -1633,8 +1738,8 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
-        /* @__PURE__ */ jsx34("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
+        /* @__PURE__ */ jsx38("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -1642,9 +1747,10 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
 
 // src/SearchInput.tsx
 import "react";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Input as Input3 } from "@base-ui/react/input";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
@@ -1654,27 +1760,27 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx35(
-          "input",
+        /* @__PURE__ */ jsx39(
+          Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
             placeholder,
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx35(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx39(Kbd, { children: shortcut })
       ]
     }
   );
 }
 
 // src/SectionHeader.tsx
-import { useState as useState10 } from "react";
+import { useState as useState6 } from "react";
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
-  const [isHovered, setIsHovered] = useState10(false);
-  return /* @__PURE__ */ jsxs23(
+  const [isHovered, setIsHovered] = useState6(false);
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn(
@@ -1687,8 +1793,8 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-center gap-1", children: [
-          chevron && /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs26("div", { className: "flex shrink-0 items-center gap-1", children: [
+          chevron && /* @__PURE__ */ jsx40(
             IconChevronRight2,
             {
               size: 12,
@@ -1696,9 +1802,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
               className: cn("text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
             }
           ),
-          /* @__PURE__ */ jsx36(SectionLabel, { children: title })
+          /* @__PURE__ */ jsx40(SectionLabel, { children: title })
         ] }),
-        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx36(
+        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx40("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx40(
           IconButton,
           {
             tooltip: action.tooltip,
@@ -1718,9 +1824,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
-function Tabs({ tabs, active, onChange, size = "default", className }) {
-  return /* @__PURE__ */ jsx37(
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
+  return /* @__PURE__ */ jsx41(
     BaseTabs.Root,
     {
       value: active,
@@ -1728,36 +1834,45 @@ function Tabs({ tabs, active, onChange, size = "default", className }) {
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx37(BaseTabs.List, { activateOnFocus: true, className: "flex items-center gap-2", children: tabs.map((tab) => /* @__PURE__ */ jsxs24(
-        BaseTabs.Tab,
+      children: /* @__PURE__ */ jsx41(
+        BaseTabs.List,
         {
-          value: tab.id,
-          className: (state) => cn(
-            "flex cursor-pointer items-center transition-colors",
-            // gap: default is Ship's 6px; small keeps Peek's original 4px, or
-            // "small is Peek's geometry" stops being true.
-            size === "default" ? "gap-1.5 rounded-md px-2 py-1 text-body-2" : "gap-1 rounded px-1.5 py-0.5 text-caption",
-            state.active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover"
-          ),
-          children: [
-            tab.icon,
-            /* @__PURE__ */ jsxs24("span", { className: "flex items-baseline", children: [
-              tab.label,
-              tab.count !== void 0 ? /* @__PURE__ */ jsx37("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
-            ] })
-          ]
-        },
-        tab.id
-      )) })
+          activateOnFocus: true,
+          "aria-label": aria["aria-label"],
+          "aria-labelledby": aria["aria-labelledby"],
+          className: "flex items-center gap-2",
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs27(
+            BaseTabs.Tab,
+            {
+              value: tab.id,
+              className: (state) => cn(
+                "flex cursor-pointer items-center transition-colors",
+                // gap: default is Ship's 6px; small keeps Peek's original 4px, or
+                // "small is Peek's geometry" stops being true.
+                size === "default" ? "gap-1.5 rounded-md px-2 py-1 text-body-2" : "gap-1 rounded px-1.5 py-0.5 text-caption",
+                state.active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover"
+              ),
+              children: [
+                tab.icon,
+                /* @__PURE__ */ jsxs27("span", { className: "flex items-baseline", children: [
+                  tab.label,
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx41("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                ] })
+              ]
+            },
+            tab.id
+          ))
+        }
+      )
     }
   );
 }
 
 // src/Toast.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo3, useState as useState11 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
+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 { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } 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)]",
@@ -1775,7 +1890,7 @@ var ACTION_BORDER_STYLES = {
 };
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -1787,11 +1902,11 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx38(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
-          /* @__PURE__ */ jsx38("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 shrink-0", children: [
+          leadingIcon && /* @__PURE__ */ jsx42(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
+          /* @__PURE__ */ jsx42("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
         ] }),
-        hasAction && /* @__PURE__ */ jsx38(
+        hasAction && /* @__PURE__ */ jsx42(
           "button",
           {
             type: "button",
@@ -1801,24 +1916,24 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
               ACTION_BORDER_STYLES[type],
               type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
             ),
-            children: /* @__PURE__ */ jsx38("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
+            children: /* @__PURE__ */ jsx42("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
           }
         )
       ]
     }
   );
 }
-var ToastContext = createContext3(null);
+var ToastContext = createContext2(null);
 var toastSeq = 0;
 function ToastProvider({ children }) {
-  const [toast, setToast] = useState11(null);
-  const showToast = useCallback5((opts) => {
+  const [toast, setToast] = useState7(null);
+  const showToast = useCallback3((opts) => {
     setToast({ ...opts, id: ++toastSeq });
   }, []);
-  const dismissToast = useCallback5(() => {
+  const dismissToast = useCallback3(() => {
     setToast(null);
   }, []);
-  useEffect6(() => {
+  useEffect3(() => {
     if (!toast) return;
     const duration = toast.durationMs ?? 5e3;
     if (duration <= 0) return;
@@ -1828,10 +1943,10 @@ function ToastProvider({ children }) {
     return () => clearTimeout(timer);
   }, [toast]);
   const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs25(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs28(ToastContext.Provider, { value, children: [
     children,
-    toast && createPortal6(
-      /* @__PURE__ */ jsx38("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx38(
+    toast && createPortal2(
+      /* @__PURE__ */ jsx42("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx42(
         Toast,
         {
           className: "pointer-events-auto",
@@ -1850,7 +1965,7 @@ function ToastProvider({ children }) {
   ] });
 }
 function useToast() {
-  const ctx = useContext3(ToastContext);
+  const ctx = useContext2(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
@@ -1885,10 +2000,13 @@ export {
   NavItem,
   Person,
   PersonTrigger,
+  Popover,
+  PreviewCard,
   Property,
   Rail,
   RailItem,
   Reaction,
+  ReactionPicker,
   SearchInput,
   SectionHeader,
   SectionLabel,
@@ -1902,16 +2020,17 @@ export {
   Textarea,
   Toast,
   ToastProvider,
+  Toolbar,
+  ToolbarButton,
+  ToolbarInput,
+  ToolbarSeparator,
   Tooltip,
+  TooltipProvider,
   TopBar,
   WithTooltip,
-  clampBox,
   cn,
-  fitMenu,
-  fitSubmenu,
   hueFor,
   initialsFor,
-  useFieldControlId,
   useToast
 };
 //# sourceMappingURL=index.js.map