@estiva-app/ui 0.6.0 → 0.8.0

package/dist/index.js

@@ -19,8 +19,16 @@ var FONT_SIZE_TOKENS = [
   "input-helper",
   "chip"
 ];
+var BOX_SHADOW_TOKENS = ["sm", "md", "lg", "focus-ring", "glow-warning", "highlight-inset"];
+var DROP_SHADOW_TOKENS = ["glow-success", "glow-accent"];
 var twMerge = extendTailwindMerge({
-  extend: { classGroups: { "font-size": [{ text: FONT_SIZE_TOKENS }] } }
+  extend: {
+    classGroups: {
+      "font-size": [{ text: FONT_SIZE_TOKENS }],
+      shadow: [{ shadow: BOX_SHADOW_TOKENS }],
+      "drop-shadow": [{ "drop-shadow": DROP_SHADOW_TOKENS }]
+    }
+  }
 });
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -64,7 +72,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
           {
             className: cn(
               "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
-              "signal:border signal:border-border-subtle signal:shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]"
+              "signal:border signal:border-border-subtle signal:shadow-highlight-inset"
             ),
             children: [
               banner,
@@ -155,18 +163,83 @@ function AvatarGroup({ members, size = 24 }) {
 
 // src/Banner.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var TONE = {
+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[tone], className), children });
+  return /* @__PURE__ */ jsx5("div", { role: tone === "error" ? "alert" : "status", className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+}
+
+// src/Button.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";
+
+// src/Kbd.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Kbd({ children, className }) {
+  return /* @__PURE__ */ jsx6(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-[12px] leading-[120%] font-normal text-text-secondary",
+        "signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-[10px]",
+        "ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-[10px]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// 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 })
+  ] });
+}
+var GAP = 6;
+var VIEWPORT_PAD = 8;
+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
+    )
+  ] });
 }
 
 // src/Button.tsx
