@estiva-app/ui 0.62.1 → 0.64.0

package/dist/index.js

@@ -71,7 +71,7 @@ function cn(...inputs) {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var COVER_CLASSES = "after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:[outline-style:auto]";
 var VARIANT_CLASSES = {
-  text: "text-info-default underline underline-offset-2 hover:opacity-80",
+  text: "text-text-interactive underline underline-offset-2 hover:opacity-80",
   quiet: "hover:underline",
   underlined: "underline underline-offset-2 hover:text-text-primary",
   plain: ""
@@ -2421,28 +2421,52 @@ function InlineChip({ tone = "neutral", icon, href, className, children, ...prop
   return /* @__PURE__ */ jsx33("a", { href, className: classes, ...props, onClick: inApp, children: body });
 }
 
+// src/codeColours.ts
+import { createElement } from "react";
+import { common, createLowlight } from "lowlight";
+var lowlight = createLowlight(common);
+function draw(node, key) {
+  if (node.type === "text") return node.value;
+  return createElement("span", { key, className: node.properties?.className?.join(" ") }, (node.children ?? []).map(draw));
+}
+function codeColours(text, language) {
+  if (!language || !lowlight.registered(language)) return text;
+  return lowlight.highlight(language, text).children.map(draw);
+}
+
 // src/RichText.tsx
 import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } 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",
+  /* Blocks 8px apart (Katerina, 9 October; 4 before). A list's own items stay together. */
+  base: "flex flex-col gap-2 break-words text-text-secondary",
+  /* A heading binds to what follows it: 12px above (4 and the 8px gap), 8px below (the gap); two headings in a row, 12px apart. The same as before the gap grew (Katerina, 9 October: headings do not change). Level 3 keeps the text's colour, one step lower: at the same size as level 2, colour is what tells them apart (Katerina, 9 October). */
+  headings: "[&>:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):first-child]:mt-0 [&>:is(h1,h2)]:text-text-primary",
+  /* Bullets and numbers in the text's own colour, so a number can be read (Katerina, 9 October; they were the muted grey, 2.4 : 1 in Leaf). */
+  lists: "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-secondary [&_ol]:list-decimal [&_ul]:list-disc",
+  /* The line in the muted text grey, not the border grey: a border grey was 1.3 : 1 in Leaf (Katerina, 9 October). */
   // 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",
+  quote: "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5",
+  /* Code in a sentence is amber, its own colour (Katerina, 9 October: option I). */
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 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 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
+  /* 12px either side, 10px above and below, looser lines than the text (Katerina, 9 October; 8px all round before). */
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it; the code inside the block is the block's own size, not 0.85 of it again
+  codeBlock: "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
+  /* Colours inside a code block, by language: the classes `codeColours` gives each word, after highlight.js's own GitHub theme (Katerina, 9 October). */
+  syntax: "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
+  /* A divider splits the text in two: 16px either side (Katerina, 9 October; 4 before). */
+  divider: "[&_hr]:my-2 [&_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"
+  /* Bold in the heading colour, not only heavier. An underlined word draws a faint line, so it does not read as a link (Katerina, 9 October). */
+  marks: "[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2",
+  /* Lines 1.5 apart (Katerina, 9 October; 1.4 before). */
+  default: "text-body-2 leading-normal [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
+  /* Blocks 6px apart; a heading keeps its 12px above and 8px below. */
+  small: "gap-1.5 text-caption leading-snug [&>:is(h1,h2,h3)]:mb-0.5 [&>:is(h1,h2,h3)]:mt-1.5 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):last-child]:mb-0 [&>: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);
+  const { base, headings, lists, quote, code, codeBlock, syntax, divider, table, marks } = RICH_TEXT_CLASSES;
+  return cn(base, headings, lists, quote, code, codeBlock, syntax, 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)]+)\)$/;
@@ -2469,15 +2493,15 @@ function textWithLinks(text, renderText) {
     return part ? /* @__PURE__ */ jsx34("span", { children: renderText(part) }, i) : null;
   });
 }
-function Runs({ runs, draw }) {
+function Runs({ runs, draw: draw2 }) {
   return /* @__PURE__ */ jsx34(Fragment8, { children: (runs ?? []).map((run, i) => {
-    if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw.renderReference(run.reference, run) }, i);
+    if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw2.renderReference(run.reference, run) }, i);
     if (run.marks.includes("code")) {
       return /* @__PURE__ */ jsx34("code", { children: run.text }, i);
     }
     let node = run.text.split("\n").map((line, j) => /* @__PURE__ */ jsxs25("span", { children: [
       j > 0 && /* @__PURE__ */ jsx34("br", {}),
-      textWithLinks(line, draw.renderText)
+      textWithLinks(line, draw2.renderText)
     ] }, j));
     if (run.marks.includes("underline")) node = /* @__PURE__ */ jsx34("u", { children: node });
     if (run.marks.includes("italic")) node = /* @__PURE__ */ jsx34("em", { children: node });
@@ -2486,7 +2510,7 @@ function Runs({ runs, draw }) {
   }) });
 }
 var named = (block) => block.typeName ?? block.type;
