@estiva-app/ui 0.44.1 → 0.46.0

package/dist/index.js

@@ -319,6 +319,8 @@ var FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field h
 var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 var CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums";
 var BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
+var SIDEBAR_ROW_CLASSES = "rounded-md transition-colors";
+var SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
 
 // src/Tooltip.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1004,7 +1006,7 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
-  brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+  brand: "bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
   info: "bg-info-muted text-info-default signal:border signal:border-info-outline",
   warning: "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
   success: "bg-success-muted text-success-default signal:border signal:border-success-outline",
@@ -1922,7 +1924,7 @@ function CommandPaletteAnswer({ children, note }) {
   const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
     paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx26("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
-      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx26("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx26("sup", { className: "ml-0.5 font-mono text-small text-accent-text", children: part.slice(1, -1) }, j) : part
     ) }, i)),
     note && /* @__PURE__ */ jsx26(FieldLine, { children: note })
   ] });
@@ -1947,7 +1949,7 @@ var INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
   neutral: "bg-bg-active text-text-primary",
   /** A person. */
-  person: "bg-accent-muted text-accent-primary",
+  person: "bg-accent-muted text-accent-text",
   /** A person, called urgently. */
   urgent: "bg-warning-muted text-warning-default",
   /**
@@ -2792,32 +2794,61 @@ function Breadcrumb({ items, className }) {
 }
 
 // src/NavItem.tsx
+import { IconDotsVertical } from "@tabler/icons-react";
 import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
-function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return (
-    // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
-    /* @__PURE__ */ jsxs29(
-      "a",
+function NavItem({ label, href, count, countLabel, active = false, icon, menu, menuLabel, className, ...props }) {
+  const row = /* @__PURE__ */ jsxs29(
+    "a",
+    {
+      href,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        // shrink-0: the row keeps its 32px inside an overflowing flex column
+        // — without it the list compresses instead of scrolling (the missing-
+        // shrink-0 family; Katerina, 2026-09-02).
+        "flex h-8 min-w-0 shrink-0 items-center gap-2 px-2 text-body-2",
+        SIDEBAR_ROW_CLASSES,
+        active ? "bg-bg-active text-text-primary" : cn(SIDEBAR_ROW_TEXT_CLASSES, "hover:bg-bg-hover"),
+        // With a menu the ⋮ sits beside the link, so the row keeps its hover
+        // look while the ⋮ is pointed at and while its menu is open.
+        menu != null && !active && "group-hover/nav:bg-bg-hover group-hover/nav:text-text-primary group-has-[[aria-expanded=true]]/nav:bg-bg-hover group-has-[[aria-expanded=true]]/nav:text-text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx43("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx43(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx43(
+          "span",
+          {
+            className: cn(
+              "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted",
+              // With a menu, the ⋮ takes this place while it shows.
+              menu != null && "transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0 group-has-[[aria-expanded=true]]/nav:opacity-0"
+            ),
+            children: count
+          }
+        ) }) : menu != null ? (
+          // No count, but a menu: the count's place is kept free, so a long
+          // label truncates before the ⋮ instead of running under it.
+          /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: "min-w-4 shrink-0" })
+        ) : null
+      ]
+    }
+  );
+  if (menu == null) return row;
+  const name = menuLabel ?? `More options for ${label}`;
+  return /* @__PURE__ */ jsxs29("div", { className: "group/nav relative shrink-0", children: [
+    row,
+    /* @__PURE__ */ jsx43("div", { className: "absolute inset-y-0 right-1 flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100", children: /* @__PURE__ */ jsx43(
+      Menu,
       {
-        href,
-        "aria-current": active ? "page" : void 0,
-        className: cn(
-          // shrink-0: the row keeps its 32px inside an overflowing flex column
-          // — without it the list compresses instead of scrolling (the missing-
-          // shrink-0 family; Katerina, 2026-09-02).
-          "flex h-8 min-w-0 shrink-0 items-center gap-2 rounded-md px-2 text-body-2 transition-colors",
-          active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-          className
-        ),
-        ...props,
-        children: [
-          icon && /* @__PURE__ */ jsx43("span", { className: "flex shrink-0 items-center", children: icon }),
-          /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children: label }),
-          count ? /* @__PURE__ */ jsx43(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx43("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
-        ]
+        align: "right",
+        trigger: /* @__PURE__ */ jsx43(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx43(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
+        children: menu
       }
-    )
-  );
+    ) })
+  ] });
 }
 
 // src/Popover.tsx
