@estiva-app/ui 0.13.1 → 0.15.0

package/dist/index.js

@@ -17,7 +17,8 @@ var FONT_SIZE_TOKENS = [
   "input-label",
   "input-value",
   "input-helper",
-  "chip"
+  "chip",
+  "small"
 ];
 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", "glow-warning"];
@@ -253,9 +254,9 @@ function Kbd({ children, className }) {
     "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]",
+        "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-caption text-text-secondary",
+        "signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-small",
+        "ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small",
         className
       ),
       children
@@ -410,9 +411,9 @@ var formatBytes = (bytes) => {
   return `${(kb / 1024).toFixed(1)} MB`;
 };
 var typeLabelOf = (name) => extensionOf(name).toUpperCase() || "FILE";
-var TILE = "size-9 rounded-md bg-bg-active flex items-center justify-center shrink-0 text-text-secondary";
-var NAME = "text-[12px] font-medium leading-[1.3] text-text-primary truncate";
-var NOTE = "text-[10px] leading-[1.2] truncate";
+var TILE_CLASSES = "size-9 rounded-md bg-bg-active flex items-center justify-center shrink-0 text-text-secondary";
+var NAME_CLASSES = "text-caption font-medium text-text-primary truncate";
+var NOTE_CLASSES = "text-small tracking-wide leading-tight truncate";
 function TypeIcon({ name }) {
   const Icon = ICON_BY_EXTENSION[extensionOf(name)] ?? IconFile;
   return /* @__PURE__ */ jsx9(Icon, { size: 20, stroke: 1.5 });
@@ -469,15 +470,15 @@ function AttachmentCard({
         className: cn("group relative flex items-center gap-2 w-[200px] p-1.5 pr-3", failed ? "border-error-default" : warning && "border-warning-default", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx9("div", { className: cn(TILE, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx9(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx9(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx9(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx9("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx9("span", { className: "text-[9px] font-semibold", children: typeLabelOf(name) }) }),
+          /* @__PURE__ */ jsx9("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx9(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx9(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx9(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx9("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx9("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
           /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
-            /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
+            /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
             /* @__PURE__ */ jsx9(
               Truncating,
               {
                 text: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
                 hint: noteHint,
-                className: cn(NOTE, failed ? "text-error-default" : warning ? "text-warning-default" : "text-text-secondary")
+                className: cn(NOTE_CLASSES, failed ? "text-error-default" : warning ? "text-warning-default" : "text-text-secondary")
               }
             )
           ] }),
@@ -521,10 +522,10 @@ function AttachmentCard({
   }
   if (state === "unreadable") {
     return /* @__PURE__ */ jsxs5(Card, { fill: "inset", unreadable: true, className: cn("flex items-center gap-2 w-[240px] p-1.5 opacity-70", className), ...props, children: [
-      /* @__PURE__ */ jsx9("div", { className: TILE, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
+      /* @__PURE__ */ jsx9("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-        /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
-        /* @__PURE__ */ jsx9("span", { className: cn(NOTE, "text-text-secondary"), children: note ?? "Could not be loaded" })
+        /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
+        /* @__PURE__ */ jsx9("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
       ] })
     ] });
   }
@@ -545,16 +546,16 @@ function AttachmentCard({
         }
       ) : /* @__PURE__ */ jsx9("div", { className: "block w-full", children: picture }),
       /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 pl-2 pr-1 py-1 min-w-0", children: [
-        /* @__PURE__ */ jsx9(Truncating, { text: name, className: "flex-1 text-[12px] leading-[1.3] text-text-primary truncate", wrapperClassName: "flex-1" }),
+        /* @__PURE__ */ jsx9(Truncating, { text: name, className: "flex-1 text-caption text-text-primary truncate", wrapperClassName: "flex-1" }),
         download
       ] })
     ] });
   }
   const body = /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx9("div", { className: TILE, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
+    /* @__PURE__ */ jsx9("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-      /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
-      /* @__PURE__ */ jsx9("span", { className: cn(NOTE, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
+      /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
+      /* @__PURE__ */ jsx9("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
     ] })
   ] });
   return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: href ? "hairline" : "none", className: cn("group flex items-center gap-2 w-[240px] p-1.5 pr-1", !href && "opacity-70", className), ...props, children: [
@@ -564,9 +565,9 @@ function AttachmentCard({
 }
 
 // src/Avatar.tsx
-import { useState as useState2 } from "react";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { IconUserFilled } from "@tabler/icons-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
 var hueFor = (key) => {
   let h = 0;
@@ -579,30 +580,45 @@ var initialsFor = (name) => {
   return initials.toUpperCase();
 };
 function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
-  const [broken, setBroken] = useState2(false);
   const label = name || alt;
-  const picture = src && !broken ? src : void 0;
-  return /* @__PURE__ */ jsx10(
-    "div",
+  return /* @__PURE__ */ jsxs6(
+    BaseAvatar.Root,
     {
+      render: /* @__PURE__ */ jsx10("div", {}),
       ...spoken ? { role: "img", "aria-label": spoken } : { "aria-hidden": true },
       className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className),
       style: { width: size, height: size },
-      children: picture ? /* @__PURE__ */ jsx10("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx10(
-        "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__ */ jsx10("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx10(IconUserFilled, { size: Math.round(size * 0.5) }) })
+      children: [
+        src && /* @__PURE__ */ jsx10(
+          BaseAvatar.Image,
+          {
+            src,
+            alt: "",
+            keepMounted: true,
+            className: "w-full h-full object-cover data-[error]:hidden"
+          }
+        ),
+        label ? /* @__PURE__ */ jsx10(
+          BaseAvatar.Fallback,
+          {
+            render: /* @__PURE__ */ jsx10("div", {}),
+            className: "w-full h-full flex items-center justify-center font-semibold leading-none",
+            style: {
+              /* eslint-disable no-restricted-syntax -- @estiva-escape: the per-person palette (the note at
+                 the top): eight hues picked from the name, the one ink that reads on all
+                 of them, and a size that follows `size`. None of it can be a token. */
+              // 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%)`
+              /* eslint-enable no-restricted-syntax */
+            },
+            children: /* @__PURE__ */ jsx10("span", { className: "[text-box:trim-both_cap_alphabetic]", children: initialsFor(label) })
+          }
+        ) : /* @__PURE__ */ jsx10(BaseAvatar.Fallback, { render: /* @__PURE__ */ jsx10("div", {}), className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx10(IconUserFilled, { size: Math.round(size * 0.5) }) })
+      ]
     }
   );
 }
@@ -633,7 +649,7 @@ function AvatarGroup({ members, size = 24 }) {
 
 // src/Banner.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var TONE_STYLES = {
   ok: "bg-success-muted text-success-default",
   error: "bg-error-muted text-error-default",
@@ -645,7 +661,7 @@ function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className
   if (!onDismiss) {
     return /* @__PURE__ */ jsx12("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
   }
-  return /* @__PURE__ */ jsxs6("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+  return /* @__PURE__ */ jsxs7("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
     /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1", children }),
     /* @__PURE__ */ jsx12(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
   ] });
@@ -653,7 +669,7 @@ function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className
 
 // src/Button.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -666,7 +682,7 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  const button = /* @__PURE__ */ jsxs7(
+  const button = /* @__PURE__ */ jsxs8(
     BaseButton3,
     {
       type,
@@ -720,7 +736,7 @@ import { IconCheck } from "@tabler/icons-react";
 import { jsx as jsx14 } 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",
+    "inline-flex items-center justify-center size-4 shrink-0 rounded-sm 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",
@@ -748,7 +764,7 @@ function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
 }
 
 // src/Chip.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } 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",
@@ -758,7 +774,7 @@ 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__ */ jsxs8("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
     leadingIcon && /* @__PURE__ */ jsx15("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
     label && // A chip given a `max-w-*` cuts a long label with an ellipsis instead
     // of growing past it — Ship's project chip on an issue row
@@ -768,13 +784,13 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
     // the screenshot diff caught every descender cut off. `clip` is the
     // one overflow that leaves the other axis visible. A chip with no cap
     // draws exactly as before.
-    /* @__PURE__ */ jsx15("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
+    /* @__PURE__ */ jsx15("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-small signal:font-semibold signal:tracking-wide signal:tabular-nums", children: label }),
     trailingIcon && /* @__PURE__ */ jsx15("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
 // src/ChipInput.tsx
-import { useMemo, useState as useState3 } from "react";
+import { useMemo, useState as useState2 } from "react";
 import { Button as BaseButton4 } from "@base-ui/react/button";
 import { Combobox } from "@base-ui/react/combobox";
 import { IconX as IconX3 } from "@tabler/icons-react";
@@ -797,7 +813,7 @@ function SectionLabel({ children, className }) {
     "span",
     {
       className: cn(
-        "text-[12px] leading-[12px] font-medium text-text-primary signal:font-mono signal:text-[10px] signal:uppercase signal:tracking-[0.14em]",
+        "text-h5 leading-3 text-text-primary signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
         className
       ),
       children
@@ -806,7 +822,7 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var MenuContext = createContext(null);
 function MenuPanel({ children, className, ...props }) {
   return /* @__PURE__ */ jsx17(
@@ -839,7 +855,7 @@ var VIEWPORT_PAD2 = 8;
 var HOVER_OPEN_DELAY = 0;
 var HOVER_CLOSE_DELAY = 150;
 function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange, actionsRef, children, className, contentClassName }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     BaseMenu.Root,
     {
       open,
@@ -887,7 +903,7 @@ function MenuSub({ label, leading, selected, children, className }) {
       '[@estiva-app/ui] Menu: `openOnHover` and `MenuSub` cannot be used together \u2014 leaving the submenu panel strands the menu open. Open this menu on a press instead. See Menu.mdx, "Hover-opened menus".'
     );
   }
-  return /* @__PURE__ */ jsxs9(BaseMenu.SubmenuRoot, { children: [
+  return /* @__PURE__ */ jsxs10(BaseMenu.SubmenuRoot, { children: [
     /* @__PURE__ */ jsx17(
       BaseMenu.SubmenuTrigger,
       {
@@ -944,17 +960,17 @@ function menuItemClassName({ size, selected, className }) {
 }
 function MenuItemBody({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected }) {
   const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx17(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx17(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
     leading && /* @__PURE__ */ jsx17("span", { className: "flex shrink-0 items-center", children: leading }),
-    children ?? /* @__PURE__ */ jsxs9("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx17("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx17("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
+    children ?? /* @__PURE__ */ jsxs10("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__PURE__ */ jsx17("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx17("span", { className: "truncate text-caption text-text-secondary", children: description })
     ] }),
     (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__ */ jsxs9("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+    /* @__PURE__ */ jsxs10("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
       edge && /* @__PURE__ */ jsx17("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
       hint && /* @__PURE__ */ jsx17("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
     ] })
@@ -993,21 +1009,21 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs9("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+  return /* @__PURE__ */ jsxs10("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
     /* @__PURE__ */ jsx17(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx17("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
+    target && /* @__PURE__ */ jsx17("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
   const inMenu = useContext(MenuContext) !== null;
   const heading = /* @__PURE__ */ jsx17("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx17(SectionLabel, { className: "text-text-secondary", children: label }) });
   if (!inMenu) {
-    return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
+    return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs9(BaseMenu.Group, { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxs10(BaseMenu.Group, { className: "flex flex-col", children: [
     /* @__PURE__ */ jsx17(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
@@ -1017,7 +1033,7 @@ function MenuRow({ children, className }) {
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var CHIP_BOX = (
   // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
   // rounded-sm corners — never a forced circle — and the chip's corner
@@ -1027,10 +1043,10 @@ var CHIP_BOX = (
 var CHIP_LABEL = "text-caption font-medium text-text-primary";
 var CHIP_REMOVE = "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary";
 var chipPadding = (leading, removable) => cn(leading ? "pl-[2px]" : "pl-2", removable ? "pr-1" : "pr-2");
-function InputChip({ label, leading, onRemove, className }) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
+function InputChip({ label, leading, onRemove, removeLabel, truncate, className }) {
+  return /* @__PURE__ */ jsxs11("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
     leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: leading }),
-    /* @__PURE__ */ jsx18("span", { className: CHIP_LABEL, children: label }),
+    /* @__PURE__ */ jsx18("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
     onRemove && /* @__PURE__ */ jsx18(
       BaseButton4,
       {
@@ -1039,8 +1055,8 @@ function InputChip({ label, leading, onRemove, className }) {
           e.stopPropagation();
           onRemove();
         },
-        className: CHIP_REMOVE,
-        "aria-label": `Remove ${label}`,
+        className: cn(CHIP_REMOVE, truncate && "shrink-0"),
+        "aria-label": removeLabel ?? `Remove ${label}`,
         children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 })
       }
     )
@@ -1057,8 +1073,8 @@ function ChipInput({
   rowLeading,
   ...aria
 }) {
-  const [query, setQuery] = useState3("");
-  const [box, setBox] = useState3(null);
+  const [query, setQuery] = useState2("");
+  const [box, setBox] = useState2(null);
   const available = useMemo(() => {
     const chosen = new Set(value.map((o) => o.id));
     const excluded = new Set(excludeIds);
@@ -1094,7 +1110,7 @@ function ChipInput({
       setQuery("");
     }
   }
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Combobox.Root,
     {
       multiple: true,
@@ -1111,8 +1127,8 @@ function ChipInput({
       filter,
       itemToStringLabel: (option) => option.label,
       children: [
-        /* @__PURE__ */ jsxs10(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
-          value.map((option) => /* @__PURE__ */ jsxs10(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
+        /* @__PURE__ */ jsxs11(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
+          value.map((option) => /* @__PURE__ */ jsxs11(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
             chipLeading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
             /* @__PURE__ */ jsx18("span", { className: CHIP_LABEL, children: option.label }),
             /* @__PURE__ */ jsx18(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 }) })
@@ -1162,7 +1178,7 @@ var GAP3 = 4;
 var VIEWPORT_PAD3 = 8;
 
 // src/InlineChip.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var INLINE_CHIP_CLASSES = "inline-flex h-[1.4em] items-center gap-1 rounded-sm px-1 mx-0.5 align-top text-body-2 font-normal select-none";
 var INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
@@ -1184,7 +1200,7 @@ function inlineChipClassName(tone, className) {
   return cn(INLINE_CHIP_CLASSES, INLINE_CHIP_TONE_CLASSES[tone], className);
 }
 function InlineChip({ tone = "neutral", icon, href, className, children, ...props }) {
-  const body = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+  const body = /* @__PURE__ */ jsxs12(Fragment3, { children: [
     icon && /* @__PURE__ */ jsx19("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
     children
   ] });
@@ -1199,15 +1215,15 @@ function InlineChip({ tone = "neutral", icon, href, className, children, ...prop
 import { useCallback, useRef as useRef2 } from "react";
 
 // src/Divider.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function Divider({ orientation = "horizontal", label, tone = "default", className }) {
   if (label && orientation === "horizontal") {
     const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
-    return /* @__PURE__ */ jsxs12(
-      "div",
+    return /* @__PURE__ */ jsxs13(
+      Separator,
       {
-        role: "separator",
-        "aria-orientation": "horizontal",
+        orientation: "horizontal",
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2 mx-3", className),
         children: [
@@ -1219,23 +1235,22 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
     );
   }
   return /* @__PURE__ */ jsx20(
-    "div",
+    Separator,
     {
-      role: "separator",
-      "aria-orientation": orientation,
+      orientation,
       className: cn("shrink-0 bg-border-subtle", orientation === "horizontal" ? "h-px mx-3" : "w-px self-stretch", className)
     }
   );
 }
 
 // src/Person.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } 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__ */ jsxs13("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs14("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
       /* @__PURE__ */ jsx21(Avatar, { name, src: picture, size }),
       /* @__PURE__ */ jsx21("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
@@ -1245,7 +1260,7 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
 // src/PersonTrigger.tsx
 import { Button as BaseButton5 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
     return /* @__PURE__ */ jsx22(
@@ -1261,7 +1276,7 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       }
     );
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     BaseButton5,
     {
       type: "button",
@@ -1287,7 +1302,7 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
   return /* @__PURE__ */ jsx23(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx23(IdentityRows, { ...rest, onClose }) });
@@ -1298,23 +1313,23 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-    /* @__PURE__ */ jsxs15(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    /* @__PURE__ */ jsxs16(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
       /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
       /* @__PURE__ */ jsx23(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__ */ jsxs15(Note, { children: [
+      me.email && /* @__PURE__ */ jsxs16(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    relayUrl && /* @__PURE__ */ jsxs16(Fragment4, { children: [
       /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs15(MenuSection, { label: "Workspace", children: [
+      /* @__PURE__ */ jsxs16(MenuSection, { label: "Workspace", children: [
         /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
         /* @__PURE__ */ jsx23(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    appRows && /* @__PURE__ */ jsxs16(Fragment4, { children: [
       /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
@@ -1379,7 +1394,7 @@ function Note({ children }) {
 // src/Field.tsx
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField } from "@base-ui/react/field";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var LINE_STYLES = {
   helper: "text-caption text-text-muted",
   warning: "text-caption text-warning-default",
@@ -1389,12 +1404,12 @@ function Field({ label, required = false, helper, error, children }) {
   const control = required && isValidElement(children) ? cloneElement(children, {
     "aria-required": children.props["aria-required"] ?? true
   }) : children;
-  return /* @__PURE__ */ jsxs16(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs16(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+  return /* @__PURE__ */ jsxs17(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs17(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
       label,
       required && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1.5", children: [
       control,
       error != null ? /* @__PURE__ */ jsx24(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx24(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
     ] })
@@ -1407,12 +1422,12 @@ function FieldLine({ tone = "helper", children, className }) {
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     BaseSelect.Root,
     {
       value,
@@ -1420,7 +1435,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           BaseSelect.Trigger,
           {
             "aria-label": ariaLabel,
@@ -1442,12 +1457,12 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               "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",
+              size === "default" && "px-3 py-2 text-input-value",
+              size === "small" && "h-6 px-2 text-caption",
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs17("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+              /* @__PURE__ */ jsxs18("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
                 selected?.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: selected.leading }),
                 /* @__PURE__ */ jsx25(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
               ] }),
@@ -1474,15 +1489,15 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               {
                 render: /* @__PURE__ */ jsx25(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx25(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs17(
+                children: /* @__PURE__ */ jsx25(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs18(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
-                      /* @__PURE__ */ jsxs17("span", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs18("span", { className: "flex min-w-0 items-center gap-2", children: [
                         option.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx25(BaseSelect.ItemText, { className: "truncate text-[14px] leading-[140%] text-text-primary", children: option.label })
+                        /* @__PURE__ */ jsx25(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
                       /* @__PURE__ */ jsx25(
                         BaseSelect.ItemIndicator,
@@ -1507,15 +1522,18 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 import { forwardRef } from "react";
 import { Input } from "@base-ui/react/input";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
+var TextInput = forwardRef(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
   return /* @__PURE__ */ jsx26(
     Input,
     {
       ref,
       type,
       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",
+        "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg",
+        // The small size is the small Select's trigger, class for class.
+        size === "default" && "px-3 py-2 text-input-value",
+        size === "small" && "h-6 px-2 text-caption",
+        "text-text-primary placeholder:text-text-muted",
         "outline-none transition-colors",
         "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
         "signal:transition-shadow signal:focus:shadow-focus-ring",
@@ -1538,7 +1556,7 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
       render: /* @__PURE__ */ jsx27("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",
+        "text-input-value text-text-primary placeholder:text-text-muted",
         "resize-none outline-none transition-colors",
         "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
         "signal:transition-shadow signal:focus:shadow-focus-ring",
@@ -1550,14 +1568,14 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 
 // src/DialogShell.tsx
 import { useRef as useRef3 } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { IconX as IconX4 } from "@tabler/icons-react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog;
   const popupRef = useRef3(null);
@@ -1568,9 +1586,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs18(Parts.Portal, { children: [
+      children: /* @__PURE__ */ jsxs19(Parts.Portal, { children: [
         /* @__PURE__ */ jsx28(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs19(
           Parts.Popup,
           {
             ref: popupRef,
@@ -1579,7 +1597,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
             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__ */ jsxs18("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
                 headerContent ?? /* @__PURE__ */ jsx28(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx28("span", {}), children: title }),
                 /* @__PURE__ */ jsx28(
                   Parts.Close,
@@ -1607,9 +1625,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState4(false);
+  const [busy, setBusy] = useState3(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -1626,7 +1644,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
-      footer: /* @__PURE__ */ jsxs19(Fragment5, { children: [
+      footer: /* @__PURE__ */ jsxs20(Fragment5, { children: [
         /* @__PURE__ */ jsx29(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
         /* @__PURE__ */ jsx29(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
@@ -1636,14 +1654,14 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 }
 
 // src/EditableText.tsx
-import { useEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect, 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 jsx30 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState5(false);
-  const [draft, setDraft] = useState5(value);
-  const [busy, setBusy] = useState5(false);
+  const [editing, setEditing] = useState4(false);
+  const [draft, setDraft] = useState4(value);
+  const [busy, setBusy] = useState4(false);
   const fieldRef = useRef4(null);
   useEffect(() => {
     if (editing) {
@@ -1753,12 +1771,12 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 function EmptyState({ icon, message, scope = "page", className }) {
   if (scope === "section") {
-    return /* @__PURE__ */ jsx31("p", { className: cn("text-body-2 text-text-secondary", className), children: message });
+    return /* @__PURE__ */ jsx31("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
     /* @__PURE__ */ jsx31("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx31(IconMessage2, { size: 16, stroke: 1.5 }) }),
     /* @__PURE__ */ jsx31("p", { className: "text-body-2 text-text-secondary text-center", children: message })
   ] });
@@ -1784,13 +1802,13 @@ function ProgressBar({ value, max, label, variant = "default", className }) {
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
   return /* @__PURE__ */ jsx33("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__ */ jsxs21("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
     /* @__PURE__ */ jsx33(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
     /* @__PURE__ */ jsx33(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
@@ -1800,12 +1818,12 @@ function SkeletonList({ rows = 8, className }) {
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState6 } from "react";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef5(null);
   const labelRefs = useRef5([]);
-  const [truncated, setTruncated] = useState6(/* @__PURE__ */ new Set());
+  const [truncated, setTruncated] = useState5(/* @__PURE__ */ new Set());
   const measure = useCallback2(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
@@ -1821,7 +1839,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx34("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__ */ jsx34("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", className), children: items.map((item, index) => {
     const last = index === items.length - 1;
     const tone = item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary";
     const text = cn(
@@ -1829,14 +1847,14 @@ function Breadcrumb({ items, className }) {
       // A mono crumb is a ref — the identity. It never gives up width to a
       // long name beside it (the LongName story always claimed "the ref
       // stays"; flexbox was squeezing it anyway until this line).
-      item.mono && "shrink-0 font-mono text-[12px] leading-[120%]",
+      item.mono && "shrink-0 font-mono text-caption",
       tone
     );
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
     const crumb = item.href ? /* @__PURE__ */ jsx34("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx34("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs23(Fragment6, { children: [
       index > 0 && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
       item.icon && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       truncated.has(index) ? (
@@ -1850,9 +1868,9 @@ function Breadcrumb({ items, className }) {
 }
 
 // src/NavItem.tsx
-import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "a",
     {
       href,
@@ -1878,7 +1896,7 @@ 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 jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var GAP5 = 4;
 var VIEWPORT_PAD5 = 8;
 function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }) {
@@ -1887,7 +1905,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     BasePopover.Root,
     {
       open,
@@ -1958,8 +1976,8 @@ function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
     }
   );
 }
-function ToolbarInput(props) {
-  return /* @__PURE__ */ jsx37(BaseToolbar.Input, { render: /* @__PURE__ */ jsx37(TextInput, {}), ...props });
+function ToolbarInput({ size, ...props }) {
+  return /* @__PURE__ */ jsx37(BaseToolbar.Input, { render: /* @__PURE__ */ jsx37(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
   return /* @__PURE__ */ jsx37(
@@ -1990,7 +2008,7 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
-        className: "size-7 text-[18px] leading-none",
+        className: "size-7 text-h3 leading-none",
         children: /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", children: option.emoji })
       },
       option.emoji
@@ -2000,13 +2018,13 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
 
 // src/PreviewCard.tsx
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var GAP6 = 12;
 var VIEWPORT_PAD6 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
 function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs25(BasePreviewCard.Root, { children: [
+  return /* @__PURE__ */ jsxs26(BasePreviewCard.Root, { children: [
     /* @__PURE__ */ jsx39(
       BasePreviewCard.Trigger,
       {
@@ -2044,9 +2062,9 @@ function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
 }
 
 // src/RailItem.tsx
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "a",
     {
       href,
@@ -2073,7 +2091,7 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx41("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx41("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
@@ -2093,33 +2111,34 @@ function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className })
 }
 
 // src/Property.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+var VALUE_CLASSES = "contents";
 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__ */ jsxs27("div", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx43("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
-        children
+      /* @__PURE__ */ jsxs28("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx43("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx43("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs27("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx43("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    children
+  return /* @__PURE__ */ jsxs28("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx43("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx43("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
-function Reaction({ emoji, count, pressed = false, className, type, ...props }) {
-  return /* @__PURE__ */ jsxs28(
-    "button",
+import { Toggle } from "@base-ui/react/toggle";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+function Reaction({ emoji, count, pressed = false, className, ...props }) {
+  return /* @__PURE__ */ jsxs29(
+    Toggle,
     {
-      type: type ?? "button",
-      "aria-pressed": 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`.
@@ -2138,8 +2157,8 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
-        /* @__PURE__ */ jsx44("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+        /* @__PURE__ */ jsx44("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -2148,9 +2167,9 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -2177,7 +2196,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
   const titleElement = useRender({
     render: render ?? (chevron ? /* @__PURE__ */ jsx46("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx46("span", {})),
@@ -2186,7 +2205,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
       className: "flex h-full min-w-0 flex-1 items-center gap-1 text-left",
-      children: /* @__PURE__ */ jsxs30(Fragment7, { children: [
+      children: /* @__PURE__ */ jsxs31(Fragment7, { children: [
         chevron && /* @__PURE__ */ jsx46(
           IconChevronRight2,
           {
@@ -2199,7 +2218,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -2229,9 +2248,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/CollapsibleSection.tsx
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2251,14 +2270,14 @@ function writeStored(key, open) {
   }
 }
 function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }) {
-  const [openState, setOpenState] = useState7(() => readStored(storageKey) ?? defaultOpen);
+  const [openState, setOpenState] = useState6(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
     setOpenState(next);
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs31(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+  return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible.Trigger, {}) }),
     /* @__PURE__ */ jsx47(
       Collapsible.Panel,
@@ -2273,7 +2292,7 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
   return /* @__PURE__ */ jsx48(
     BaseTabs.Root,
@@ -2290,7 +2309,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs32(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs33(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -2303,7 +2322,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs32("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs33("span", { className: "flex items-baseline", children: [
                   tab.label,
                   tab.count !== void 0 ? /* @__PURE__ */ jsx48("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
@@ -2318,16 +2337,16 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useState as useState8 } from "react";
-import { createPortal } from "react-dom";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } 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)]",
-  warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
-  error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]"
+  success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
+  brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
+  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
+  warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
+  error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
 };
 var ICONS = {
   success: IconCircleCheck,
@@ -2353,82 +2372,90 @@ var ACTION_BORDER_STYLES = {
   warning: "signal:border signal:border-border-default signal:hover:border-border-strong",
   error: "signal:border signal:border-border-default signal:hover:border-border-strong"
 };
+var LABEL_CLASSES = "text-body-2 text-text-primary whitespace-nowrap";
+var pillClassName = (type, hasAction, className) => cn(
+  "inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg",
+  // 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_STYLES[type],
+  className
+);
+var actionClassName = (type) => cn(
+  "h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors",
+  ACTION_BORDER_STYLES[type],
+  type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
+);
+function LeadingIcon({ type }) {
+  const Icon = ICONS[type];
+  return /* @__PURE__ */ jsx49(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+}
+var ACTION_LABEL_CLASSES = "text-btn-small text-text-primary whitespace-nowrap";
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  const LeadingIcon = ICONS[type];
-  return /* @__PURE__ */ jsxs33(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg",
-        // 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_STYLES[type],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
-          /* @__PURE__ */ jsx49("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
-        ] }),
-        hasAction && /* @__PURE__ */ jsx49(
-          "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_STYLES[type],
-              type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
-            ),
-            children: /* @__PURE__ */ jsx49("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs34("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx49("span", { className: LABEL_CLASSES, children: label })
+    ] }),
+    hasAction && /* @__PURE__ */ jsx49("button", { type: "button", onClick: onAction, className: actionClassName(type), children: /* @__PURE__ */ jsx49("span", { className: ACTION_LABEL_CLASSES, children: actionLabel }) })
+  ] });
 }
 var ToastContext = createContext2(null);
-var toastSeq = 0;
+var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
-  const [toast, setToast] = useState8(null);
-  const showToast = useCallback3((opts) => {
-    setToast({ ...opts, id: ++toastSeq });
-  }, []);
-  const dismissToast = useCallback3(() => {
-    setToast(null);
-  }, []);
-  useEffect2(() => {
-    if (!toast) return;
-    const duration = toast.durationMs ?? 5e3;
-    if (duration <= 0) return;
-    const timer = setTimeout(() => {
-      setToast((current) => current?.id === toast.id ? null : current);
-    }, duration);
-    return () => clearTimeout(timer);
-  }, [toast]);
-  const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs33(ToastContext.Provider, { value, children: [
+  const manager = useMemo3(() => BaseToast.createToastManager(), []);
+  const value = useMemo3(
+    () => ({
+      showToast: ({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, durationMs = 5e3 }) => manager.add({
+        title: label,
+        type,
+        timeout: durationMs,
+        // A failure interrupts; everything else waits for a pause.
+        priority: type === "error" ? "high" : "low",
+        data: { leadingIcon, actionLabel, onAction }
+      }),
+      dismissToast: (id) => manager.close(id)
+    }),
+    [manager]
+  );
+  return /* @__PURE__ */ jsx49(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs34(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    toast && createPortal(
-      /* @__PURE__ */ jsx49("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx49(
-        Toast,
-        {
-          className: "pointer-events-auto",
-          label: toast.label,
-          type: toast.type ?? "neutral",
-          leadingIcon: toast.leadingIcon ?? true,
-          actionLabel: toast.actionLabel,
-          onAction: toast.onAction ? () => {
-            toast.onAction?.();
-            dismissToast();
-          } : void 0
-        }
-      ) }),
-      document.body
-    )
-  ] });
+    /* @__PURE__ */ jsx49(BaseToast.Portal, { children: /* @__PURE__ */ jsx49(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx49(ToastList, {}) }) })
+  ] }) });
+}
+function ToastList() {
+  const { toasts, close } = BaseToast.useToastManager();
+  return toasts.map((toast) => {
+    const type = toast.type ?? "neutral";
+    const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
+    return /* @__PURE__ */ jsxs34(
+      BaseToast.Root,
+      {
+        toast,
+        swipeDirection: ["left", "down"],
+        className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
+        children: [
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx49(BaseToast.Title, { render: /* @__PURE__ */ jsx49("span", {}), className: LABEL_CLASSES })
+          ] }),
+          actionLabel && /* @__PURE__ */ jsx49(
+            BaseToast.Action,
+            {
+              onClick: () => {
+                onAction?.();
+                close(toast.id);
+              },
+              className: actionClassName(type),
+              children: /* @__PURE__ */ jsx49("span", { className: ACTION_LABEL_CLASSES, children: actionLabel })
+            }
+          )
+        ]
+      },
+      toast.id
+    );
+  });
 }
 function useToast() {
   const ctx = useContext2(ToastContext);