-function Table({ block, draw }) {
+function Table({ block, draw: draw2 }) {
   const rows = (block.children ?? []).filter((row) => named(row) === "tableRow");
   if (!rows.length) return null;
   const cells = (row) => (row.children ?? []).map((cell, i) => {
@@ -2500,8 +2524,8 @@ function Table({ block, draw }) {
         colSpan: colspan && colspan > 1 ? colspan : void 0,
         rowSpan: rowspan && rowspan > 1 ? rowspan : void 0,
         children: [
-          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw }, j)),
-          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw })
+          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw: draw2 }, j)),
+          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw: draw2 })
         ]
       },
       cell.id ?? i
@@ -2514,10 +2538,10 @@ function Table({ block, draw }) {
     /* @__PURE__ */ jsx34("tbody", { children: (headerRow ? rows.slice(1) : rows).map((row, i) => /* @__PURE__ */ jsx34("tr", { "data-block-id": row.id, children: cells(row) }, row.id ?? i)) })
   ] });
 }
-function Block({ block, draw }) {
-  const own = draw.renderBlock?.(block);
+function Block({ block, draw: draw2 }) {
+  const own = draw2.renderBlock?.(block);
   if (own !== void 0) return own;
-  const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw });
+  const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw: draw2 });
   switch (block.type) {
     case "heading": {
       if (block.level === 1) return /* @__PURE__ */ jsx34("h1", { "data-block-id": block.id, children: runs });
@@ -2528,24 +2552,24 @@ function Block({ block, draw }) {
       return /* @__PURE__ */ jsx34("p", { "data-block-id": block.id, children: runs });
     case "bulletList":
     case "orderedList": {
-      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx34("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw }) }, item.id ?? i));
+      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx34("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw: draw2 }) }, item.id ?? i));
       return block.type === "bulletList" ? /* @__PURE__ */ jsx34("ul", { "data-block-id": block.id, children: items }) : /* @__PURE__ */ jsx34("ol", { "data-block-id": block.id, start: block.start, children: items });
     }
     case "blockquote":
       return /* @__PURE__ */ jsx34("blockquote", { "data-block-id": block.id, children: runs });
     case "codeBlock":
-      return /* @__PURE__ */ jsx34("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx34("code", { children: (block.inline ?? []).map((run) => run.text).join("") }) });
+      return /* @__PURE__ */ jsx34("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx34("code", { children: codeColours((block.inline ?? []).map((run) => run.text).join(""), block.language) }) });
     case "horizontalRule":
       return /* @__PURE__ */ jsx34("hr", { "data-block-id": block.id });
     case "table": {
-      const table = /* @__PURE__ */ jsx34(Table, { block, draw });
+      const table = /* @__PURE__ */ jsx34(Table, { block, draw: draw2 });
       if ((block.children ?? []).some((row) => named(row) === "tableRow")) return table;
       break;
     }
   }
   return /* @__PURE__ */ jsxs25("div", { "data-block-id": block.id, "data-block-type": named(block), children: [
     runs,
-    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx34(Block, { block: child, draw }, child.id ?? i))
+    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx34(Block, { block: child, draw: draw2 }, child.id ?? i))
   ] });
 }
 function RichText({
@@ -2556,23 +2580,51 @@ function RichText({
   renderBlock
 }) {
   if (blocks.length === 0) return null;
-  const draw = { renderText, renderReference, renderBlock };
-  return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw }, block.id ?? i)) });
+  const draw2 = { renderText, renderReference, renderBlock };
+  return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw: draw2 }, block.id ?? i)) });
+}
+
+// src/KindIcon.tsx
+import { IconBox, IconCircleDashed, IconFile as IconFile2, IconListDetails, IconMessage } from "@tabler/icons-react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var ICONS = {
+  topic: IconCircleDashed,
+  project: IconBox,
+  issue: IconListDetails,
+  file: IconFile2,
+  message: IconMessage
+};
+var KIND_MESSAGE = 9;
+var KIND_CHANNEL = 39e3;
+var KIND_BARE_FILE = 30840;
+var KIND_PROJECT = 30850;
+var KIND_ISSUE = 30851;
+function thingKindOf(eventKind) {
+  if (eventKind === KIND_MESSAGE) return "message";
+  if (eventKind === KIND_CHANNEL || eventKind === KIND_BARE_FILE) return "topic";
+  if (eventKind === KIND_PROJECT) return "project";
+  if (eventKind === KIND_ISSUE) return "issue";
+  return "file";
+}
+var TONE_CLASSES = { secondary: "text-text-secondary", inherit: "" };
+function KindIcon({ kind, size = 16, tone = "secondary", className }) {
+  const Icon = ICONS[kind];
+  return /* @__PURE__ */ jsx35(Icon, { size, stroke: 1.5, className: cn("shrink-0", TONE_CLASSES[tone], className), "aria-hidden": true });
 }
 
 // src/IdentityMenu.tsx
 import { useCallback as useCallback2, useRef as useRef8 } from "react";
 
 // src/Person.tsx
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } 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__ */ jsxs26("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx35(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx35("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+      /* @__PURE__ */ jsx36(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx36("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -2580,10 +2632,10 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
 // src/PersonTrigger.tsx
 import { Button as BaseButton7 } from "@base-ui/react/button";
 import { IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       BaseButton7,
       {
         type: "button",
@@ -2592,7 +2644,7 @@ 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__ */ jsx36(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx37(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
@@ -2616,8 +2668,8 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx36(Person, { name, picture, fallback, size: size ?? 22 }),
-          /* @__PURE__ */ jsx36(IconChevronDown2, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+          /* @__PURE__ */ jsx37(Person, { name, picture, fallback, size: size ?? 22 }),
+          /* @__PURE__ */ jsx37(IconChevronDown2, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
         ]
       }
     )
@@ -2625,10 +2677,10 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx37(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx37(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx38(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx38(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -2638,34 +2690,34 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
   const appRows = typeof children === "function" ? children(onClose) : children;
   return /* @__PURE__ */ jsxs28(Fragment9, { children: [
     /* @__PURE__ */ jsxs28(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx37(MenuRow, { children: /* @__PURE__ */ jsx37("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx37(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
-      /* @__PURE__ */ jsx37(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
+      /* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx38(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
+      /* @__PURE__ */ jsx38(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__ */ jsxs28(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
     relayUrl && /* @__PURE__ */ jsxs28(Fragment9, { children: [
-      /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
       /* @__PURE__ */ jsxs28(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx37(MenuRow, { children: /* @__PURE__ */ jsx37("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx37(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+        /* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx38(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
     appRows && /* @__PURE__ */ jsxs28(Fragment9, { children: [
-      /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx37(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx38(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx37(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx37(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx38(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx38(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
@@ -2676,13 +2728,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__ */ jsx37("div", { className, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className, children: /* @__PURE__ */ jsx38(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx37(
+        trigger: /* @__PURE__ */ jsx38(
           PersonTrigger,
           {
             name: me.name,
@@ -2693,7 +2745,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx38(
           IdentityRows,
           {
             me,
@@ -2711,14 +2763,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx37("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx38("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/FilePicker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "input",
     {
       ref,
@@ -2739,7 +2791,7 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs29 } 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 }) {
@@ -2781,13 +2833,13 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
         ),
         children: [
           /* @__PURE__ */ jsxs29("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx39(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+            selected?.leading && /* @__PURE__ */ jsx40("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx40(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             BaseSelect.Icon,
             {
-              render: /* @__PURE__ */ jsx39(IconChevronDown3, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+              render: /* @__PURE__ */ jsx40(IconChevronDown3, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
             }
           )
         ]
@@ -2806,8 +2858,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled: disabled && !held,
       modal: false,
       children: [
-        held ? /* @__PURE__ */ jsx39(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
-        /* @__PURE__ */ jsx39(BaseSelect.Portal, { children: /* @__PURE__ */ jsx39(
+        held ? /* @__PURE__ */ jsx40(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
+        /* @__PURE__ */ jsx40(BaseSelect.Portal, { children: /* @__PURE__ */ jsx40(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -2816,25 +2868,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx39(
+            children: /* @__PURE__ */ jsx40(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx39(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx40(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx39(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs29(
+                children: /* @__PURE__ */ jsx40(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs29(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
                       /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx39(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
+                        option.leading && /* @__PURE__ */ jsx40("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx40(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx39(
+                      /* @__PURE__ */ jsx40(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx39(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx40(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -2853,9 +2905,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 jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var TextInput = forwardRef2(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Input,
     {
       ref,
@@ -2881,13 +2933,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 jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     BaseField3.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx41("textarea", {}),
+      render: /* @__PURE__ */ jsx42("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
@@ -2907,7 +2959,7 @@ var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
 
 // src/ConfirmDialog.tsx
 import { useState as useState6 } from "react";
-import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState6(false);
   const confirm = async () => {
@@ -2919,17 +2971,17 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
       footer: /* @__PURE__ */ jsxs30(Fragment10, { children: [
-        /* @__PURE__ */ jsx42(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx42(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+        /* @__PURE__ */ jsx43(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx43(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
+      children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
@@ -2938,7 +2990,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 import { useEffect as useEffect5, useRef as useRef9, useState as useState7 } from "react";
 import { Field as BaseField4 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
   const [editing, setEditing] = useState7(false);
   const [draft, setDraft] = useState7(value);
@@ -2996,7 +3048,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__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -3006,11 +3058,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx43(
+    return multiline ? /* @__PURE__ */ jsx44(
       BaseField4.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx43("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx44("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -3019,7 +3071,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx43(
+    ) : /* @__PURE__ */ jsx44(
       Input2,
       {
         ref: fieldRef,
@@ -3033,7 +3085,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "button",
     {
       type: "button",
@@ -3053,7 +3105,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 jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -3064,22 +3116,22 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (!this.state.hasError) return this.props.children;
-    const message = /* @__PURE__ */ jsx44(
+    const message = /* @__PURE__ */ jsx45(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx44(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
+        icon: /* @__PURE__ */ jsx45(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__ */ jsx44("div", { className: this.props.fallbackClassName, children: message }) : message;
+    return this.props.fallbackClassName ? /* @__PURE__ */ jsx45("div", { className: this.props.fallbackClassName, children: message }) : message;
   }
 };
 
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } 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.
@@ -3092,13 +3144,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__ */ jsx45(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx45(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx45(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx46(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx46(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx46(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
 import { Fragment as Fragment11, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState8 } from "react";
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef10(null);
   const labelRefs = useRef10([]);
@@ -3118,7 +3170,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx46("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__ */ jsx47("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(
@@ -3139,16 +3191,16 @@ 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__ */ jsx46("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx46(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx46("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+      /* @__PURE__ */ jsx47("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx47(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx47("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
     return /* @__PURE__ */ jsxs31(Fragment11, { children: [
-      index > 0 && /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      index > 0 && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx47("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__ */ jsx46(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx47(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
@@ -3160,13 +3212,13 @@ import { Collapsible } from "@base-ui/react/collapsible";
 import { IconAlertSquareRounded, IconChevronRight as IconChevronRight2, IconDotsVertical } from "@tabler/icons-react";
 
 // src/UnreadDot.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function UnreadDot({ className }) {
-  return /* @__PURE__ */ jsx47("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx47("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
+  return /* @__PURE__ */ jsx48("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx48("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 function NavItem({
   label,
   href,
@@ -3197,7 +3249,7 @@ function NavItem({
     onOpenChange?.(next);
   };
   const besides = menu != null || hasRows;
-  const mark = unread ? urgent ? /* @__PURE__ */ jsx48(UrgentMark, {}) : /* @__PURE__ */ jsx48(UnreadDot, {}) : null;
+  const mark = unread ? urgent ? /* @__PURE__ */ jsx49(UrgentMark, {}) : /* @__PURE__ */ jsx49(UnreadDot, {}) : null;
   const stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
   const row = /* @__PURE__ */ jsxs32(
     "a",
@@ -3221,7 +3273,7 @@ function NavItem({
       ...props,
       onClick: inApp,
       children: [
-        (icon || hasRows) && /* @__PURE__ */ jsx48(
+        (icon || hasRows) && /* @__PURE__ */ jsx49(
           "span",
           {
             className: cn(
@@ -3232,10 +3284,10 @@ function NavItem({
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx48("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
+        /* @__PURE__ */ jsx49("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
         hint != null && // Takes room only while it shows, so the label gives way to it.
-        /* @__PURE__ */ jsx48("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
-        count ? /* @__PURE__ */ jsx48(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
+        count ? /* @__PURE__ */ jsx49(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx49(
           "span",
           {
             className: cn(
@@ -3251,7 +3303,7 @@ function NavItem({
           // `-mr-1`: the 24px slot's dot then sits on the axis of a count and
           // of the ⋮ (8px from the edge to the 16px box), one column with a
           // folder heading's dot and ⋮ (Katerina, 5 October).
-          /* @__PURE__ */ jsx48("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
+          /* @__PURE__ */ jsx49("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
         ) : menu != null && !count ? (
           // Nothing at the right, but a menu: no room is kept at rest, so the
           // label has the row's whole width; while the ⋮ shows, its 24px slot
@@ -3259,7 +3311,7 @@ function NavItem({
           // `-mr-1`: the ⋮ sits at `right-1`, 4px into the row's padding, so the
           // slot does too — at the padding's edge it kept 4px the ⋮ never
           // covers, and the label stopped 12px short of the button, not 8.
-          /* @__PURE__ */ jsx48("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
+          /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
         ) : null
       ]
     }
@@ -3270,7 +3322,7 @@ function NavItem({
     row,
     hasRows && // `left-1`: the 24px button's 16px arrow then sits where the icon
     // sits (the row's px-2), so the icon turns into the arrow in place.
-    /* @__PURE__ */ jsx48("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx49(
       IconButton,
       {
         tooltip: open ? "Collapse" : "Expand",
@@ -3278,7 +3330,7 @@ function NavItem({
         "aria-expanded": open,
         "aria-controls": panelId,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx48(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
+        children: /* @__PURE__ */ jsx49(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
       }
     ) }),
     menu != null && // `right-1`: the 24px button's 16px icon ends 8px from the row's
@@ -3289,11 +3341,11 @@ function NavItem({
     // right of the slot's centre.
     // On a screen with no hover it always shows: nothing there can point
     // at the row, and the menu has no other way in.
-    /* @__PURE__ */ jsx48("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx49(
       Menu,
       {
         align: "right",
-        trigger: /* @__PURE__ */ jsx48(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx48(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
+        trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx49(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
         children: menu
       }
     ) })
@@ -3301,19 +3353,19 @@ function NavItem({
   if (!hasRows) return line;
   return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [
     line,
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49(
       Collapsible.Panel,
       {
         id: panelId,
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
+        children: /* @__PURE__ */ jsx49("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
       }
     )
   ] });
 }
 function UrgentMark() {
-  return /* @__PURE__ */ jsx48("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx48("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx48(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
+  return /* @__PURE__ */ jsx49("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx49("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx49(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
 }
 
 // src/NavTree.tsx
@@ -3326,14 +3378,14 @@ import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight3, IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment12, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, count, actions, menu, menuLabel, showActions = "hover", hover = "fill", look = "heading", render, className }) {
   const row = look === "row";
   const acts = actions && actions.length > 0 || menu != null;
   const trailingClasses = !acts ? "has-[[data-unread]]:-mr-1" : showActions === "hover" && "has-[[data-unread]]:pointer-events-none has-[[data-unread]]:absolute has-[[data-unread]]:inset-y-0 has-[[data-unread]]:right-1 has-[[data-unread]]:w-6 has-[[data-unread]]:justify-center has-[[data-unread]]:transition-opacity group-hover:has-[[data-unread]]:opacity-0 group-has-[:focus-visible]:has-[[data-unread]]:opacity-0 group-has-[[data-section-menu]_[aria-expanded=true]]:has-[[data-unread]]:opacity-0 [@media(hover:none)]:has-[[data-unread]]:opacity-0";
   const reveal = showActions === "hover" && "opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100";
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx49("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx49("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx50("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx50("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
@@ -3342,8 +3394,8 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
       className: cn("flex h-full min-w-0 flex-1 items-center text-left", row || chevron || icon != null ? "gap-2" : "gap-1"),
       children: /* @__PURE__ */ jsxs33(Fragment12, { children: [
         icon != null ? /* @__PURE__ */ jsxs33("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
-          /* @__PURE__ */ jsx49("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
-          chevron && /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
+          chevron && /* @__PURE__ */ jsx50(
             IconChevronRight3,
             {
               size: 16,
@@ -3351,7 +3403,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
               className: cn("absolute opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", isExpanded && "rotate-90")
             }
           )
-        ] }) : chevron && /* @__PURE__ */ jsx49(
+        ] }) : chevron && /* @__PURE__ */ jsx50(
           IconChevronRight3,
           {
             size: 16,
@@ -3359,11 +3411,11 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
             className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
           }
         ),
-        look === "quiet" ? /* @__PURE__ */ jsx49("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
+        look === "quiet" ? /* @__PURE__ */ jsx50("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
           // A row's words: NavItem's size and colour, brightening under the pointer with the row.
-          /* @__PURE__ */ jsx49("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
-        ) : /* @__PURE__ */ jsx49(SectionLabel, { folds: chevron, children: title }),
-        count != null && /* @__PURE__ */ jsx49("span", { className: cn("ml-1 shrink-0", COUNT_TEXT_CLASSES), children: count })
+          /* @__PURE__ */ jsx50("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
+        ) : /* @__PURE__ */ jsx50(SectionLabel, { folds: chevron, children: title }),
+        count != null && /* @__PURE__ */ jsx50("span", { className: cn("ml-1 shrink-0", COUNT_TEXT_CLASSES), children: count })
       ] })
     }
   });
@@ -3388,18 +3440,18 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx49("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
-        acts && /* @__PURE__ */ jsx49(
+        trailing != null && /* @__PURE__ */ jsx50("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
+        acts && /* @__PURE__ */ jsx50(
           "div",
           {
             className: "-mr-1 flex shrink-0 items-center",
             children: /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1", reveal), children: [
-              actions?.map((action) => /* @__PURE__ */ jsx49(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
-              menu != null && /* @__PURE__ */ jsx49("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx49(
+              actions?.map((action) => /* @__PURE__ */ jsx50(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
+              menu != null && /* @__PURE__ */ jsx50("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx50(
                 Menu,
                 {
                   align: "right",
-                  trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx49(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
+                  trigger: /* @__PURE__ */ jsx50(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx50(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
                   children: menu
                 }
               ) })
@@ -3412,7 +3464,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
 }
 
 // src/CollapsibleSection.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -3440,30 +3492,30 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     onOpenChange?.(next);
   };
   return /* @__PURE__ */ jsxs34(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx50(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx50(Collapsible2.Trigger, {}) }),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx51(Collapsible2.Trigger, {}) }),
+    /* @__PURE__ */ jsx51(
       Collapsible2.Panel,
       {
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx50("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
+        children: /* @__PURE__ */ jsx51("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
       }
     )
   ] });
 }
 
 // src/NavTree.tsx
-import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var NAV_TREE_INTENT_MS = 150;
 function holds(nodes, id) {
   return !!nodes && id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? null, id));
 }
 function Line({ message }) {
-  return /* @__PURE__ */ jsx51("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx51(EmptyState, { scope: "section", message }) });
+  return /* @__PURE__ */ jsx52("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx52(EmptyState, { scope: "section", message }) });
 }
 function Row({ node, selected, onSelect }) {
-  const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx51(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx51(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 2 }) : void 0;
-  return /* @__PURE__ */ jsx51(
+  const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx52(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx52(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 2 }) : void 0;
+  return /* @__PURE__ */ jsx52(
     NavItem,
     {
       href: node.href,
@@ -3485,7 +3537,7 @@ function Row({ node, selected, onSelect }) {
   );
 }
 function Group({ group, selected, onSelect, storageKey }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     NavTreeSection,
     {
       id: group.id,
@@ -3501,7 +3553,7 @@ function Group({ group, selected, onSelect, storageKey }) {
       onOpenChange: group.onOpenChange,
       storageKey: storageKey ? `${storageKey}.${group.id}` : void 0,
       onIntent: group.onIntent,
-      children: group.nodes?.map((node) => /* @__PURE__ */ jsx51(Row, { node, selected, onSelect }, node.id))
+      children: group.nodes?.map((node) => /* @__PURE__ */ jsx52(Row, { node, selected, onSelect }, node.id))
     }
   );
 }
@@ -3509,7 +3561,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
   const timer = useRef11(void 0);
   useEffect6(() => () => clearTimeout(timer.current), []);
   const intent = onIntent;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       className: "shrink-0 [&+&]:mt-1",
@@ -3520,7 +3572,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
       } : void 0,
       onPointerLeave: intent ? () => clearTimeout(timer.current) : void 0,
       onFocus: intent,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx52(
         CollapsibleSection,
         {
           title,
@@ -3535,7 +3587,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
           icon,
           className: "shrink-0",
           contentClassName: "gap-0.5",
-          children: message !== void 0 ? /* @__PURE__ */ jsx51(Line, { message }) : loading ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 3 }) : children
+          children: message !== void 0 ? /* @__PURE__ */ jsx52(Line, { message }) : loading ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 3 }) : children
         }
       )
     }
@@ -3543,18 +3595,18 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
 }
 function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = "", storageKey }) {
   return /* @__PURE__ */ jsxs35(Fragment13, { children: [
-    title && /* @__PURE__ */ jsx51(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
-    groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
+    title && /* @__PURE__ */ jsx52(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
+    groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
       // No words, no line: an app that says nothing when it has no groups.
-      emptyMessage ? /* @__PURE__ */ jsx51(Line, { message: emptyMessage }) : null
-    ) : groups.map((group) => /* @__PURE__ */ jsx51(Group, { group, selected, onSelect, storageKey }, group.id))
+      emptyMessage ? /* @__PURE__ */ jsx52(Line, { message: emptyMessage }) : null
+    ) : groups.map((group) => /* @__PURE__ */ jsx52(Group, { group, selected, onSelect, storageKey }, group.id))
   ] });
 }
 
 // src/Popover.tsx
 import { useMemo as useMemo4 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } 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 }) {
@@ -3571,8 +3623,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx52(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx52(BasePopover.Portal, { children: /* @__PURE__ */ jsx52(
+        trigger && /* @__PURE__ */ jsx53(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx53(BasePopover.Portal, { children: /* @__PURE__ */ jsx53(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -3581,20 +3633,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__ */ jsx52(
+            children: /* @__PURE__ */ jsx53(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx52(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx52(
+                render: /* @__PURE__ */ jsx53(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx53(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx52(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx53(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -3608,7 +3660,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 
 // src/SuggestionMenu.tsx
 import { useCallback as useCallback4, useEffect as useEffect7, useId as useId3, useImperativeHandle, useMemo as useMemo5, useRef as useRef12, useState as useState11 } from "react";
-import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sections, itemKey, row, onSelect, handle }) {
   const shown = useMemo5(() => sections.filter((section) => section.items.length > 0), [sections]);
   const items = useMemo5(() => shown.flatMap((section) => section.items), [shown]);
@@ -3673,7 +3725,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
     const { label, description, leading, shortcut, hint, size } = row(item);
     return (
       // A row of a list the editor drives from its caret: focus stays in the text, so the row is no Tab stop.
-      /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsx54(
         MenuItem,
         {
           role: "option",
@@ -3700,9 +3752,9 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
   };
   return (
     // finalFocus={false}: focus never left the text, and a list that closes because focus moved elsewhere must not pull it back (71a4577b).
-    /* @__PURE__ */ jsx53(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, finalFocus: false, children: /* @__PURE__ */ jsx53("div", { ref: keepFocus, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs37("div", { className: "contents", children: [
-      i > 0 && /* @__PURE__ */ jsx53(MenuSeparator, {}),
-      section.label ? /* @__PURE__ */ jsx53("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx53(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
+    /* @__PURE__ */ jsx54(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, finalFocus: false, children: /* @__PURE__ */ jsx54("div", { ref: keepFocus, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs37("div", { className: "contents", children: [
+      i > 0 && /* @__PURE__ */ jsx54(MenuSeparator, {}),
+      section.label ? /* @__PURE__ */ jsx54("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx54(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
     ] }, section.label ?? i)) }) })
   );
 }
@@ -3710,7 +3762,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
 // src/ShowMore.tsx
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState12 } from "react";
 import { IconChevronDown as IconChevronDown4, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 var FADE_CLASSES = { surface: "from-bg-surface", inset: "from-bg-inset" };
 function ShowMore({ children, maxHeight = 96, surface = "surface", action, className }) {
   const box = useRef13(null);
@@ -3730,22 +3782,22 @@ function ShowMore({ children, maxHeight = 96, surface = "surface", action, class
   return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col items-start", className), children: [
     /* @__PURE__ */ jsxs38("div", { ref: box, className: cn("relative w-full", cut && "overflow-hidden"), style: cut ? { maxHeight } : void 0, onFocus: cut ? () => setOpen(true) : void 0, children: [
       children,
-      cut && /* @__PURE__ */ jsx54("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
+      cut && /* @__PURE__ */ jsx55("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
     ] }),
     action ? /* @__PURE__ */ jsxs38("div", { className: cn("mt-1 flex w-full items-center gap-2", overflows ? "justify-between" : "justify-end"), children: [
-      overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o) }),
-      /* @__PURE__ */ jsx54("div", { className: "-mr-2 flex shrink-0", children: action })
-    ] }) : overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o), className: "mt-1" })
+      overflows && /* @__PURE__ */ jsx55(Toggle, { open, onToggle: () => setOpen((o) => !o) }),
+      /* @__PURE__ */ jsx55("div", { className: "-mr-2 flex shrink-0", children: action })
+    ] }) : overflows && /* @__PURE__ */ jsx55(Toggle, { open, onToggle: () => setOpen((o) => !o), className: "mt-1" })
   ] });
 }
 function Toggle({ open, onToggle, className }) {
   const Icon = open ? IconChevronUp : IconChevronDown4;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     Button,
     {
       variant: "outlined",
       size: "small",
-      leadingIcon: /* @__PURE__ */ jsx54(Icon, { stroke: 1.5, className: "size-3.5" }),
+      leadingIcon: /* @__PURE__ */ jsx55(Icon, { stroke: 1.5, className: "size-3.5" }),
       className,
       "aria-expanded": open,
       onClick: onToggle,
@@ -3756,9 +3808,9 @@ function Toggle({ open, onToggle, className }) {
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx55(
+  const strip = /* @__PURE__ */ jsx56(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -3769,27 +3821,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx55(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx56(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx55(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx56(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx55(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx55(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx56(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx56(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx55(BaseToolbar.Input, { render: /* @__PURE__ */ jsx55(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx56(BaseToolbar.Input, { render: /* @__PURE__ */ jsx56(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -3799,9 +3851,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx56(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx57(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
@@ -3811,14 +3863,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__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx57("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -3827,23 +3879,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 jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs39 } 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__ */ jsxs39(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx57("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx58("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx57(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx58(
       BasePreviewCard.Positioner,
       {
         side,
@@ -3851,12 +3903,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__ */ jsx57(
+        children: /* @__PURE__ */ jsx58(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx57(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx57(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx58(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx58(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -3865,13 +3917,13 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx58("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__ */ jsx59("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 jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, onClick, ...props }) {
   const inApp = useInAppClick(href, onClick);
   return /* @__PURE__ */ jsxs40(
@@ -3883,14 +3935,14 @@ function RailItem({ href, icon, label, active = false, className, onClick, ...pr
       ...props,
       onClick: inApp,
       children: [
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60(
           "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__ */ jsx59(
+            children: /* @__PURE__ */ jsx60(
               "span",
               {
                 className: cn(
@@ -3902,14 +3954,14 @@ function RailItem({ href, icon, label, active = false, className, onClick, ...pr
             )
           }
         ),
-        /* @__PURE__ */ jsx59("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx60("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -3918,20 +3970,20 @@ function Property({ label, layout = "row", children, className }) {
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
       /* @__PURE__ */ jsxs41("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx60("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx60("dd", { className: VALUE_CLASSES, children })
+        /* @__PURE__ */ jsx61("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx61("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
   return /* @__PURE__ */ jsxs41("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx60("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx60("dd", { className: VALUE_CLASSES, children })
+    /* @__PURE__ */ jsx61("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx61("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle as Toggle2 } from "@base-ui/react/toggle";
-import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs42 } 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
@@ -3957,8 +4009,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx61("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-          /* @__PURE__ */ jsx61("span", { className: CHIP_TEXT_CLASSES, children: count })
+          /* @__PURE__ */ jsx62("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx62("span", { className: CHIP_TEXT_CLASSES, children: count })
         ]
       }
     )
@@ -3968,7 +4020,7 @@ 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 jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
   return /* @__PURE__ */ jsxs43(
     "div",
@@ -3982,7 +4034,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           Input3,
           {
             className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
@@ -3990,40 +4042,40 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx62(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx63(Kbd, { children: shortcut })
       ]
     }
   );
 }
 
 // src/Panel.tsx
-import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
   return /* @__PURE__ */ jsxs44("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
-    /* @__PURE__ */ jsx63(ContainerHeader, { title, chevron, actions }),
+    /* @__PURE__ */ jsx64(ContainerHeader, { title, chevron, actions }),
     broken ? (
       // The message takes the room the body had and centres itself in it.
-      /* @__PURE__ */ jsx63("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
-    ) : /* @__PURE__ */ jsx63(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
-    !broken && footer && /* @__PURE__ */ jsx63("div", { className: "shrink-0", children: footer })
+      /* @__PURE__ */ jsx64("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
+    ) : /* @__PURE__ */ jsx64(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
+    !broken && footer && /* @__PURE__ */ jsx64("div", { className: "shrink-0", children: footer })
   ] });
 }
 function Panel(props) {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     ErrorBoundary,
     {
       label: "panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the footer may be what threw.
-        /* @__PURE__ */ jsx63(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx64(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx63(Frame, { ...props })
+      children: /* @__PURE__ */ jsx64(Frame, { ...props })
     }
   );
 }
 
 // src/ListColumn.tsx
-import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
 function Column({ title, chevron = false, titleMenu, actions, above, collapsed = false, children, className, broken = false }) {
   return /* @__PURE__ */ jsxs45(
     "div",
@@ -4036,35 +4088,35 @@ function Column({ title, chevron = false, titleMenu, actions, above, collapsed =
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx64(ContainerHeader, { title, chevron, titleMenu, actions }),
+        /* @__PURE__ */ jsx65(ContainerHeader, { title, chevron, titleMenu, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).
-          /* @__PURE__ */ jsx64("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
-        ) : /* @__PURE__ */ jsx64(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+          /* @__PURE__ */ jsx65("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx65(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
       ]
     }
   );
 }
 function ListColumn(props) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     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__ */ jsx64(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx65(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx64(Column, { ...props })
+      children: /* @__PURE__ */ jsx65(Column, { ...props })
     }
   );
 }
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { Fragment as Fragment14, jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     BaseTabs.Root,
     {
       value: active,
@@ -4072,7 +4124,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx65(
+      children: /* @__PURE__ */ jsx66(
         BaseTabs.List,
         {
           activateOnFocus: true,
@@ -4094,11 +4146,11 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
                 tab.icon,
                 /* @__PURE__ */ jsxs46("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx65("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx66("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] }),
                 tab.unread ? /* @__PURE__ */ jsxs46(Fragment14, { children: [
-                  /* @__PURE__ */ jsx65(UnreadDot, { className: "h-auto w-auto" }),
-                  /* @__PURE__ */ jsx65("span", { className: "sr-only", children: "new" })
+                  /* @__PURE__ */ jsx66(UnreadDot, { className: "h-auto w-auto" }),
+                  /* @__PURE__ */ jsx66("span", { className: "sr-only", children: "new" })
                 ] }) : null
               ]
             },
@@ -4114,7 +4166,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 import { createContext as createContext7, useContext as useContext7, useMemo as useMemo6 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs47 } 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",
@@ -4122,7 +4174,7 @@ var SURFACE_STYLES = {
   warning: "bg-warning-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",
   error: "bg-error-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"
 };
-var ICONS = {
+var ICONS2 = {
   success: IconCircleCheck,
   brand: IconCircleCheck,
   neutral: IconCircleCheck,
@@ -4149,17 +4201,17 @@ var pillClassName = (type, hasAction, className) => cn(
   className
 );
 function LeadingIcon({ type }) {
-  const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx66(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  const Icon = ICONS2[type];
+  return /* @__PURE__ */ jsx67(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__ */ jsxs47("div", { className: pillClassName(type, hasAction, className), children: [
     /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx66(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx66("span", { className: LABEL_CLASSES, children: label })
+      leadingIcon && /* @__PURE__ */ jsx67(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx67("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx66(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx67(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext7(null);
@@ -4180,9 +4232,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx66(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs47(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx67(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs47(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx66(BaseToast.Portal, { children: /* @__PURE__ */ jsx66(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx66(ToastList, {}) }) })
+    /* @__PURE__ */ jsx67(BaseToast.Portal, { children: /* @__PURE__ */ jsx67(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx67(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -4198,17 +4250,17 @@ function ToastList() {
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
           /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx66(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx66(BaseToast.Title, { render: /* @__PURE__ */ jsx66("span", {}), className: LABEL_CLASSES })
+            leadingIcon && /* @__PURE__ */ jsx67(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx67(BaseToast.Title, { render: /* @__PURE__ */ jsx67("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx66(
+          actionLabel && /* @__PURE__ */ jsx67(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx66(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx67(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -4264,6 +4316,7 @@ export {
   InlineChip,
   InputChip,
   Kbd,
+  KindIcon,
   Lightbox,
   Link,
   ListColumn,
@@ -4325,6 +4378,7 @@ export {
   isApplePlatform,
   richTextClassName,
   shortcutLabel,
+  thingKindOf,
   useToast
 };
 //# sourceMappingURL=index.js.map