@@ -2875,11 +2906,97 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
   );
 }
 
+// src/SuggestionMenu.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useId, useImperativeHandle, useMemo as useMemo4, useState as useState7 } from "react";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sections, itemKey, row, onSelect, handle }) {
+  const shown = useMemo4(() => sections.filter((section) => section.items.length > 0), [sections]);
+  const items = useMemo4(() => shown.flatMap((section) => section.items), [shown]);
+  const keys = items.map(itemKey).join("\n");
+  const [highlight, setHighlight] = useState7(0);
+  const base = useId();
+  const listboxId = `${base}-list`;
+  useEffect4(() => setHighlight(0), [keys]);
+  useImperativeHandle(handle, () => ({
+    // The editor hands its arrow keys to this list: Base UI's lists need a text field of their own, and an editor is not one.
+    onKeyDown: (event) => {
+      if (!items.length) return false;
+      if (event.key === "ArrowDown") {
+        setHighlight((h) => (h + 1) % items.length);
+        return true;
+      }
+      if (event.key === "ArrowUp") {
+        setHighlight((h) => (h - 1 + items.length) % items.length);
+        return true;
+      }
+      if (event.key === "Enter") {
+        const item = items[highlight];
+        if (item !== void 0) onSelect(item);
+        return true;
+      }
+      return false;
+    }
+  }), [items, highlight, onSelect]);
+  const open = rect !== null && items.length > 0;
+  useEffect4(() => {
+    if (!editorElement || !open) return;
+    editorElement.setAttribute("aria-autocomplete", "list");
+    editorElement.setAttribute("aria-haspopup", "listbox");
+    editorElement.setAttribute("aria-controls", listboxId);
+    return () => {
+      for (const name of ["aria-autocomplete", "aria-haspopup", "aria-controls", "aria-activedescendant"]) editorElement.removeAttribute(name);
+    };
+  }, [editorElement, open, listboxId]);
+  useEffect4(() => {
+    if (!editorElement || !open) return;
+    editorElement.setAttribute("aria-activedescendant", `${base}-${highlight}`);
+  }, [editorElement, open, base, highlight]);
+  const scrollRef = useCallback3((el) => {
+    el?.scrollIntoView({ block: "nearest" });
+  }, []);
+  if (items.length === 0) return null;
+  const drawRow = (item) => {
+    const index = items.indexOf(item);
+    const selected = index === highlight;
+    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__ */ jsx45(
+        MenuItem,
+        {
+          role: "option",
+          id: `${base}-${index}`,
+          "aria-selected": selected,
+          tabIndex: -1,
+          ref: selected ? scrollRef : void 0,
+          size,
+          label,
+          description,
+          leading,
+          shortcut,
+          hint,
+          selected,
+          onMouseEnter: () => setHighlight(index),
+          onMouseDown: (event) => {
+            event.preventDefault();
+            onSelect(item);
+          }
+        },
+        itemKey(item)
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx45(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, children: /* @__PURE__ */ jsx45("div", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col", children: shown.map((section, i) => /* @__PURE__ */ jsxs31("div", { className: "contents", children: [
+    i > 0 && /* @__PURE__ */ jsx45(MenuSeparator, {}),
+    section.label ? /* @__PURE__ */ jsx45("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx45(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
+  ] }, section.label ?? i)) }) });
+}
+
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx45(
+  const strip = /* @__PURE__ */ jsx46(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -2890,27 +3007,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx45(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx46(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx45(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx46(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx45(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx45(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx46(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx46(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx45(BaseToolbar.Input, { render: /* @__PURE__ */ jsx45(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx46(BaseToolbar.Input, { render: /* @__PURE__ */ jsx46(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -2920,9 +3037,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx46(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx47(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
@@ -2932,14 +3049,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__ */ jsx46(
+    /* @__PURE__ */ jsx47(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2948,23 +3065,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 jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } 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__ */ jsxs31(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs32(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx48(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx47("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx48("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx47(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx48(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2972,12 +3089,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__ */ jsx47(
+        children: /* @__PURE__ */ jsx48(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx47(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx47(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx48(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx48(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2986,15 +3103,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx48("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
+  return /* @__PURE__ */ jsx49("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 jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "a",
     {
       href,
@@ -3002,14 +3119,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           "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__ */ jsx49(
+            children: /* @__PURE__ */ jsx50(
               "span",
               {
                 className: cn(
@@ -3021,14 +3138,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx49("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx50("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -3036,25 +3153,25 @@ function Property({ label, layout = "row", children, className }) {
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      /* @__PURE__ */ jsxs33("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx50("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx50("dd", { className: VALUE_CLASSES, children })
+      /* @__PURE__ */ jsxs34("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx51("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx51("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs33("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx50("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx50("dd", { className: VALUE_CLASSES, children })
+  return /* @__PURE__ */ jsxs34("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx51("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx51("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
-    /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsxs35(
       Toggle,
       {
         pressed,
@@ -3070,14 +3187,14 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
                (Katerina, 2026-09-08). The number reads in the text colour
                there; the accent keeps the edge and the fill. Signal keeps
                Peek's blue-on-wash, which reads. */
-            "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary"
+            "border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary"
           ) : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-          /* @__PURE__ */ jsx51("span", { className: CHIP_TEXT_CLASSES, children: count })
+          /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx52("span", { className: CHIP_TEXT_CLASSES, children: count })
         ]
       }
     )
@@ -3087,9 +3204,9 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       className: cn(
@@ -3101,7 +3218,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           Input3,
           {
             className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
@@ -3109,7 +3226,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx52(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx53(Kbd, { children: shortcut })
       ]
     }
   );
@@ -3118,50 +3235,58 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment11, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", render, className }) {
+import { Fragment as Fragment11, jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", look = "heading", render, className }) {
+  const row = look === "row";
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx53("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx53("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx54("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx54("span", {})),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
-      className: "flex h-full min-w-0 flex-1 items-center gap-1 text-left",
-      children: /* @__PURE__ */ jsxs36(Fragment11, { children: [
-        chevron && /* @__PURE__ */ jsx53(
+      className: cn("flex h-full min-w-0 flex-1 items-center text-left", row ? "gap-2" : "gap-1"),
+      children: /* @__PURE__ */ jsxs37(Fragment11, { children: [
+        chevron && /* @__PURE__ */ jsx54(
           IconChevronRight2,
           {
-            size: 12,
+            size: row ? 16 : 12,
             stroke: 1.5,
-            className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
+            className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx53(SectionLabel, { children: title })
+        look === "quiet" ? /* @__PURE__ */ jsx54("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__ */ jsx54("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
+        ) : /* @__PURE__ */ jsx54(SectionLabel, { children: title })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       className: cn(
-        "group flex h-[32px] shrink-0 items-center gap-1 rounded-lg px-2 transition-colors",
+        "group flex h-[32px] shrink-0 items-center gap-1 px-2",
+        !row && "transition-colors",
+        // A row is NavItem's shape and colour: 6px corners, secondary words that brighten on hover.
+        row ? cn(SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES) : "rounded-lg",
         // The fill says "this does something": a row with a toggle or actions
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).
-        hover === "fill" && (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
+        // A quiet label never lights up: it is a label; its button does.
+        hover === "fill" && look !== "quiet" && (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
         className
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx53("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx53(
+        trailing != null && /* @__PURE__ */ jsx54("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx54(
           "div",
           {
             className: cn(
               "-mr-1 flex shrink-0 items-center gap-1",
               showActions === "hover" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
             ),
-            children: actions.map((action) => /* @__PURE__ */ jsx53(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx54(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -3170,35 +3295,35 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/Panel.tsx
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
-  return /* @__PURE__ */ jsxs37("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
-    /* @__PURE__ */ jsx54(ContainerHeader, { title, chevron, actions }),
+  return /* @__PURE__ */ jsxs38("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
+    /* @__PURE__ */ jsx55(ContainerHeader, { title, chevron, actions }),
     broken ? (
       // The message takes the room the body had and centres itself in it.
-      /* @__PURE__ */ jsx54("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
-    ) : /* @__PURE__ */ jsx54(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
-    !broken && footer && /* @__PURE__ */ jsx54("div", { className: "shrink-0", children: footer })
+      /* @__PURE__ */ jsx55("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
+    ) : /* @__PURE__ */ jsx55(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
+    !broken && footer && /* @__PURE__ */ jsx55("div", { className: "shrink-0", children: footer })
   ] });
 }
 function Panel(props) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     ErrorBoundary,
     {
       label: "panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the footer may be what threw.
-        /* @__PURE__ */ jsx54(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx55(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx54(Frame, { ...props })
+      children: /* @__PURE__ */ jsx55(Frame, { ...props })
     }
   );
 }
 
 // src/ListColumn.tsx
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: cn(
@@ -3209,34 +3334,34 @@ function Column({ title, chevron = false, actions, above, collapsed = false, chi
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx55(ContainerHeader, { title, chevron, actions }),
+        /* @__PURE__ */ jsx56(ContainerHeader, { title, chevron, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).
-          /* @__PURE__ */ jsx55("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
-        ) : /* @__PURE__ */ jsx55(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+          /* @__PURE__ */ jsx56("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx56(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
       ]
     }
   );
 }
 function ListColumn(props) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     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__ */ jsx55(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx56(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx55(Column, { ...props })
+      children: /* @__PURE__ */ jsx56(Column, { ...props })
     }
   );
 }
 
 // src/CollapsibleSection.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -3255,22 +3380,22 @@ function writeStored(key, open) {
   } catch {
   }
 }
-function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }) {
-  const [openState, setOpenState] = useState7(() => readStored(storageKey) ?? defaultOpen);
+function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = "heading", children, className, contentClassName }) {
+  const [openState, setOpenState] = useState8(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
     setOpenState(next);
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs39(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx56(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx56(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs40(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx57(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx57(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx57(
       Collapsible.Panel,
       {
         hiddenUntilFound: true,
         className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
-        children: /* @__PURE__ */ jsx56("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx57("div", { className: cn("flex flex-col", look === "row" && "pl-6", contentClassName), children })
       }
     )
   ] });
@@ -3278,9 +3403,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     BaseTabs.Root,
     {
       value: active,
@@ -3288,14 +3413,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx57(
+      children: /* @__PURE__ */ jsx58(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs40(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs41(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -3308,9 +3433,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs40("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs41("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx57("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx58("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -3323,10 +3448,10 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext6, useContext as useContext6, useMemo as useMemo4 } from "react";
+import { createContext as createContext6, useContext as useContext6, useMemo as useMemo5 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs42 } 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",
@@ -3362,23 +3487,23 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx58(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx59(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__ */ jsxs41("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx58(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx58("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs42("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx59(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx59("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx58(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx59(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext6(null);
 var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
-  const manager = useMemo4(() => BaseToast.createToastManager(), []);
-  const value = useMemo4(
+  const manager = useMemo5(() => BaseToast.createToastManager(), []);
+  const value = useMemo5(
     () => ({
       showToast: ({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, durationMs = 5e3 }) => manager.add({
         title: label,
@@ -3392,9 +3517,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx58(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs41(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx59(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs42(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx58(BaseToast.Portal, { children: /* @__PURE__ */ jsx58(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx58(ToastList, {}) }) })
+    /* @__PURE__ */ jsx59(BaseToast.Portal, { children: /* @__PURE__ */ jsx59(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx59(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -3402,25 +3527,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs42(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx58(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx58(BaseToast.Title, { render: /* @__PURE__ */ jsx58("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx59(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx59(BaseToast.Title, { render: /* @__PURE__ */ jsx59("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx58(
+          actionLabel && /* @__PURE__ */ jsx59(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx58(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx59(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3434,6 +3559,19 @@ function useToast() {
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
+
+// src/shortcuts.ts
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+}
+function shortcutLabel(keys, apple = isApplePlatform()) {
+  return keys.split("-").map((part, i, all) => {
+    if (i === all.length - 1) return part.length === 1 ? part.toUpperCase() : part;
+    if (part === "Mod") return apple ? "Cmd" : "Ctrl";
+    return part;
+  }).join("+");
+}
 export {
   AppShell,
   AttachmentCard,
@@ -3506,6 +3644,7 @@ export {
   SkeletonBar,
   SkeletonList,
   SkeletonRow,
+  SuggestionMenu,
   Tabs,
   TextInput,
   Textarea,
@@ -3524,7 +3663,9 @@ export {
   hueFor,
   initialsFor,
   inlineChipClassName,
+  isApplePlatform,
   richTextClassName,
+  shortcutLabel,
   useToast
 };
 //# sourceMappingURL=index.js.map