@estiva-app/ui 0.55.0 → 0.57.0

package/dist/index.js

@@ -168,7 +168,7 @@ function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className })
     {
       "aria-label": ariaLabel,
       className: cn("flex w-60 shrink-0 flex-col", !onGround && "border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx4(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx4(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-0.5 px-2.5 py-3", children })
     }
   );
 }
@@ -276,6 +276,25 @@ import {
 // src/IconButton.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
 
+// src/looks.ts
+var FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field:focus:border-border-focus rounded-lg";
+var FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
+var FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field group-hover/field:disabled:border-border-field";
+var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
+var FIELD_SIZE_CLASSES = {
+  default: "px-3 py-2 text-input-value",
+  small: "h-6 min-h-6 px-2 text-caption"
+};
+var FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors";
+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-lg transition-colors";
+var SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
+var MUTED_CONTROL_CLASSES = "text-text-secondary hover:bg-bg-hover hover:text-text-primary";
+var MENU_TRIGGER_CLASSES = "cursor-pointer rounded-md transition-colors hover:bg-bg-hover data-[popup-open]:bg-bg-hover";
+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";
+
 // src/formBusy.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var FormBusyContext = createContext2(false);
@@ -306,23 +325,6 @@ function Kbd({ children, className, tone = "default" }) {
   );
 }
 
-// src/looks.ts
-var FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field:focus:border-border-focus rounded-lg";
-var FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
-var FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field group-hover/field:disabled:border-border-field";
-var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
-var FIELD_SIZE_CLASSES = {
-  default: "px-3 py-2 text-input-value",
-  small: "h-6 min-h-6 px-2 text-caption"
-};
-var FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors";
-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-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";
-
 // src/Tooltip.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
