@estiva-app/ui 0.56.0 → 0.57.1

package/dist/index.js

@@ -289,10 +289,10 @@ 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 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 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
@@ -1603,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,
@@ -1959,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
@@ -2526,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,
@@ -2999,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-has-[:focus-visible]/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",
     {
@@ -3055,7 +3055,10 @@ function NavItem({
           // 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-has-[:focus-visible]/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
       ]
     }
@@ -3083,7 +3086,9 @@ function NavItem({
     // (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.
-    /* @__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"), children: /* @__PURE__ */ jsx45(
+    // 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",
@@ -3118,16 +3123,14 @@ import { useState as useState9 } from "react";
 import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 
 // src/SectionHeader.tsx
-import { isValidElement as isValidElement2 } from "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, 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 dot = isValidElement2(trailing) && trailing.type === UnreadDot;
-  const shared = acts && showActions === "hover" && dot;
-  const reveal = showActions === "hover" && "opacity-0 transition-opacity group-hover:opacity-100 has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100";
+  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: {
@@ -3166,7 +3169,8 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
     "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",
@@ -3182,29 +3186,22 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
       ),
       children: [
         titleElement,
-        trailing != null && !shared && // A dot with no buttons to share a place with still sits on their
-        // axis — the rows' dots and ⋮ (`-mr-1`, as the buttons are pulled).
-        /* @__PURE__ */ jsx46("div", { className: cn("flex shrink-0 items-center", dot && !acts && "-mr-1"), children: trailing }),
-        acts && /* @__PURE__ */ jsxs31(
+        trailing != null && /* @__PURE__ */ jsx46("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
+        acts && /* @__PURE__ */ jsx46(
           "div",
           {
-            className: "group/acts relative -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
-                  }
-                ) })
-              ] }),
-              shared && // The dot in the last button's 24px place, on the axis of its icon;
-              // gone while the buttons show.
-              /* @__PURE__ */ jsx46("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex w-6 items-center justify-center transition-opacity group-hover:opacity-0 group-has-[:focus-visible]/acts:opacity-0 group-has-[[aria-expanded=true]]/acts:opacity-0", children: trailing })
-            ]
+            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
+                }
+              ) })
+            ] })
           }
         )
       ]
@@ -3313,7 +3310,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
   return /* @__PURE__ */ jsx48(
     "div",
     {
-      className: "mt-1 shrink-0 first:mt-0",
+      className: "shrink-0 [&+&]:mt-1",
       "data-nav-group": id,
       onPointerEnter: intent ? () => {
         clearTimeout(timer.current);
@@ -3492,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)) }) });