@estiva-app/ui 0.53.0 → 0.54.0

package/dist/index.js

@@ -319,7 +319,7 @@ 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_CLASSES = "rounded-lg transition-colors";
 var SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
 var COLLAPSIBLE_PANEL_CLASSES = "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";
 
@@ -2799,8 +2799,16 @@ function Breadcrumb({ items, className }) {
 // src/NavItem.tsx
 import { useId, useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { IconChevronRight as IconChevronRight2, IconDotsVertical } from "@tabler/icons-react";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { IconAlertSquareRounded, IconChevronRight as IconChevronRight2, IconDotsVertical } from "@tabler/icons-react";
+
+// src/UnreadDot.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+function UnreadDot({ className }) {
+  return /* @__PURE__ */ jsx43("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx43("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
+}
+
+// src/NavItem.tsx
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 function NavItem({
   label,
   href,
@@ -2811,6 +2819,8 @@ function NavItem({
   menu,
   menuLabel,
   hint,
+  unread = false,
+  urgent = false,
   children,
   defaultOpen = true,
   open: openProp,
@@ -2827,6 +2837,8 @@ function NavItem({
     onOpenChange?.(next);
   };
   const besides = menu != null || hasRows;
+  const mark = unread ? urgent ? /* @__PURE__ */ jsx44(UrgentMark, {}) : /* @__PURE__ */ jsx44(UnreadDot, {}) : null;
+  const stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0";
   const row = /* @__PURE__ */ jsxs29(
     "a",
     {
@@ -2838,7 +2850,7 @@ function NavItem({
         // 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"),
+        active ? "bg-bg-nav-active text-text-primary" : cn(unread ? "text-text-primary" : 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. The same
         // for the arrow.
@@ -2848,7 +2860,7 @@ function NavItem({
       ),
       ...props,
       children: [
-        (icon || hasRows) && /* @__PURE__ */ jsx43(
+        (icon || hasRows) && /* @__PURE__ */ jsx44(
           "span",
           {
             className: cn(
@@ -2859,23 +2871,25 @@ function NavItem({
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children: label }),
+        /* @__PURE__ */ jsx44("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__ */ jsx43("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-focus-within/nav:flex", children: hint }),
-        count ? /* @__PURE__ */ jsx43(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-focus-within/nav:flex", children: hint }),
+        count ? /* @__PURE__ */ jsx44(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx44(
           "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-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0"
+              // With a menu and no mark after it, the ⋮ takes this place while it shows.
+              !mark && stepsAside
             ),
             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,
+        mark ? /* @__PURE__ */ jsx44("span", { className: cn("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
+          // is kept, so a long label ends before it instead of running under it.
+          /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "hidden w-6 shrink-0 group-hover/nav:block group-focus-within/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block" })
         ) : null
       ]
     }
@@ -2886,7 +2900,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__ */ jsx43("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100", children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100", children: /* @__PURE__ */ jsx44(
       IconButton,
       {
         tooltip: open ? "Collapse" : "Expand",
@@ -2894,16 +2908,18 @@ function NavItem({
         "aria-expanded": open,
         "aria-controls": panelId,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx43(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
+        children: /* @__PURE__ */ jsx44(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 then ends 8px from the row's
-    // edge, where the count ends (px-2), so the ⋮ lands on the number.
-    /* @__PURE__ */ jsx43("div", { "data-nav-menu": true, 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 != null && // On a count, `right-1`: the 24px button's 16px icon then ends 8px
+    // from the row's edge, where the count ends (px-2), so the ⋮ lands on
+    // the number. On the mark or the empty slot, `right-2`: the button
+    // sits in the 24px slot itself.
+    /* @__PURE__ */ jsx44("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 flex items-center", count && !mark ? "right-1" : "right-2", "opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100"), children: /* @__PURE__ */ jsx44(
       Menu,
       {
         align: "right",
-        trigger: /* @__PURE__ */ jsx43(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx43(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
+        trigger: /* @__PURE__ */ jsx44(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx44(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
         children: menu
       }
     ) })
@@ -2911,17 +2927,23 @@ function NavItem({
   if (!hasRows) return line;
   return /* @__PURE__ */ jsxs29(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [
     line,
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       Collapsible.Panel,
       {
         id: panelId,
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-px pl-6", children })
+        children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col gap-px pl-6", children })
       }
     )
   ] });
 }
+function UrgentMark() {
+  return /* @__PURE__ */ jsx44("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx44("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx44(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
+}
+
+// src/NavTree.tsx
+import { useEffect as useEffect4, useRef as useRef9 } from "react";
 
 // src/CollapsibleSection.tsx
 import { useState as useState8 } from "react";
@@ -2930,18 +2952,18 @@ import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight3 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs30 } 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__ */ jsx44("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx44("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx45("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx45("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: cn("flex h-full min-w-0 flex-1 items-center text-left", row ? "gap-2" : "gap-1"),
       children: /* @__PURE__ */ jsxs30(Fragment11, { children: [
-        chevron && /* @__PURE__ */ jsx44(
+        chevron && /* @__PURE__ */ jsx45(
           IconChevronRight3,
           {
             size: row ? 16 : 12,
@@ -2949,10 +2971,10 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
           }
         ),
-        look === "quiet" ? /* @__PURE__ */ jsx44("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
+        look === "quiet" ? /* @__PURE__ */ jsx45("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__ */ jsx44("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
-        ) : /* @__PURE__ */ jsx44(SectionLabel, { folds: chevron, children: title })
+          /* @__PURE__ */ jsx45("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
+        ) : /* @__PURE__ */ jsx45(SectionLabel, { folds: chevron, children: title })
       ] })
     }
   });
@@ -2973,15 +2995,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx44("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx44(
+        trailing != null && /* @__PURE__ */ jsx45("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx45(
           "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__ */ jsx44(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx45(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -2990,7 +3012,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/CollapsibleSection.tsx
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -3018,25 +3040,30 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     onOpenChange?.(next);
   };
   return /* @__PURE__ */ jsxs31(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx45(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx45(Collapsible2.Trigger, {}) }),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx46(Collapsible2.Trigger, {}) }),
+    /* @__PURE__ */ jsx46(
       Collapsible2.Panel,
       {
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx45("div", { className: cn("flex flex-col", look === "row" ? "pl-6" : indent && "pl-4", contentClassName), children })
+        children: /* @__PURE__ */ jsx46("div", { className: cn("flex flex-col", look === "row" ? "pl-6" : indent && "pl-4", contentClassName), children })
       }
     )
   ] });
 }
 
 // src/NavTree.tsx
-import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var NAV_TREE_INTENT_MS = 150;
 function holds(nodes, id) {
-  return id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? [], id));
+  return !!nodes && id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? null, id));
+}
+function Line({ message }) {
+  return /* @__PURE__ */ jsx47("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx47(EmptyState, { scope: "section", message }) });
 }
 function Row({ node, selected, onSelect }) {
-  return /* @__PURE__ */ jsx46(
+  const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx47(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx47(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx47(SkeletonList, { rows: 2 }) : void 0;
+  return /* @__PURE__ */ jsx47(
     NavItem,
     {
       href: node.href,
@@ -3045,40 +3072,85 @@ function Row({ node, selected, onSelect }) {
       count: node.count,
       countLabel: node.countLabel,
       hint: node.hint,
+      unread: node.unread,
+      urgent: node.urgent,
       menu: node.menu,
       active: node.id === selected,
       defaultOpen: node.defaultOpen ?? true,
+      open: node.open,
+      onOpenChange: node.onOpenChange,
       onClick: onSelect ? (event) => onSelect(node, event) : void 0,
-      children: node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx46(Row, { node: child, selected, onSelect }, child.id)) : void 0
+      children: under
+    }
+  );
+}
+function Group({ group, selected, onSelect, storageKey }) {
+  return /* @__PURE__ */ jsx47(
+    NavTreeSection,
+    {
+      id: group.id,
+      title: group.title,
+      message: group.message,
+      loading: group.nodes === null,
+      trailing: group.trailing,
+      actions: group.actions,
+      defaultOpen: group.defaultOpen ?? holds(group.nodes, selected),
+      open: group.open,
+      onOpenChange: group.onOpenChange,
+      storageKey: storageKey ? `${storageKey}.${group.id}` : void 0,
+      onIntent: group.onIntent,
+      children: group.nodes?.map((node) => /* @__PURE__ */ jsx47(Row, { node, selected, onSelect }, node.id))
+    }
+  );
+}
+function NavTreeSection({ id, title, message, loading = false, trailing, actions, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }) {
+  const timer = useRef9(void 0);
+  useEffect4(() => () => clearTimeout(timer.current), []);
+  const intent = onIntent;
+  return /* @__PURE__ */ jsx47(
+    "div",
+    {
+      className: "shrink-0",
+      "data-nav-group": id,
+      onPointerEnter: intent ? () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(intent, NAV_TREE_INTENT_MS);
+      } : void 0,
+      onPointerLeave: intent ? () => clearTimeout(timer.current) : void 0,
+      onFocus: intent,
+      children: /* @__PURE__ */ jsx47(
+        CollapsibleSection,
+        {
+          title,
+          indent: true,
+          defaultOpen,
+          open,
+          onOpenChange,
+          storageKey,
+          trailing,
+          actions,
+          className: "mt-2 shrink-0",
+          contentClassName: "gap-px",
+          children: message !== void 0 ? /* @__PURE__ */ jsx47(Line, { message }) : loading ? /* @__PURE__ */ jsx47(SkeletonList, { rows: 3 }) : children
+        }
+      )
     }
   );
 }
-function NavTree({ title, groups, selected, onSelect, emptyMessage, storageKey }) {
+function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = "", storageKey }) {
   return /* @__PURE__ */ jsxs32(Fragment12, { children: [
-    title && /* @__PURE__ */ jsx46(SectionHeader, { title, look: "quiet", className: "mt-4 shrink-0" }),
-    groups === null ? /* @__PURE__ */ jsx46(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
-      // Level with the rows: a row pads itself, so the line takes a row's inset (Katerina, 14 September).
-      /* @__PURE__ */ jsx46("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx46(EmptyState, { scope: "section", message: emptyMessage }) })
-    ) : groups.map((group) => /* @__PURE__ */ jsx46(
-      CollapsibleSection,
-      {
-        title: group.title,
-        indent: true,
-        defaultOpen: holds(group.nodes, selected),
-        storageKey: storageKey ? `${storageKey}.${group.id}` : void 0,
-        className: "mt-2 shrink-0",
-        contentClassName: "gap-px",
-        children: group.nodes.map((node) => /* @__PURE__ */ jsx46(Row, { node, selected, onSelect }, node.id))
-      },
-      group.id
-    ))
+    title && /* @__PURE__ */ jsx47(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
+    groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx47(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
+      // No words, no line: an app that says nothing when it has no groups.
+      emptyMessage ? /* @__PURE__ */ jsx47(Line, { message: emptyMessage }) : null
+    ) : groups.map((group) => /* @__PURE__ */ jsx47(Group, { group, selected, onSelect, storageKey }, group.id))
   ] });
 }
 
 // src/Popover.tsx
 import { useMemo as useMemo3 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } 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 }) {
@@ -3095,8 +3167,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx47(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx47(BasePopover.Portal, { children: /* @__PURE__ */ jsx47(
+        trigger && /* @__PURE__ */ jsx48(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx48(BasePopover.Portal, { children: /* @__PURE__ */ jsx48(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -3105,20 +3177,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__ */ jsx47(
+            children: /* @__PURE__ */ jsx48(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx47(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx47(
+                render: /* @__PURE__ */ jsx48(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx48(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx47(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx48(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -3131,8 +3203,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 }
 
 // src/SuggestionMenu.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useId as useId2, useImperativeHandle, useMemo as useMemo4, useRef as useRef9, useState as useState9 } from "react";
-import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect5, useId as useId2, useImperativeHandle, useMemo as useMemo4, useRef as useRef10, useState as useState9 } from "react";
+import { jsx as jsx49, jsxs as jsxs34 } 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]);
@@ -3140,9 +3212,9 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
   const [highlight, setHighlight] = useState9(0);
   const base = useId2();
   const listboxId = `${base}-list`;
-  const chosen = useRef9(null);
-  useEffect4(() => void (chosen.current = highlight > 0 ? keys.split("\n")[highlight] ?? null : null), [highlight]);
-  useEffect4(() => {
+  const chosen = useRef10(null);
+  useEffect5(() => void (chosen.current = highlight > 0 ? keys.split("\n")[highlight] ?? null : null), [highlight]);
+  useEffect5(() => {
     const at = chosen.current ? keys.split("\n").indexOf(chosen.current) : -1;
     setHighlight(at > 0 ? at : 0);
   }, [keys]);
@@ -3167,7 +3239,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
     }
   }), [items, highlight, onSelect]);
   const open = rect !== null && items.length > 0;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editorElement || !open) return;
     editorElement.setAttribute("aria-autocomplete", "list");
     editorElement.setAttribute("aria-haspopup", "listbox");
@@ -3176,7 +3248,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
       for (const name of ["aria-autocomplete", "aria-haspopup", "aria-controls", "aria-activedescendant"]) editorElement.removeAttribute(name);
     };
   }, [editorElement, open, listboxId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editorElement || !open) return;
     editorElement.setAttribute("aria-activedescendant", `${base}-${highlight}`);
   }, [editorElement, open, base, highlight]);
@@ -3190,7 +3262,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__ */ jsx48(
+      /* @__PURE__ */ jsx49(
         MenuItem,
         {
           role: "option",
@@ -3215,17 +3287,17 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
       )
     );
   };
-  return /* @__PURE__ */ jsx48(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, children: /* @__PURE__ */ jsx48("div", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col", children: shown.map((section, i) => /* @__PURE__ */ jsxs34("div", { className: "contents", children: [
-    i > 0 && /* @__PURE__ */ jsx48(MenuSeparator, {}),
-    section.label ? /* @__PURE__ */ jsx48("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx48(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
+  return /* @__PURE__ */ jsx49(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, children: /* @__PURE__ */ jsx49("div", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col", children: shown.map((section, i) => /* @__PURE__ */ jsxs34("div", { className: "contents", children: [
+    i > 0 && /* @__PURE__ */ jsx49(MenuSeparator, {}),
+    section.label ? /* @__PURE__ */ jsx49("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx49(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 jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx49(
+  const strip = /* @__PURE__ */ jsx50(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -3236,27 +3308,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx49(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx50(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx49(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx50(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx49(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx49(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx50(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx50(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx49(BaseToolbar.Input, { render: /* @__PURE__ */ jsx49(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx50(BaseToolbar.Input, { render: /* @__PURE__ */ jsx50(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -3266,9 +3338,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx50(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx51(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
@@ -3278,14 +3350,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__ */ jsx50(
+    /* @__PURE__ */ jsx51(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -3294,23 +3366,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 jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } 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__ */ jsxs35(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx51("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx52("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx51(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx52(
       BasePreviewCard.Positioner,
       {
         side,
@@ -3318,12 +3390,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__ */ jsx51(
+        children: /* @__PURE__ */ jsx52(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx51(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx51(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx52(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx52(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -3332,13 +3404,13 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx52("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__ */ jsx53("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 jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
   return /* @__PURE__ */ jsxs36(
     "a",
@@ -3348,14 +3420,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__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "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__ */ jsx53(
+            children: /* @__PURE__ */ jsx54(
               "span",
               {
                 className: cn(
@@ -3367,14 +3439,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx53("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx54("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -3383,20 +3455,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__ */ jsxs37("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx54("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx54("dd", { className: VALUE_CLASSES, children })
+        /* @__PURE__ */ jsx55("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx55("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
   return /* @__PURE__ */ jsxs37("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx54("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx54("dd", { className: VALUE_CLASSES, children })
+    /* @__PURE__ */ jsx55("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx55("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs38 } 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
@@ -3422,8 +3494,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-          /* @__PURE__ */ jsx55("span", { className: CHIP_TEXT_CLASSES, children: count })
+          /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx56("span", { className: CHIP_TEXT_CLASSES, children: count })
         ]
       }
     )
@@ -3433,7 +3505,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 jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
   return /* @__PURE__ */ jsxs39(
     "div",
@@ -3447,7 +3519,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx57(
           Input3,
           {
             className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
@@ -3455,40 +3527,40 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx56(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx57(Kbd, { children: shortcut })
       ]
     }
   );
 }
 
 // src/Panel.tsx
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
   return /* @__PURE__ */ jsxs40("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
-    /* @__PURE__ */ jsx57(ContainerHeader, { title, chevron, actions }),
+    /* @__PURE__ */ jsx58(ContainerHeader, { title, chevron, actions }),
     broken ? (
       // The message takes the room the body had and centres itself in it.
-      /* @__PURE__ */ jsx57("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
-    ) : /* @__PURE__ */ jsx57(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
-    !broken && footer && /* @__PURE__ */ jsx57("div", { className: "shrink-0", children: footer })
+      /* @__PURE__ */ jsx58("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
+    ) : /* @__PURE__ */ jsx58(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
+    !broken && footer && /* @__PURE__ */ jsx58("div", { className: "shrink-0", children: footer })
   ] });
 }
 function Panel(props) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     ErrorBoundary,
     {
       label: "panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the footer may be what threw.
-        /* @__PURE__ */ jsx57(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx58(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx57(Frame, { ...props })
+      children: /* @__PURE__ */ jsx58(Frame, { ...props })
     }
   );
 }
 
 // src/ListColumn.tsx
-import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
 function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {
   return /* @__PURE__ */ jsxs41(
     "div",
@@ -3501,35 +3573,35 @@ function Column({ title, chevron = false, actions, above, collapsed = false, chi
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx58(ContainerHeader, { title, chevron, actions }),
+        /* @__PURE__ */ jsx59(ContainerHeader, { title, chevron, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).
-          /* @__PURE__ */ jsx58("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
-        ) : /* @__PURE__ */ jsx58(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+          /* @__PURE__ */ jsx59("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx59(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
       ]
     }
   );
 }
 function ListColumn(props) {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     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__ */ jsx58(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx59(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx58(Column, { ...props })
+      children: /* @__PURE__ */ jsx59(Column, { ...props })
     }
   );
 }
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     BaseTabs.Root,
     {
       value: active,
@@ -3537,7 +3609,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx60(
         BaseTabs.List,
         {
           activateOnFocus: true,
@@ -3559,7 +3631,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
                 tab.icon,
                 /* @__PURE__ */ jsxs42("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx59("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx60("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -3575,7 +3647,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 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 jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs43 } 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",
@@ -3611,16 +3683,16 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx60(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx61(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__ */ jsxs43("div", { className: pillClassName(type, hasAction, className), children: [
     /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx60(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx60("span", { className: LABEL_CLASSES, children: label })
+      leadingIcon && /* @__PURE__ */ jsx61(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx61("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx60(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx61(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext6(null);
@@ -3641,9 +3713,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx60(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs43(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx61(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs43(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx60(BaseToast.Portal, { children: /* @__PURE__ */ jsx60(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx60(ToastList, {}) }) })
+    /* @__PURE__ */ jsx61(BaseToast.Portal, { children: /* @__PURE__ */ jsx61(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx61(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -3659,17 +3731,17 @@ function ToastList() {
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
           /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx60(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx60(BaseToast.Title, { render: /* @__PURE__ */ jsx60("span", {}), className: LABEL_CLASSES })
+            leadingIcon && /* @__PURE__ */ jsx61(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx61(BaseToast.Title, { render: /* @__PURE__ */ jsx61("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx60(
+          actionLabel && /* @__PURE__ */ jsx61(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx60(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx61(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3748,6 +3820,7 @@ export {
   MenuSub,
   NavItem,
   NavTree,
+  NavTreeSection,
   Panel,
   Person,
   PersonTrigger,
@@ -3783,6 +3856,7 @@ export {
   Tooltip,
   TooltipProvider,
   TopBar,
+  UnreadDot,
   WithTooltip,
   cn,
   hueFor,