@@ -410,7 +412,7 @@ function IconButton({
     // stretched and carries no `self-center` — see the note there.
     "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer",
     !off && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
-    !off && (variant === "muted" || variant === "resolve") && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+    !off && (variant === "muted" || variant === "resolve") && MUTED_CONTROL_CLASSES,
     !off && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
     !off && variant === "current" && "hover:bg-bg-hover",
     off && variant === "primary" && "bg-bg-disabled text-text-disabled",
@@ -1008,9 +1010,12 @@ function SectionLabel({
     "span",
     {
       className: cn(
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
-        // Leaf's section labels are Signal's type (Katerina, 28 September),
-        // but a group that folds keeps Ship's (Katerina, 2 October).
+        "text-h5 leading-3",
+        // Ship's type in every theme but Leaf, whose section labels are the
+        // micro-label (Katerina, 28 September) unless the group folds (2
+        // October). Signal dropped its micro-label on 5 October: every one of
+        // Peek's section labels is Ship's type, folding or not, so Desk's
+        // Screener and its Urgent and Open work read as one.
         !folds && "leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest",
         tone === "secondary" ? "text-text-secondary" : tone === "muted" ? "text-text-muted" : "text-text-primary",
         truncate && "min-w-0 truncate",
@@ -1029,7 +1034,8 @@ function MenuPanel({ children, className, ...props }) {
     "div",
     {
       className: cn(
-        "flex flex-col p-2",
+        // 2px between rows, as a list column's and a sidebar's (Katerina, 5 October).
+        "flex flex-col gap-0.5 p-2",
         FLOATING_SURFACE_CLASSES,
         /*
          * A divider in a menu runs the width of the rows it separates.
@@ -1088,7 +1094,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
                 "data-interactive": true,
                 className: cn("min-w-[180px] outline-none p-0", className),
                 render: /* @__PURE__ */ jsx18(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2", contentClassName), children: /* @__PURE__ */ jsx18(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx18(DividerInPanel.Provider, { value: true, children }) }) })
+                children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col gap-0.5 p-2", contentClassName), children: /* @__PURE__ */ jsx18(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx18(DividerInPanel.Provider, { value: true, children }) }) })
               }
             )
           }
@@ -1219,12 +1225,12 @@ function MenuSection({ label, children, className }) {
   const inMenu = useContext4(MenuContext) !== null;
   const heading = /* @__PURE__ */ jsx18("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx18(SectionLabel, { tone: "secondary", children: label }) });
   if (!inMenu) {
-    return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col", children: [
+    return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs11(BaseMenu.Group, { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxs11(BaseMenu.Group, { className: "flex flex-col gap-0.5", children: [
     /* @__PURE__ */ jsx18(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
@@ -1597,7 +1603,7 @@ function ChipInput({
             sideOffset: GAP3,
             collisionPadding: VIEWPORT_PAD3,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx22(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx22(MenuPanel, {}), children: /* @__PURE__ */ jsx22(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx22(Combobox.List, { children: (option) => /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx22(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx22(MenuPanel, {}), children: /* @__PURE__ */ jsx22(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx22(Combobox.List, { className: "flex flex-col gap-0.5", children: (option) => /* @__PURE__ */ jsx22(
               Combobox.Item,
               {
                 value: option,
@@ -1953,7 +1959,7 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
         ] }),
         /* @__PURE__ */ jsxs19(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
           children != null && /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
-          /* @__PURE__ */ jsx27(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs19(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx27(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs19(Autocomplete.Group, { items: group.items, className: "flex flex-col gap-0.5", children: [
             /* @__PURE__ */ jsx27(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx27(SectionLabel, { tone: "secondary", children: group.value }) }),
             /* @__PURE__ */ jsx27(Autocomplete.Collection, { children: (row) => (
               /* The menu row, as the list's own option — the way Select
@@ -2304,13 +2310,13 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         "aria-haspopup": "menu",
         "aria-expanded": open,
         className: cn(
-          "flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
+          "flex h-8 min-h-8 items-center gap-1.5 pl-1.5 pr-1.5 text-body-2 text-text-primary",
+          MENU_TRIGGER_CLASSES,
           open && "bg-bg-hover",
           // Under a `Menu` the open state is Base UI's, not a prop: the trigger
-          // carries `data-popup-open` while its menu is up, and sets its own
-          // `aria-expanded`. Both spellings hold the fill, so this works whether
-          // the caller drives it or the menu does.
-          "data-[popup-open]:bg-bg-hover",
+          // carries `data-popup-open` while its menu is up (MENU_TRIGGER_CLASSES
+          // holds the fill for it), and sets its own `aria-expanded`; `open`
+          // holds it for a caller that drives it.
           className
         ),
         ...props,
@@ -2520,7 +2526,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               {
                 render: /* @__PURE__ */ jsx34(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs25(
+                children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs25(
                   BaseSelect.Item,
                   {
                     value: option.value,
@@ -2615,16 +2621,30 @@ import { IconX as IconX5 } from "@tabler/icons-react";
 
 // src/ContainerHeader.tsx
 import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
+import { Button as BaseButton6 } from "@base-ui/react/button";
 import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
-function ContainerHeader({ title, chevron = false, actions, className }) {
+function ContainerHeader({ title, chevron = false, titleMenu, actions, className }) {
   const text = typeof title === "string";
-  return /* @__PURE__ */ jsxs26("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
-    /* @__PURE__ */ jsx37("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs26("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-      text ? /* @__PURE__ */ jsx37("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx37("div", { className: "min-w-0 flex-1", children: title }),
-      chevron && /* @__PURE__ */ jsx37(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-    ] }) }),
-    actions && /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+  const name = /* @__PURE__ */ jsxs26("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+    text ? /* @__PURE__ */ jsx37("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx37("div", { className: "min-w-0 flex-1", children: title }),
+    (chevron || titleMenu != null) && /* @__PURE__ */ jsx37(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
   ] });
+  return (
+    // With a title menu the bar gives the button 6px of its left padding
+    // (pl-3.5 + the button's px-1.5 = pl-5): the words stay where a title's
+    // are, and the fill is inside the bar — a negative margin had it clipped
+    // (Katerina, 5 October).
+    /* @__PURE__ */ jsxs26("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4", titleMenu != null ? "pl-3.5" : "pl-5", className), children: [
+      /* @__PURE__ */ jsx37("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: titleMenu != null ? /* @__PURE__ */ jsx37(
+        Menu,
+        {
+          trigger: /* @__PURE__ */ jsx37(BaseButton6, { type: "button", className: cn("flex min-w-0 items-center px-1.5 py-1", MENU_TRIGGER_CLASSES), children: name }),
+          children: titleMenu
+        }
+      ) : name }),
+      actions && /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+    ] })
+  );
 }
 
 // src/DialogShell.tsx
@@ -2979,7 +2999,7 @@ function NavItem({
   };
   const besides = menu != null || hasRows;
   const mark = unread ? urgent ? /* @__PURE__ */ jsx45(UrgentMark, {}) : /* @__PURE__ */ jsx45(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 stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
   const row = /* @__PURE__ */ jsxs30(
     "a",
     {
@@ -3007,14 +3027,14 @@ function NavItem({
             className: cn(
               // With rows under it the slot is kept even with no icon: the arrow lands in it.
               "flex min-w-4 shrink-0 items-center",
-              hasRows && "transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0"
+              hasRows && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0"
             ),
             children: icon
           }
         ),
         /* @__PURE__ */ jsx45("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__ */ jsx45("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-focus-within/nav:flex", children: hint }),
+        /* @__PURE__ */ jsx45("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
         count ? /* @__PURE__ */ jsx45(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx45(
           "span",
           {
@@ -3026,11 +3046,19 @@ function NavItem({
             children: count
           }
         ) }) : null,
-        mark ? /* @__PURE__ */ jsx45("span", { className: cn("flex shrink-0", stepsAside), children: mark }) : menu != null && !count ? (
+        mark ? (
+          // `-mr-1`: the 24px slot's dot then sits on the axis of a count and
+          // of the ⋮ (8px from the edge to the 16px box), one column with a
+          // folder heading's dot and ⋮ (Katerina, 5 October).
+          /* @__PURE__ */ jsx45("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
+        ) : menu != null && !count ? (
           // Nothing at the right, but a menu: no room is kept at rest, so the
           // label has the row's whole width; while the ⋮ shows, its 24px slot
           // is kept, so a long label ends before it instead of running under it.
-          /* @__PURE__ */ jsx45("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" })
+          // `-mr-1`: the ⋮ sits at `right-1`, 4px into the row's padding, so the
+          // slot does too — at the padding's edge it kept 4px the ⋮ never
+          // covers, and the label stopped 12px short of the button, not 8.
+          /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
         ) : null
       ]
     }
@@ -3041,7 +3069,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__ */ jsx45("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__ */ jsx45(
+    /* @__PURE__ */ jsx45("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx45(
       IconButton,
       {
         tooltip: open ? "Collapse" : "Expand",
@@ -3052,11 +3080,15 @@ function NavItem({
         children: /* @__PURE__ */ jsx45(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
       }
     ) }),
-    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__ */ jsx45("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__ */ jsx45(
+    menu != null && // `right-1`: the 24px button's 16px icon ends 8px from the row's
+    // edge, where a count ends (px-2) — and where a SectionHeader's
+    // actions and ⋮ end, so a folder's ⋮ and its rows' ⋮ are one column
+    // (Katerina, 5 October: the rows move to the heading, not the
+    // heading to the rows). Over a dot or the empty slot it sits 4px
+    // right of the slot's centre.
+    // On a screen with no hover it always shows: nothing there can point
+    // at the row, and the menu has no other way in.
+    /* @__PURE__ */ jsx45("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx45(
       Menu,
       {
         align: "right",
@@ -3074,7 +3106,7 @@ function NavItem({
         id: panelId,
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-px pl-6", children })
+        children: /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
       }
     )
   ] });
@@ -3091,23 +3123,37 @@ import { useState as useState9 } from "react";
 import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 
 // src/SectionHeader.tsx
-import { IconChevronRight as IconChevronRight3 } from "@tabler/icons-react";
+import { IconChevronRight as IconChevronRight3, IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment11, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", look = "heading", render, className }) {
+function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, actions, menu, menuLabel, showActions = "hover", hover = "fill", look = "heading", render, className }) {
   const row = look === "row";
+  const acts = actions && actions.length > 0 || menu != null;
+  const trailingClasses = !acts ? "has-[[data-unread]]:-mr-1" : showActions === "hover" && "has-[[data-unread]]:pointer-events-none has-[[data-unread]]:absolute has-[[data-unread]]:inset-y-0 has-[[data-unread]]:right-1 has-[[data-unread]]:w-6 has-[[data-unread]]:justify-center has-[[data-unread]]:transition-opacity group-hover:has-[[data-unread]]:opacity-0 group-has-[:focus-visible]:has-[[data-unread]]:opacity-0 group-has-[[data-section-menu]_[aria-expanded=true]]:has-[[data-unread]]:opacity-0 [@media(hover:none)]:has-[[data-unread]]:opacity-0";
+  const reveal = showActions === "hover" && "opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100";
   const titleElement = useRender({
     render: render ?? (chevron ? /* @__PURE__ */ jsx46("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx46("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"),
+      // An icon is a row's: NavItem's 8px after it.
+      className: cn("flex h-full min-w-0 flex-1 items-center text-left", row || chevron || icon != null ? "gap-2" : "gap-1"),
       children: /* @__PURE__ */ jsxs31(Fragment11, { children: [
-        chevron && /* @__PURE__ */ jsx46(
+        icon != null ? /* @__PURE__ */ jsxs31("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
+          /* @__PURE__ */ jsx46("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
+          chevron && /* @__PURE__ */ jsx46(
+            IconChevronRight3,
+            {
+              size: 16,
+              stroke: 1.5,
+              className: cn("absolute opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", isExpanded && "rotate-90")
+            }
+          )
+        ] }) : chevron && /* @__PURE__ */ jsx46(
           IconChevronRight3,
           {
-            size: row ? 16 : 12,
+            size: 16,
             stroke: 1.5,
             className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
           }
@@ -3123,7 +3169,8 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
     "div",
     {
       className: cn(
-        "group flex h-[32px] shrink-0 items-center gap-1 px-2",
+        // `relative`: a dot in the last button's place is placed against the row.
+        "group relative 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",
@@ -3131,20 +3178,30 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).
         // 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",
+        hover === "fill" && look !== "quiet" && (chevron || acts) && "hover:bg-bg-hover",
+        // While its menu is open the pointer is on the menu, not the row: the
+        // row keeps its hover look, as a NavItem's does.
+        hover === "fill" && look !== "quiet" && menu != null && "has-[[data-section-menu]_[aria-expanded=true]]:bg-bg-hover",
         className
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx46("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx46(
+        trailing != null && /* @__PURE__ */ jsx46("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
+        acts && /* @__PURE__ */ jsx46(
           "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__ */ jsx46(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            className: "-mr-1 flex shrink-0 items-center",
+            children: /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center gap-1", reveal), children: [
+              actions?.map((action) => /* @__PURE__ */ jsx46(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
+              menu != null && /* @__PURE__ */ jsx46("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx46(
+                Menu,
+                {
+                  align: "right",
+                  trigger: /* @__PURE__ */ jsx46(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx46(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
+                  children: menu
+                }
+              ) })
+            ] })
           }
         )
       ]
@@ -3172,7 +3229,7 @@ function writeStored(key, open) {
   } catch {
   }
 }
-function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = "heading", indent = false, children, className, contentClassName }) {
+function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = "heading", indent = false, children, className, contentClassName }) {
   const [openState, setOpenState] = useState9(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
@@ -3181,13 +3238,13 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     onOpenChange?.(next);
   };
   return /* @__PURE__ */ jsxs32(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible2.Trigger, {}) }),
+    /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible2.Trigger, {}) }),
     /* @__PURE__ */ jsx47(
       Collapsible2.Panel,
       {
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx47("div", { className: cn("flex flex-col", look === "row" ? "pl-6" : indent && "pl-4", contentClassName), children })
+        children: /* @__PURE__ */ jsx47("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
       }
     )
   ] });
@@ -3235,6 +3292,8 @@ function Group({ group, selected, onSelect, storageKey }) {
       loading: group.nodes === null,
       trailing: group.trailing,
       actions: group.actions,
+      menu: group.menu,
+      icon: group.icon,
       defaultOpen: group.defaultOpen ?? holds(group.nodes, selected),
       open: group.open,
       onOpenChange: group.onOpenChange,
@@ -3244,14 +3303,14 @@ function Group({ group, selected, onSelect, storageKey }) {
     }
   );
 }
-function NavTreeSection({ id, title, message, loading = false, trailing, actions, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }) {
+function NavTreeSection({ id, title, message, loading = false, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }) {
   const timer = useRef10(void 0);
   useEffect5(() => () => clearTimeout(timer.current), []);
   const intent = onIntent;
   return /* @__PURE__ */ jsx48(
     "div",
     {
-      className: "shrink-0",
+      className: "shrink-0 [&+&]:mt-1",
       "data-nav-group": id,
       onPointerEnter: intent ? () => {
         clearTimeout(timer.current);
@@ -3270,8 +3329,10 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
           storageKey,
           trailing,
           actions,
-          className: "mt-2 shrink-0",
-          contentClassName: "gap-px",
+          menu,
+          icon,
+          className: "shrink-0",
+          contentClassName: "gap-0.5",
           children: message !== void 0 ? /* @__PURE__ */ jsx48(Line, { message }) : loading ? /* @__PURE__ */ jsx48(SkeletonList, { rows: 3 }) : children
         }
       )
@@ -3428,7 +3489,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
       )
     );
   };
-  return /* @__PURE__ */ jsx50(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, children: /* @__PURE__ */ jsx50("div", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col", children: shown.map((section, i) => /* @__PURE__ */ jsxs35("div", { className: "contents", children: [
+  return /* @__PURE__ */ jsx50(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, children: /* @__PURE__ */ jsx50("div", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs35("div", { className: "contents", children: [
     i > 0 && /* @__PURE__ */ jsx50(MenuSeparator, {}),
     section.label ? /* @__PURE__ */ jsx50("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx50(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
   ] }, section.label ?? i)) }) });
@@ -3702,7 +3763,7 @@ function Panel(props) {
 
 // src/ListColumn.tsx
 import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
-function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }) {
+function Column({ title, chevron = false, titleMenu, actions, above, collapsed = false, children, className, broken = false }) {
   return /* @__PURE__ */ jsxs42(
     "div",
     {
@@ -3714,7 +3775,7 @@ function Column({ title, chevron = false, actions, above, collapsed = false, chi
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx60(ContainerHeader, { title, chevron, actions }),
+        /* @__PURE__ */ jsx60(ContainerHeader, { title, chevron, titleMenu, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).