-import { jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -174,30 +247,32 @@ function Button({
   className,
   children,
   disabled,
+  disabledReason,
   type = "button",
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  return /* @__PURE__ */ jsxs3(
-    "button",
+  const button = /* @__PURE__ */ jsxs4(
+    BaseButton,
     {
       type,
-      className: cn(
+      disabled: disabled || !!disabledReason,
+      focusableWhenDisabled: !!disabledReason,
+      className: (state) => cn(
         "inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium",
-        size === "default" && "h-8 text-[14px] leading-[14px]",
-        size === "small" && "h-6 text-[12px] leading-[12px]",
+        size === "default" && "h-8 text-btn-default",
+        size === "small" && "h-6 text-btn-small",
         // Extra right padding beside a leading icon, for optical balance.
         size === "default" && (hasLeadingIcon ? "pl-2 pr-3" : "px-2"),
         size === "small" && (hasLeadingIcon ? "pl-1.5 pr-2" : "px-1.5"),
-        !disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold",
-        !disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer",
-        !disabled && variant === "muted" && "hover:bg-bg-hover text-text-primary cursor-pointer",
-        !disabled && variant === "destructive" && "hover:bg-error-muted text-error-default cursor-pointer",
-        disabled && "bg-bg-disabled text-text-disabled pointer-events-none",
-        disabled && variant === "outlined" && "border border-border-default",
+        !state.disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold",
+        !state.disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer",
+        !state.disabled && variant === "muted" && "hover:bg-bg-hover text-text-primary cursor-pointer",
+        !state.disabled && variant === "destructive" && "hover:bg-error-muted text-error-default cursor-pointer",
+        state.disabled && "bg-bg-disabled text-text-disabled pointer-events-none",
+        state.disabled && variant === "outlined" && "border border-border-default",
         className
       ),
-      disabled,
       ...props,
       children: [
         leadingIcon,
@@ -205,62 +280,67 @@ function Button({
       ]
     }
   );
+  return disabledReason ? /* @__PURE__ */ jsx8(WithTooltip, { 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 jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } 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",
+    checked ? "bg-accent-primary border-accent-primary text-text-inverse" : "bg-transparent border-border-strong hover:border-text-muted",
+    disabled && "opacity-50 pointer-events-none",
+    interactive ? "cursor-pointer" : "pointer-events-none",
+    className
+  );
+}
+var tickClasses = (checked) => cn("flex", !checked && "invisible");
 function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
-  return /* @__PURE__ */ jsx6(
-    "button",
+  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__ */ jsx9(
+    BaseCheckbox.Root,
     {
-      type: "button",
-      role: "checkbox",
-      "aria-checked": checked,
-      "aria-label": aria["aria-label"],
+      checked,
       disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        onChange?.(!checked);
-      },
-      className: cn(
-        "inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors",
-        checked ? "bg-accent-primary border-accent-primary text-text-inverse" : "bg-transparent border-border-strong hover:border-text-muted",
-        disabled && "opacity-50 pointer-events-none",
-        onChange ? "cursor-pointer" : "pointer-events-none",
-        className
-      ),
-      children: checked && /* @__PURE__ */ jsx6(IconCheck, { size: 12, stroke: 3 })
+      "aria-label": aria["aria-label"],
+      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 }) })
     }
   );
 }
 
 // src/Chip.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
-  brand: "bg-accent-muted text-accent-primary signal:border signal:border-[rgba(86,200,255,0.3)]",
-  info: "bg-info-muted text-info-default signal:border signal:border-[rgba(86,200,255,0.3)]",
-  warning: "bg-warning-muted text-warning-default signal:border signal:border-[rgba(255,176,32,0.3)] signal:shadow-[shadow:0_0_5px_rgba(255,176,32,0.4)]",
-  success: "bg-success-muted text-success-default signal:border signal:border-[rgba(63,222,140,0.3)]",
-  error: "bg-error-muted text-error-default signal:border signal:border-[rgba(255,107,107,0.3)]"
+  brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+  info: "bg-info-muted text-info-default signal:border signal:border-info-outline",
+  warning: "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
+  success: "bg-success-muted text-success-default signal:border signal:border-success-outline",
+  error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
-  return /* @__PURE__ */ jsxs4("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__ */ jsx7("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
-    label && /* @__PURE__ */ jsx7("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__ */ jsx7("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+  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 })
   ] });
 }
 
 // src/ChipInput.tsx
