@estiva-app/ui 0.39.0 → 0.40.0

package/dist/index.js

@@ -1955,19 +1955,158 @@ function InlineChip({ tone = "neutral", icon, href, className, children, ...prop
   return /* @__PURE__ */ jsx27("a", { href, className: classes, ...props, children: body });
 }
 
+// src/RichText.tsx
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var RICH_TEXT_CLASSES = {
+  base: "flex flex-col gap-1 break-words text-text-secondary",
+  /* A heading binds to what follows it: 12px above (8 and the 4px gap), 8px below (4 and the gap); two headings in a row, 12px apart. Level 3 keeps the text's colour, one step lower. */
+  headings: "[&>:is(h1,h2,h3)]:mb-1 [&>:is(h1,h2,h3)]:mt-2 [&>:is(h1,h2,h3):first-child]:mt-0 [&>:is(h1,h2,h3):last-child]:mb-0 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2)]:text-text-primary",
+  lists: "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-muted [&_ol]:list-decimal [&_ul]:list-disc",
+  // eslint-disable-next-line token-spacing/no-restricted-classes -- @estiva-escape: the quote line is Peek's, 3px, between the ramp's 2 and 4
+  quote: "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-border-strong [&_blockquote]:pl-2.5",
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.9 of the text around it, so it scales with a heading and with `small`; a named size is fixed
+  code: "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_code]:text-text-primary",
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.9 of the text around it; the code inside the block is the block's own size, not 0.9 of it again
+  codeBlock: "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:p-2 [&_pre]:font-mono [&_pre]:text-[0.9em] [&_pre]:text-text-primary",
+  divider: "[&_hr]:border-border-default",
+  table: "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
+  marks: "[&_em]:italic [&_strong]:font-semibold [&_u]:underline [&_u]:underline-offset-2",
+  default: "text-body-2 [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
+  small: "text-caption leading-snug [&>:is(h2,h3)]:text-caption [&>:is(h2,h3)]:font-semibold [&>h1]:text-body-2 [&>h1]:font-semibold"
+};
+function richTextClassName(size = "default", className) {
+  const { base, headings, lists, quote, code, codeBlock, divider, table, marks } = RICH_TEXT_CLASSES;
+  return cn(base, headings, lists, quote, code, codeBlock, divider, table, marks, RICH_TEXT_CLASSES[size], className);
+}
+var LINK_SPLIT = /(\[[^[\]\n]+\]\((?:https?:\/\/|mailto:)[^\s)]+\)|https?:\/\/[^\s]+)/g;
+var WRITTEN_LINK = /^\[([^[\]\n]+)\]\(((?:https?:\/\/|mailto:)[^\s)]+)\)$/;
+var BARE_LINK = /^(https?:\/\/\S+?)([.,;:!?)\]]*)$/;
+var keepToLink = (event) => event.stopPropagation();
+function textWithLinks(text, renderText) {
+  const parts = text.split(LINK_SPLIT);
+  if (parts.length === 1) return renderText(text);
+  return parts.map((part, i) => {
+    const written = part.match(WRITTEN_LINK);
+    if (written) {
+      return /* @__PURE__ */ jsx28("span", { className: "break-words", children: /* @__PURE__ */ jsx28(Link, { href: written[2], external: true, onClick: keepToLink, children: written[1] }) }, i);
+    }
+    const bare = i % 2 === 1 ? part.match(BARE_LINK) : null;
+    if (bare) {
+      return (
+        // An address has no spaces to wrap at, so it may break anywhere.
+        /* @__PURE__ */ jsxs20("span", { className: "break-all", children: [
+          /* @__PURE__ */ jsx28(Link, { href: bare[1], external: true, onClick: keepToLink, children: bare[1] }),
+          bare[2]
+        ] }, i)
+      );
+    }
+    return part ? /* @__PURE__ */ jsx28("span", { children: renderText(part) }, i) : null;
+  });
+}
+function Runs({ runs, draw }) {
+  return /* @__PURE__ */ jsx28(Fragment6, { children: (runs ?? []).map((run, i) => {
+    if (run.reference) return /* @__PURE__ */ jsx28("span", { children: draw.renderReference(run.reference, run) }, i);
+    if (run.marks.includes("code")) {
+      return /* @__PURE__ */ jsx28("code", { children: run.text }, i);
+    }
+    let node = run.text.split("\n").map((line, j) => /* @__PURE__ */ jsxs20("span", { children: [
+      j > 0 && /* @__PURE__ */ jsx28("br", {}),
+      textWithLinks(line, draw.renderText)
+    ] }, j));
+    if (run.marks.includes("underline")) node = /* @__PURE__ */ jsx28("u", { children: node });
+    if (run.marks.includes("italic")) node = /* @__PURE__ */ jsx28("em", { children: node });
+    if (run.marks.includes("bold")) node = /* @__PURE__ */ jsx28("strong", { children: node });
+    return /* @__PURE__ */ jsx28("span", { children: node }, i);
+  }) });
+}
+var named = (block) => block.typeName ?? block.type;
+function Table({ block, draw }) {
+  const rows = (block.children ?? []).filter((row) => named(row) === "tableRow");
+  if (!rows.length) return null;
+  const cells = (row) => (row.children ?? []).map((cell, i) => {
+    const header = named(cell) === "tableHeader";
+    const Cell = header ? "th" : "td";
+    const { colspan, rowspan } = cell.attrs ?? {};
+    return /* @__PURE__ */ jsxs20(
+      Cell,
+      {
+        "data-block-id": cell.id,
+        colSpan: colspan && colspan > 1 ? colspan : void 0,
+        rowSpan: rowspan && rowspan > 1 ? rowspan : void 0,
+        children: [
+          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx28(Runs, { runs: child.inline, draw }, j)),
+          /* @__PURE__ */ jsx28(Runs, { runs: cell.inline, draw })
+        ]
+      },
+      cell.id ?? i
+    );
+  });
+  const first = rows[0].children ?? [];
+  const headerRow = first.length > 0 && first.every((cell) => named(cell) === "tableHeader");
+  return /* @__PURE__ */ jsxs20("table", { "data-block-id": block.id, children: [
+    headerRow && /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsx28("tr", { "data-block-id": rows[0].id, children: cells(rows[0]) }) }),
+    /* @__PURE__ */ jsx28("tbody", { children: (headerRow ? rows.slice(1) : rows).map((row, i) => /* @__PURE__ */ jsx28("tr", { "data-block-id": row.id, children: cells(row) }, row.id ?? i)) })
+  ] });
+}
+function Block({ block, draw }) {
+  const own = draw.renderBlock?.(block);
+  if (own !== void 0) return own;
+  const runs = /* @__PURE__ */ jsx28(Runs, { runs: block.inline, draw });
+  switch (block.type) {
+    case "heading": {
+      if (block.level === 1) return /* @__PURE__ */ jsx28("h1", { "data-block-id": block.id, children: runs });
+      if (block.level === 3) return /* @__PURE__ */ jsx28("h3", { "data-block-id": block.id, children: runs });
+      return /* @__PURE__ */ jsx28("h2", { "data-block-id": block.id, children: runs });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ jsx28("p", { "data-block-id": block.id, children: runs });
+    case "bulletList":
+    case "orderedList": {
+      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx28("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx28(Runs, { runs: item.inline, draw }) }, item.id ?? i));
+      return block.type === "bulletList" ? /* @__PURE__ */ jsx28("ul", { "data-block-id": block.id, children: items }) : /* @__PURE__ */ jsx28("ol", { "data-block-id": block.id, start: block.start, children: items });
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx28("blockquote", { "data-block-id": block.id, children: runs });
+    case "codeBlock":
+      return /* @__PURE__ */ jsx28("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx28("code", { children: (block.inline ?? []).map((run) => run.text).join("") }) });
+    case "horizontalRule":
+      return /* @__PURE__ */ jsx28("hr", { "data-block-id": block.id });
+    case "table": {
+      const table = /* @__PURE__ */ jsx28(Table, { block, draw });
+      if ((block.children ?? []).some((row) => named(row) === "tableRow")) return table;
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs20("div", { "data-block-id": block.id, "data-block-type": named(block), children: [
+    runs,
+    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx28(Block, { block: child, draw }, child.id ?? i))
+  ] });
+}
+function RichText({
+  blocks,
+  size = "default",
+  renderText = (text) => text,
+  renderReference = (_reference, run) => run.text,
+  renderBlock
+}) {
+  if (blocks.length === 0) return null;
+  const draw = { renderText, renderReference, renderBlock };
+  return /* @__PURE__ */ jsx28("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx28(Block, { block, draw }, block.id ?? i)) });
+}
+
 // src/IdentityMenu.tsx
 import { useCallback, useRef as useRef5 } from "react";
 
 // src/Person.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } 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__ */ jsxs20("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx28(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx28("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    /* @__PURE__ */ jsxs21("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx29(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx29("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -1975,10 +2114,10 @@ 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 jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       BaseButton5,
       {
         type: "button",
@@ -1987,13 +2126,13 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         "aria-label": props["aria-label"] ?? name ?? fallback,
         className: cn("cursor-pointer rounded-full", className),
         ...props,
-        children: /* @__PURE__ */ jsx29(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx30(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
   return (
     // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(
       BaseButton5,
       {
         type: "button",
@@ -2011,8 +2150,8 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx29(Person, { name, picture, fallback, size: size ?? 22 }),
-          /* @__PURE__ */ jsx29(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+          /* @__PURE__ */ jsx30(Person, { name, picture, fallback, size: size ?? 22 }),
+          /* @__PURE__ */ jsx30(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
         ]
       }
     )
@@ -2020,10 +2159,10 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx30(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx30(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx31(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx31(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -2031,36 +2170,36 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsxs22(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx30(MenuRow, { children: /* @__PURE__ */ jsx30("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx30(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
-      /* @__PURE__ */ jsx30(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__ */ jsxs22(Note, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    /* @__PURE__ */ jsxs23(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx31(MenuRow, { children: /* @__PURE__ */ jsx31("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx31(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
+      /* @__PURE__ */ jsx31(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__ */ jsxs23(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs22(Fragment6, { children: [
-      /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs22(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx30(MenuRow, { children: /* @__PURE__ */ jsx30("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx30(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+    relayUrl && /* @__PURE__ */ jsxs23(Fragment7, { children: [
+      /* @__PURE__ */ jsx31(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs23(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx31(MenuRow, { children: /* @__PURE__ */ jsx31("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx31(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs22(Fragment6, { children: [
-      /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs23(Fragment7, { children: [
+      /* @__PURE__ */ jsx31(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx30(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx31(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx31(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx30(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx30(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx31(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx31(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
@@ -2071,13 +2210,13 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
        to be `relative`, because the panel was positioned against it; the panel
        hangs from the trigger and portals now, so a positioning context here
        would only be a lie about what this box does. */
-    /* @__PURE__ */ jsx30("div", { className, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("div", { className, children: /* @__PURE__ */ jsx31(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx30(
+        trigger: /* @__PURE__ */ jsx31(
           PersonTrigger,
           {
             name: me.name,
@@ -2088,7 +2227,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(
           IdentityRows,
           {
             me,
@@ -2106,14 +2245,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx30("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx31("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/FilePicker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "input",
     {
       ref,
@@ -2134,7 +2273,7 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
 // 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 jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, disabledReason, className, ...aria }) {
@@ -2142,7 +2281,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
   const held = Boolean(disabledReason);
   const trigger = (
     // @estiva-escape(no-copied-look): N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs24(
       BaseSelect.Trigger,
       {
         "aria-label": ariaLabel,
@@ -2172,21 +2311,21 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs23("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx32("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx32(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+          /* @__PURE__ */ jsxs24("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+            selected?.leading && /* @__PURE__ */ jsx33("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx33(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             BaseSelect.Icon,
             {
-              render: /* @__PURE__ */ jsx32(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+              render: /* @__PURE__ */ jsx33(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
             }
           )
         ]
       }
     )
   );
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     BaseSelect.Root,
     {
       value,
@@ -2198,8 +2337,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled: disabled && !held,
       modal: false,
       children: [
-        held ? /* @__PURE__ */ jsx32(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
-        /* @__PURE__ */ jsx32(BaseSelect.Portal, { children: /* @__PURE__ */ jsx32(
+        held ? /* @__PURE__ */ jsx33(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
+        /* @__PURE__ */ jsx33(BaseSelect.Portal, { children: /* @__PURE__ */ jsx33(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -2208,25 +2347,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx33(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx32(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx33(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx32(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs23(
+                children: /* @__PURE__ */ jsx33(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs24(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
-                      /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx32("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx32(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
+                      /* @__PURE__ */ jsxs24("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx33("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx33(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx32(
+                      /* @__PURE__ */ jsx33(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx32(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx33(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -2245,9 +2384,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Input } from "@base-ui/react/input";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TextInput = forwardRef2(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Input,
     {
       ref,
@@ -2273,13 +2412,13 @@ var TextInput = forwardRef2(function TextInput2({ className, type = "text", size
 // src/Textarea.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { Field as BaseField3 } from "@base-ui/react/field";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     BaseField3.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx34("textarea", {}),
+      render: /* @__PURE__ */ jsx35("textarea", {}),
       className: cn(
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
@@ -2308,33 +2447,33 @@ import { IconX as IconX5 } from "@tabler/icons-react";
 
 // src/ContainerHeader.tsx
 import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function ContainerHeader({ title, chevron = false, actions, className }) {
   const text = typeof title === "string";
-  return /* @__PURE__ */ jsxs24("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
-    /* @__PURE__ */ jsx35("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-      text ? /* @__PURE__ */ jsx35("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx35("div", { className: "min-w-0 flex-1", children: title }),
-      chevron && /* @__PURE__ */ jsx35(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+  return /* @__PURE__ */ jsxs25("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
+    /* @__PURE__ */ jsx36("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs25("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+      text ? /* @__PURE__ */ jsx36("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx36("div", { className: "min-w-0 flex-1", children: title }),
+      chevron && /* @__PURE__ */ jsx36(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
     ] }) }),
-    actions && /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+    actions && /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
   ] });
 }
 
 // src/DialogShell.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog3;
   const popupRef = useRef6(null);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Parts.Root,
     {
       open: true,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs25(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx36(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx36("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx37(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx37("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs26(
           Parts.Popup,
           {
             ref: popupRef,
@@ -2343,10 +2482,10 @@ 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__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 ContainerHeader,
                 {
-                  title: headerContent ?? /* @__PURE__ */ jsx36(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx36("span", {}), children: title }),
+                  title: headerContent ?? /* @__PURE__ */ jsx37(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx37("span", {}), children: title }),
                   actions: (
                     /*
                                     The ✕ IS the `Close` part now, rather than a button that calls
@@ -2360,10 +2499,10 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                                     so the ✕, Escape and the outside press are one path with one
                                     reason attached, instead of one of the three going around.
                                   */
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       Parts.Close,
                       {
-                        render: /* @__PURE__ */ jsx36(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx36(IconX5, { size: 16, stroke: 1.5 }) })
+                        render: /* @__PURE__ */ jsx37(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx37(IconX5, { size: 16, stroke: 1.5 }) })
                       }
                     )
                   )
@@ -2371,9 +2510,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
               ),
               bodyMaxHeight ? (
                 // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
-                /* @__PURE__ */ jsx36("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx36(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
-              ) : /* @__PURE__ */ jsx36("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx36("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+                /* @__PURE__ */ jsx37("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx37(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
+              ) : /* @__PURE__ */ jsx37("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx37("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -2383,7 +2522,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState4(false);
   const confirm = async () => {
@@ -2395,17 +2534,17 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
-      footer: /* @__PURE__ */ jsxs26(Fragment7, { children: [
-        /* @__PURE__ */ jsx37(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx37(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs27(Fragment8, { children: [
+        /* @__PURE__ */ jsx38(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx38(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
+      children: /* @__PURE__ */ jsx38("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
@@ -2414,7 +2553,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 import { useEffect as useEffect3, useRef as useRef7, useState as useState5 } from "react";
 import { Field as BaseField4 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } 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);
@@ -2472,7 +2611,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         written and never read. Read-only, this is a line of text: whatever
         names the region around it (a `Field`, a `Property`) names this too.
       */
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -2482,11 +2621,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx38(
+    return multiline ? /* @__PURE__ */ jsx39(
       BaseField4.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx38("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx39("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -2495,7 +2634,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx38(
+    ) : /* @__PURE__ */ jsx39(
       Input2,
       {
         ref: fieldRef,
@@ -2509,7 +2648,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "button",
     {
       type: "button",
@@ -2529,7 +2668,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 // src/ErrorBoundary.tsx
 import { Component } from "react";
 import { IconAlertTriangle as IconAlertTriangle2 } from "@tabler/icons-react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -2540,22 +2679,22 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (!this.state.hasError) return this.props.children;
-    const message = /* @__PURE__ */ jsx39(
+    const message = /* @__PURE__ */ jsx40(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx39(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
+        icon: /* @__PURE__ */ jsx40(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
         message: `Something went wrong${this.props.label ? ` in the ${this.props.label}` : ""}. Your data is safe \u2014 try again.`,
         action: { label: "Try again", onClick: () => this.setState({ hasError: false }) }
       }
     );
     if (this.props.frame) return this.props.frame(message);
-    return this.props.fallbackClassName ? /* @__PURE__ */ jsx39("div", { className: this.props.fallbackClassName, children: message }) : message;
+    return this.props.fallbackClassName ? /* @__PURE__ */ jsx40("div", { className: this.props.fallbackClassName, children: message }) : message;
   }
 };
 
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var TRACK_CLASSES = {
   default: "h-1.5 w-full overflow-hidden rounded-full bg-bg-inset",
   // 4px, Katerina's ruling of 14 September; Peek's own bar is 3px until it takes this one.
@@ -2568,13 +2707,13 @@ var INDICATOR_CLASSES = {
 function ProgressBar({ value, max, label, variant = "default", className }) {
   return (
     // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
-    /* @__PURE__ */ jsx40(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx40(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx40(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx41(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx41(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx41(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment8, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef8(null);
   const labelRefs = useRef8([]);
@@ -2594,7 +2733,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx41("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) => {
+  return /* @__PURE__ */ jsx42("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(
@@ -2615,27 +2754,27 @@ function Breadcrumb({ items, className }) {
       // on a box around it, which the link takes them from, rather than
       // pushed into it (UIG-9); the link is still the one element that
       // truncates and is measured.
-      /* @__PURE__ */ jsx41("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx41(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx41("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-      index > 0 && /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      /* @__PURE__ */ jsx42("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx42(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx42("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs28(Fragment9, { children: [
+      index > 0 && /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       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__ */ jsx41(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx42(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29(
       "a",
       {
         href,
@@ -2650,9 +2789,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx42("span", { className: "flex shrink-0 items-center", children: icon }),
-          /* @__PURE__ */ jsx42("span", { className: "flex-1 truncate", children: label }),
-          count ? /* @__PURE__ */ jsx42(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx42("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+          icon && /* @__PURE__ */ jsx43("span", { className: "flex shrink-0 items-center", children: icon }),
+          /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children: label }),
+          count ? /* @__PURE__ */ jsx43(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx43("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
         ]
       }
     )
@@ -2662,7 +2801,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
 // src/Popover.tsx
 import { useMemo as useMemo3 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } 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 }) {
@@ -2671,7 +2810,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     BasePopover.Root,
     {
       open,
@@ -2679,8 +2818,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx43(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx43(BasePopover.Portal, { children: /* @__PURE__ */ jsx43(
+        trigger && /* @__PURE__ */ jsx44(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx44(BasePopover.Portal, { children: /* @__PURE__ */ jsx44(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -2689,20 +2828,20 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD5,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx44(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx43(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx43(
+                render: /* @__PURE__ */ jsx44(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx44(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx43(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx44(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -2716,9 +2855,9 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx44(
+  const strip = /* @__PURE__ */ jsx45(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -2729,27 +2868,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx44(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx45(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx44(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx45(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx44(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx44(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx45(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx45(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx44(BaseToolbar.Input, { render: /* @__PURE__ */ jsx44(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx45(BaseToolbar.Input, { render: /* @__PURE__ */ jsx45(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -2759,9 +2898,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx45(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx46(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
     /*
               A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
               would become the toolbar's item and the button inside it would never
@@ -2771,14 +2910,14 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
               The tooltip names it for a pointer, `aria-label` for everything else,
               and both say the meaning rather than the glyph.
             */
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2787,23 +2926,23 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
 
 // src/PreviewCard.tsx
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } 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, contentClassName, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs30(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs31(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx47(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx46("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx47("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx46(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx47(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2811,12 +2950,12 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         sideOffset: GAP6,
         collisionPadding: VIEWPORT_PAD6,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx46(
+        children: /* @__PURE__ */ jsx47(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx46(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx46(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx47(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx47(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2825,15 +2964,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx47("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__ */ jsx48("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 jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "a",
     {
       href,
@@ -2841,14 +2980,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           "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__ */ jsx48(
+            children: /* @__PURE__ */ jsx49(
               "span",
               {
                 className: cn(
@@ -2860,14 +2999,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx48("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx49("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -2875,25 +3014,25 @@ function Property({ label, layout = "row", children, className }) {
       // 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__ */ jsxs32("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx49("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx49("dd", { className: VALUE_CLASSES, children })
+      /* @__PURE__ */ jsxs33("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx50("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx50("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs32("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx49("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx49("dd", { className: VALUE_CLASSES, children })
+  return /* @__PURE__ */ jsxs33("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx50("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx50("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
-    /* @__PURE__ */ jsxs33(
+    /* @__PURE__ */ jsxs34(
       Toggle,
       {
         pressed,
@@ -2915,8 +3054,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-          /* @__PURE__ */ jsx50("span", { className: CHIP_TEXT_CLASSES, children: count })
+          /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx51("span", { className: CHIP_TEXT_CLASSES, children: count })
         ]
       }
     )
@@ -2926,9 +3065,9 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: cn(
@@ -2940,7 +3079,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           Input3,
           {
             className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
@@ -2948,7 +3087,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx51(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx52(Kbd, { children: shortcut })
       ]
     }
   );
@@ -2957,17 +3096,17 @@ 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 Fragment9, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", render, className }) {
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx52("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx52("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx53("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx53("span", {})),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // 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__ */ jsxs35(Fragment9, { children: [
-        chevron && /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsxs36(Fragment10, { children: [
+        chevron && /* @__PURE__ */ jsx53(
           IconChevronRight2,
           {
             size: 12,
@@ -2975,11 +3114,11 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx52(SectionLabel, { children: title })
+        /* @__PURE__ */ jsx53(SectionLabel, { children: title })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       className: cn(
@@ -2992,15 +3131,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx52(
+        trailing != null && /* @__PURE__ */ jsx53("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx53(
           "div",
           {
             className: cn(
               "-mr-1 flex shrink-0 items-center gap-1",
               showActions === "hover" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
             ),
-            children: actions.map((action) => /* @__PURE__ */ jsx52(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx53(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -3009,35 +3148,35 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/Panel.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
-  return /* @__PURE__ */ jsxs36("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
-    /* @__PURE__ */ jsx53(ContainerHeader, { title, chevron, actions }),
+  return /* @__PURE__ */ jsxs37("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
+    /* @__PURE__ */ jsx54(ContainerHeader, { title, chevron, actions }),
     broken ? (
       // The message takes the room the body had and centres itself in it.
-      /* @__PURE__ */ jsx53("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
-    ) : /* @__PURE__ */ jsx53(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
-    !broken && footer && /* @__PURE__ */ jsx53("div", { className: "shrink-0", children: footer })
+      /* @__PURE__ */ jsx54("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
+    ) : /* @__PURE__ */ jsx54(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
+    !broken && footer && /* @__PURE__ */ jsx54("div", { className: "shrink-0", children: footer })
   ] });
 }
 function Panel(props) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     ErrorBoundary,
     {
       label: "panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the footer may be what threw.
-        /* @__PURE__ */ jsx53(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx54(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx53(Frame, { ...props })
+      children: /* @__PURE__ */ jsx54(Frame, { ...props })
     }
   );
 }
 
 // src/ListColumn.tsx
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: cn(
@@ -3048,26 +3187,26 @@ function Column({ title, chevron = false, actions, above, collapsed = false, chi
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx54(ContainerHeader, { title, chevron, actions }),
+        /* @__PURE__ */ jsx55(ContainerHeader, { title, chevron, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).
-          /* @__PURE__ */ jsx54("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
-        ) : /* @__PURE__ */ jsx54(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+          /* @__PURE__ */ jsx55("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx55(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
       ]
     }
   );
 }
 function ListColumn(props) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     ErrorBoundary,
     {
       label: "list panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the row above may be what threw.
-        /* @__PURE__ */ jsx54(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx55(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx54(Column, { ...props })
+      children: /* @__PURE__ */ jsx55(Column, { ...props })
     }
   );
 }
@@ -3075,7 +3214,7 @@ function ListColumn(props) {
 // src/CollapsibleSection.tsx
 import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -3102,14 +3241,14 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs38(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx55(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx55(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs39(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx56(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx56(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx56(
       Collapsible.Panel,
       {
         hiddenUntilFound: true,
         className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
-        children: /* @__PURE__ */ jsx55("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx56("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -3117,9 +3256,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     BaseTabs.Root,
     {
       value: active,
@@ -3127,14 +3266,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx56(
+      children: /* @__PURE__ */ jsx57(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs39(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs40(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -3147,9 +3286,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs39("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs40("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx56("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx57("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -3165,7 +3304,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 import { createContext as createContext6, useContext as useContext6, useMemo as useMemo4 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
@@ -3201,16 +3340,16 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx57(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx58(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
 }
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs40("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx57(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx57("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs41("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx58(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx58("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx57(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx58(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext6(null);
@@ -3231,9 +3370,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx57(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs40(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx58(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs41(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx57(BaseToast.Portal, { children: /* @__PURE__ */ jsx57(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx57(ToastList, {}) }) })
+    /* @__PURE__ */ jsx58(BaseToast.Portal, { children: /* @__PURE__ */ jsx58(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx58(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -3241,25 +3380,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs41(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx57(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx57(BaseToast.Title, { render: /* @__PURE__ */ jsx57("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx58(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx58(BaseToast.Title, { render: /* @__PURE__ */ jsx58("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx57(
+          actionLabel && /* @__PURE__ */ jsx58(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx57(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx58(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3334,6 +3473,7 @@ export {
   RailItem,
   Reaction,
   ReactionPicker,
+  RichText,
   ScrollArea,
   SearchInput,
   SectionHeader,
@@ -3361,6 +3501,7 @@ export {
   hueFor,
   initialsFor,
   inlineChipClassName,
+  richTextClassName,
   useToast
 };
 //# sourceMappingURL=index.js.map