-import { useState as useState3, useRef as useRef2, useMemo, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+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";
 
 // src/fit.ts
 var MARGIN = 8;
-var GAP = 4;
+var GAP2 = 4;
 function fitMenu({
   anchor,
   menu,
@@ -268,11 +348,11 @@ function fitMenu({
   cap = Number.POSITIVE_INFINITY
 }) {
   const left = Math.max(MARGIN, Math.min(anchor.left, viewport.width - menu.width - MARGIN));
-  const below = viewport.height - anchor.bottom - GAP - MARGIN;
-  const above = anchor.top - GAP - MARGIN;
+  const below = viewport.height - anchor.bottom - GAP2 - MARGIN;
+  const above = anchor.top - GAP2 - MARGIN;
   const openUp = below < Math.min(menu.contentHeight, cap) && above > below;
   const maxHeight = Math.max(Math.min(cap, openUp ? above : below), 120);
-  return openUp ? { left, bottom: viewport.height - anchor.top + GAP, maxHeight } : { left, top: anchor.bottom + GAP, maxHeight };
+  return openUp ? { left, bottom: viewport.height - anchor.top + GAP2, maxHeight } : { left, top: anchor.bottom + GAP2, maxHeight };
 }
 function clampBox({
   box,
@@ -288,38 +368,21 @@ function fitSubmenu({
   panel,
   viewport
 }) {
-  const fitsRight = row.right + GAP + panel.width <= viewport.width - MARGIN;
-  const left = Math.max(MARGIN, fitsRight ? row.right + GAP : row.left - GAP - panel.width);
+  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, useContext, useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
+import { createContext, useCallback as useCallback2, useContext, useEffect, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
-import { createPortal } from "react-dom";
-
-// src/Kbd.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Kbd({ children, className }) {
-  return /* @__PURE__ */ jsx8(
-    "kbd",
-    {
-      className: cn(
-        "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-[12px] leading-[120%] font-normal text-text-secondary",
-        "signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-[rgba(255,255,255,.05)] signal:font-mono signal:text-[10px]",
-        "ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-[rgba(255,255,255,.05)] ship:font-mono ship:text-[10px]",
-        className
-      ),
-      children
-    }
-  );
-}
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/SectionLabel.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       className: cn(
@@ -332,10 +395,10 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var MenuHoverContext = createContext(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: cn("flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg", className),
@@ -345,17 +408,17 @@ function MenuPanel({ children, className, ...props }) {
   );
 }
 function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false, children, className }) {
-  const ref = useRef(null);
-  const leaveTimer = useRef(void 0);
-  const hold = useCallback(() => clearTimeout(leaveTimer.current), []);
-  const release = useCallback(() => {
+  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] = useState2(null);
+  const [placed, setPlaced] = useState3(null);
   useEffect(() => {
     const onDown = (event) => {
       if (!ref.current?.contains(event.target)) onClose();
@@ -373,7 +436,7 @@ function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false,
   const posLeft = position && "left" in position ? position.left : void 0;
   const posRight = position && "right" in position ? position.right : void 0;
   const posTop = position?.top;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!portalled || !ref.current) return;
     const viewport = { width: window.innerWidth, height: window.innerHeight };
     const menu = ref.current;
@@ -409,7 +472,7 @@ function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false,
     // The provisional render: measured by the layout effect, never seen.
     { left: 0, top: 0, visibility: "hidden" }
   ) : void 0;
-  const node = /* @__PURE__ */ jsx10(MenuHoverContext.Provider, { value: { hold, release }, children: /* @__PURE__ */ jsx10(
+  const node = /* @__PURE__ */ jsx12(MenuHoverContext.Provider, { value: { hold, release }, children: /* @__PURE__ */ jsx12(
     MenuPanel,
     {
       ref,
@@ -427,14 +490,14 @@ function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false,
       children
     }
   ) });
-  return portalled ? createPortal(node, document.body) : node;
+  return portalled ? createPortal2(node, document.body) : node;
 }
 function MenuSub({ label, leading, selected, children, className }) {
-  const [open, setOpen] = useState2(false);
-  const rowRef = useRef(null);
-  const panelRef = useRef(null);
-  const closeTimer = useRef(void 0);
-  const [placed, setPlaced] = useState2(null);
+  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);
@@ -446,7 +509,7 @@ function MenuSub({ label, leading, selected, children, className }) {
     menuHover?.release();
   };
   useEffect(() => () => clearTimeout(closeTimer.current), []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!open || !rowRef.current || !panelRef.current) {
       setPlaced(null);
       return;
@@ -460,10 +523,10 @@ function MenuSub({ label, leading, selected, children, className }) {
       })
     );
   }, [open]);
-  return /* @__PURE__ */ jsxs5("div", { ref: rowRef, onMouseEnter: enter, onMouseLeave: leave, children: [
-    /* @__PURE__ */ jsx10(MenuItem, { label, leading, selected, submenu: true }),
-    open && createPortal(
-      /* @__PURE__ */ jsx10(
+  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,
@@ -481,8 +544,8 @@ function MenuSub({ label, leading, selected, children, className }) {
   ] });
 }
 function MenuItem({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }) {
-  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx10(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx10(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs5(
+  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",
     {
       type: "button",
@@ -513,43 +576,43 @@ function MenuItem({ label, children, size = "default", description, leading, tra
       ),
       ...props,
       children: [
-        leading && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center", children: leading }),
-        children ?? /* @__PURE__ */ jsxs5("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-          /* @__PURE__ */ jsx10("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-          description && /* @__PURE__ */ jsx10("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
+        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__ */ jsxs5("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-          edge && /* @__PURE__ */ jsx10("span", { className: cn("flex items-center", hint && "group-hover:opacity-0", hint && selected && "opacity-0"), children: edge }),
-          hint && /* @__PURE__ */ jsx10("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100", selected && "opacity-100"), children: hint })
+        /* @__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 })
         ] })
       ]
     }
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs5("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx10(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx10("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: 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 })
   ] });
 }
 function MenuSection({ label, children, className }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx10("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx10(SectionLabel, { className: "text-text-secondary", children: label }) }),
+  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 }) }),
     children
   ] });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx12("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function InputChip({ label, leading, onRemove, className }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -565,9 +628,9 @@ function InputChip({ label, leading, onRemove, className }) {
         className
       ),
       children: [
-        leading && /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center", children: leading }),
-        /* @__PURE__ */ jsx11("span", { className: "text-caption font-medium text-text-primary", children: label }),
-        onRemove && /* @__PURE__ */ jsx11(
+        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(
           "button",
           {
             type: "button",
@@ -577,7 +640,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__ */ jsx11(IconX, { size: 10, stroke: 1.5 })
+            children: /* @__PURE__ */ jsx13(IconX, { size: 10, stroke: 1.5 })
           }
         )
       ]
@@ -594,12 +657,12 @@ function ChipInput({
   chipLeading,
   rowLeading
 }) {
-  const [query, setQuery] = useState3("");
-  const [highlight, setHighlight] = useState3(0);
-  const [isFocused, setIsFocused] = useState3(false);
-  const [anchorRect, setAnchorRect] = useState3(null);
-  const wrapperRef = useRef2(null);
-  const inputRef = useRef2(null);
+  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 matches = useMemo(() => {
     const selectedIds = new Set(value.map((o) => o.id));
     const excludedIds = new Set(excludeIds);
@@ -615,7 +678,7 @@ function ChipInput({
     setHighlight(0);
   }, [query, matches.length]);
   const showDropdown = isFocused && query.trim().length > 0 && matches.length > 0;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!showDropdown) return;
     const update = () => {
       if (wrapperRef.current) setAnchorRect(wrapperRef.current.getBoundingClientRect());
@@ -665,16 +728,16 @@ function ChipInput({
       }
     }
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs7(
       "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__ */ jsx11(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
-          /* @__PURE__ */ jsx11(
+          value.map((o) => /* @__PURE__ */ jsx13(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
+          /* @__PURE__ */ jsx13(
             "input",
             {
               ref: inputRef,
@@ -694,8 +757,8 @@ function ChipInput({
         ]
       }
     ),
-    showDropdown && anchorRect && createPortal2(
-      /* @__PURE__ */ jsx11(
+    showDropdown && anchorRect && createPortal3(
+      /* @__PURE__ */ jsx13(
         "div",
         {
           className: "fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
@@ -708,7 +771,7 @@ function ChipInput({
             }),
             width: anchorRect.width
           },
-          children: matches.map((o, i) => /* @__PURE__ */ jsx11(
+          children: matches.map((o, i) => /* @__PURE__ */ jsx13(
             MenuItem,
             {
               size: "tall",
@@ -732,84 +795,45 @@ function ChipInput({
   ] });
 }
 
-// src/Tooltip.tsx
-import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-function Tooltip({ label, shortcut, className }) {
-  return /* @__PURE__ */ jsxs7("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__ */ jsx12("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
-    shortcut && /* @__PURE__ */ jsx12(Kbd, { children: shortcut })
-  ] });
-}
-var GAP2 = 6;
-var VIEWPORT_PAD = 8;
-function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
-  const [show, setShow] = useState4(false);
-  const ref = useRef3(null);
-  const tooltipRef = useRef3(null);
-  const [style, setStyle] = useState4({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
-  const reposition = useCallback2(() => {
-    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 + GAP2 : triggerRect.top - tipRect.height - GAP2;
-    if (placement === "top" && top < VIEWPORT_PAD) top = triggerRect.bottom + GAP2;
-    else if (placement === "bottom" && top + tipRect.height > window.innerHeight - VIEWPORT_PAD) top = triggerRect.top - tipRect.height - GAP2;
-    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]);
-  useLayoutEffect3(() => {
-    if (show) reposition();
-  }, [show, reposition]);
-  return /* @__PURE__ */ jsxs7("div", { ref, className: cn("inline-flex shrink-0", wrapperClassName), onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [
-    children,
-    show && createPortal3(
-      /* @__PURE__ */ jsx12("div", { ref: tooltipRef, style, children: /* @__PURE__ */ jsx12(Tooltip, { label, shortcut }) }),
-      document.body
-    )
-  ] });
-}
-
 // src/IconButton.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+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__ */ jsx13(
-    "button",
+  const button = /* @__PURE__ */ jsx14(
+    BaseButton2,
     {
       type,
-      className: cn(
+      disabled: disabled || !!disabledReason,
+      focusableWhenDisabled: !!disabledReason,
+      className: (state) => cn(
         "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 cursor-pointer",
-        !disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
-        !disabled && variant === "muted" && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        !disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
-        disabled && variant === "primary" && "bg-bg-disabled text-text-disabled",
-        disabled && variant === "muted" && "text-text-disabled",
-        disabled && variant === "outlined" && "border border-border-default text-text-disabled",
-        disabled && "pointer-events-none cursor-not-allowed",
+        !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
       ),
-      disabled,
       ...props,
       children
     }
   );
-  if (tooltip) {
-    return /* @__PURE__ */ jsx13(WithTooltip, { label: tooltip, shortcut: tooltipShortcut, placement: tooltipPlacement, children: button });
+  const label = disabledReason ?? tooltip;
+  if (label) {
+    return /* @__PURE__ */ jsx14(WithTooltip, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
   }
   return button;
 }
@@ -818,9 +842,9 @@ function IconButton({
 import { useRef as useRef4, useState as useState5 } from "react";
 
 // src/Divider.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Divider({ orientation = "horizontal", className }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       role: "separator",
@@ -831,61 +855,59 @@ function Divider({ orientation = "horizontal", className }) {
 }
 
 // src/Person.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } 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__ */ jsx15(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx15("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+      /* @__PURE__ */ jsx16(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx16("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
 
 // src/PersonTrigger.tsx
+import { Button as BaseButton3 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx16(
-      "button",
+    return /* @__PURE__ */ jsx17(
+      BaseButton3,
       {
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": open,
         className: cn("cursor-pointer rounded-full focus:outline-none", className),
         ...props,
-        children: /* @__PURE__ */ jsx16(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx17(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
   return /* @__PURE__ */ jsxs9(
-    "button",
+    BaseButton3,
     {
       type: "button",
       "aria-haspopup": "menu",
       "aria-expanded": open,
       className: cn(
-        // The size is an arbitrary value (the body-2 token): this list goes through
-        // cn(), and tw-merge silently drops a custom text-{size} once a
-        // text-{colour} follows it. Measured: the name rendered 16px.
-        "flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-[14px] leading-[140%] text-text-primary transition-colors hover:bg-bg-hover",
+        "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",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx16(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx16(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        /* @__PURE__ */ jsx17(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx17(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
       ]
     }
   );
 }
 
 // src/IdentityMenu.tsx
-import { Fragment, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, anchor, className, children }) {
   const act = (action) => () => {
     onClose();
@@ -894,41 +916,41 @@ function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, o
   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: [
-      /* @__PURE__ */ jsx17(MenuRow, { children: /* @__PURE__ */ jsx17(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
-      /* @__PURE__ */ jsx17(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." }),
+      /* @__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,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
     relayUrl && /* @__PURE__ */ jsxs10(Fragment, { children: [
-      /* @__PURE__ */ jsx17(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
       /* @__PURE__ */ jsxs10(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx17(MenuRow, { children: /* @__PURE__ */ jsx17("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx17(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+        /* @__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: [
-      /* @__PURE__ */ jsx17(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx17(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx17(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx18(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx18(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx17(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx17(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx18(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx18(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 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__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       PersonTrigger,
       {
         name: me.name,
@@ -942,7 +964,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
         "aria-label": compact ? "Account menu" : void 0
       }
     ),
-    open && /* @__PURE__ */ jsx17(
+    open && /* @__PURE__ */ jsx18(
       IdentityPanel,
       {
         me,
@@ -959,12 +981,12 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   ] });
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx17("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", 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 jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var FieldControlIdContext = createContext2(void 0);
 function useFieldControlId(ownId) {
   const fromField = useContext2(FieldControlIdContext);
@@ -981,11 +1003,11 @@ function Field({ label, required = false, htmlFor, children }) {
         className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`,
         children: [
           label,
-          required && /* @__PURE__ */ jsx18("span", { className: "text-error-default ml-0.5", children: "*" })
+          required && /* @__PURE__ */ jsx19("span", { className: "text-error-default ml-0.5", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx18(FieldControlIdContext.Provider, { value: id, children })
+    /* @__PURE__ */ jsx19(FieldControlIdContext.Provider, { value: id, children })
   ] });
 }
 
@@ -993,7 +1015,7 @@ function Field({ label, required = false, htmlFor, children }) {
 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 jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+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);
@@ -1133,15 +1155,15 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
         ),
         children: [
           /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx19("span", { className: "truncate", children: selected?.label ?? placeholder })
+            selected?.leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx20("span", { className: "truncate", children: selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx19(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+          /* @__PURE__ */ jsx20(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
         ]
       }
     ),
     open && rect && createPortal4(
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         "div",
         {
           ref: menuRef,
@@ -1174,10 +1196,10 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               ),
               children: [
                 /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.leading && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                  /* @__PURE__ */ jsx19("span", { className: "truncate", children: option.label })
+                  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__ */ jsx19(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                option.value === value && /* @__PURE__ */ jsx20(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
               ]
             },
             option.value
@@ -1191,10 +1213,10 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 
 // src/TextInput.tsx
 import { forwardRef } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2({ className, type = "text", id, ...props }, ref) {
   const controlId = useFieldControlId(id);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "input",
     {
       ref,
@@ -1215,10 +1237,10 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", id, .
 
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Textarea = forwardRef2(function Textarea2({ className, id, ...props }, ref) {
   const controlId = useFieldControlId(id);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "textarea",
     {
       ref,
@@ -1243,7 +1265,7 @@ import { useState as useState7 } from "react";
 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 jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+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) => {
@@ -1254,8 +1276,8 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
   }, [onClose]);
   return createPortal5(
     /* @__PURE__ */ jsxs13(Fragment3, { children: [
-      /* @__PURE__ */ jsx22("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: onClose }),
-      /* @__PURE__ */ jsx22("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs13(
+      /* @__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",
@@ -1265,11 +1287,11 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
           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__ */ jsx22("span", { className: "text-h4 text-text-primary", children: title }),
-              /* @__PURE__ */ jsx22(IconButton, { tooltip: "Close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx22(IconX2, { size: 16, stroke: 1.5 }) })
+              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__ */ jsx22("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-            footer != null && /* @__PURE__ */ jsx22("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+            /* @__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 })
           ]
         }
       ) })
@@ -1279,7 +1301,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState7(false);
   const confirm = async () => {
@@ -1291,15 +1313,15 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     DialogShell,
     {
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
       footer: /* @__PURE__ */ jsxs14(Fragment4, { children: [
-        /* @__PURE__ */ jsx23(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx23(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+        /* @__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 })
       ] }),
       children
     }
@@ -1308,7 +1330,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 
 // src/EditableText.tsx
 import { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+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);
@@ -1359,7 +1381,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     className
   );
   if (readOnly) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "div",
       {
         "aria-label": label,
@@ -1369,7 +1391,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx24(
+    return multiline ? /* @__PURE__ */ jsx25(
       "textarea",
       {
         ref: fieldRef,
@@ -1382,7 +1404,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx24(
+    ) : /* @__PURE__ */ jsx25(
       "input",
       {
         ref: fieldRef,
@@ -1396,7 +1418,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "button",
     {
       type: "button",
@@ -1416,33 +1438,33 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function EmptyState({ icon, message, className }) {
   return /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
-    /* @__PURE__ */ jsx25("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx25(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx25("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+    /* @__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 jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", 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: [
-    /* @__PURE__ */ jsx26(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx26(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+    /* @__PURE__ */ jsx27(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx27(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx26(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx27("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx27(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/Breadcrumb.tsx
 import { Fragment as Fragment5, useCallback as useCallback4, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState9 } from "react";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef7(null);
   const labelRefs = useRef7([]);
@@ -1462,7 +1484,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx27("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx28("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", className), children: items.map((item, index) => {
     const last = index === items.length - 1;
     const text = cn(
       "truncate",
@@ -1475,21 +1497,21 @@ function Breadcrumb({ items, className }) {
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
-    const crumb = item.href ? /* @__PURE__ */ jsx27("a", { ref: setLabelRef, href: item.href, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx27("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    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: [
-      index > 0 && /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", 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
         // must keep truncating inside it, or wrapping it would widen the
         // trail and the tooltip would never be needed again.
-        /* @__PURE__ */ jsx27(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx28(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
   return /* @__PURE__ */ jsxs18(
     "a",
@@ -1506,22 +1528,22 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx28(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx28("span", { className: "shrink-0 font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx29("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx29("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx29(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx29("span", { className: "shrink-0 font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
 }
 
 // src/Rail.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx29("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__ */ jsx30("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 jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
   return /* @__PURE__ */ jsxs19(
     "a",
@@ -1531,14 +1553,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__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "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__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               "span",
               {
                 className: cn(
@@ -1550,16 +1572,16 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx30("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx31("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 jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "nav",
     {
       "aria-label": ariaLabel,
@@ -1573,7 +1595,7 @@ function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className })
 }
 
 // src/Property.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
     return (
@@ -1581,22 +1603,48 @@ function Property({ label, layout = "row", children, className }) {
       // 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__ */ jsx32("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx33("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__ */ jsx32("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx33("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";
+function Reaction({ emoji, count, pressed = false, className, type, ...props }) {
+  return /* @__PURE__ */ jsxs21(
+    "button",
+    {
+      type: type ?? "button",
+      "aria-pressed": pressed,
+      className: cn(
+        // Chip's pill at a control's height, so a reaction and a status chip
+        // read as the same family — 24px matches Button `small`.
+        "inline-flex h-6 items-center justify-center gap-1.5 rounded-full px-2",
+        "border transition-colors",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        pressed ? "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover" : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
+        className
+      ),
+      ...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 })
+      ]
+    }
+  );
+}
+
 // src/SearchInput.tsx
 import "react";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -1606,7 +1654,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           "input",
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -1614,7 +1662,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx33(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx35(Kbd, { children: shortcut })
       ]
     }
   );
@@ -1623,10 +1671,10 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { useState as useState10 } from "react";
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
   const [isHovered, setIsHovered] = useState10(false);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -1639,8 +1687,8 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-1", children: [
-          chevron && /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-center gap-1", children: [
+          chevron && /* @__PURE__ */ jsx36(
             IconChevronRight2,
             {
               size: 12,
@@ -1648,9 +1696,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
               className: cn("text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
             }
           ),
-          /* @__PURE__ */ jsx34(SectionLabel, { children: title })
+          /* @__PURE__ */ jsx36(SectionLabel, { children: title })
         ] }),
-        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx34(
+        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx36(
           IconButton,
           {
             tooltip: action.tooltip,
@@ -1669,60 +1717,65 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, ac
 }
 
 // src/Tabs.tsx
-import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+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__ */ jsx35("div", { role: "tablist", className: cn("flex items-center gap-2", className), children: tabs.map((tab) => /* @__PURE__ */ jsxs23(
-    "button",
+  return /* @__PURE__ */ jsx37(
+    BaseTabs.Root,
     {
-      type: "button",
-      role: "tab",
-      "aria-selected": active === tab.id,
-      onClick: () => onChange(tab.id),
-      className: cn(
-        "flex cursor-pointer items-center transition-colors",
-        // Arbitrary sizes (the body-2 and caption tokens): the colour branch below
-        // follows them through cn(), and tw-merge drops a custom text-{size}
-        // once a text-{colour} lands after it. Measured: tabs rendered 16px.
-        // 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-[14px] leading-[140%]" : "gap-1 rounded px-1.5 py-0.5 text-[12px] leading-[120%]",
-        active === tab.id ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover"
-      ),
-      children: [
-        tab.icon,
-        /* @__PURE__ */ jsxs23("span", { className: "flex items-baseline", children: [
-          tab.label,
-          tab.count !== void 0 ? /* @__PURE__ */ jsx35("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
-        ] })
-      ]
-    },
-    tab.id
-  )) });
+      value: active,
+      onValueChange: (value, details) => {
+        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,
+        {
+          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
+      )) })
+    }
+  );
 }
 
 // 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 { IconCircleCheck } from "@tabler/icons-react";
-import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
-var SURFACE_BY_TYPE = {
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
   neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]"
 };
-var ICON_BY_TYPE = {
-  success: "signal:text-success-default signal:drop-shadow-[0_0_5px_rgba(63,222,140,0.7)]",
-  brand: "signal:text-text-interactive signal:drop-shadow-[0_0_5px_rgba(86,200,255,0.6)]",
+var ICON_STYLES = {
+  success: "signal:text-success-default signal:drop-shadow-glow-success",
+  brand: "signal:text-text-interactive signal:drop-shadow-glow-accent",
   neutral: "signal:text-text-secondary"
 };
-var ACTION_BORDER_BY_TYPE = {
+var ACTION_BORDER_STYLES = {
   success: "signal:border signal:border-border-default signal:hover:border-border-strong",
   brand: "signal:border signal:border-border-default signal:hover:border-border-strong",
   neutral: "border border-border-default"
 };
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
@@ -1730,25 +1783,25 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
         // Without an action the label needs real right padding; the action
         // button brings its own edge, so the tight pr-1 only applies there.
         hasAction ? "pr-1 gap-[46px]" : "pr-3",
-        SURFACE_BY_TYPE[type],
+        SURFACE_STYLES[type],
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx36(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_BY_TYPE[type]) }),
-          /* @__PURE__ */ jsx36("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
+        /* @__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 })
         ] }),
-        hasAction && /* @__PURE__ */ jsx36(
+        hasAction && /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
             onClick: onAction,
             className: cn(
               "h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors",
-              ACTION_BORDER_BY_TYPE[type],
+              ACTION_BORDER_STYLES[type],
               type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
             ),
-            children: /* @__PURE__ */ jsx36("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
+            children: /* @__PURE__ */ jsx38("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
           }
         )
       ]
@@ -1775,10 +1828,10 @@ function ToastProvider({ children }) {
     return () => clearTimeout(timer);
   }, [toast]);
   const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs24(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs25(ToastContext.Provider, { value, children: [
     children,
     toast && createPortal6(
-      /* @__PURE__ */ jsx36("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx38("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx38(
         Toast,
         {
           className: "pointer-events-auto",
@@ -1835,6 +1888,7 @@ export {
   Property,
   Rail,
   RailItem,
+  Reaction,
   SearchInput,
   SectionHeader,
   SectionLabel,