@estiva-app/ui 0.66.0 → 0.67.0

package/dist/index.js

@@ -2466,7 +2466,8 @@ var RICH_TEXT_CLASSES = {
   syntax: "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
   /* A divider splits the text in two: 16px either side (Katerina, 9 October; 4 before). */
   divider: "[&_hr]:my-2 [&_hr]:border-border-default",
-  table: "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
+  /* A table 16px above and below, as a divider (Katerina, 14 October; 8 before): the editor's row ➕ sits in that room, not over the next line. */
+  table: "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
   /* Bold in the heading colour, not only heavier. An underlined word draws a faint line, so it does not read as a link (Katerina, 9 October). */
   marks: "[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2",
   /* Lines 1.5 apart (Katerina, 9 October; 1.4 before). */
@@ -3288,6 +3289,7 @@ function NavItem({
   icon,
   menu,
   menuLabel,
+  action,
   hint,
   unread = false,
   urgent = false,
@@ -3308,9 +3310,10 @@ function NavItem({
     setOpenState(next);
     onOpenChange?.(next);
   };
-  const besides = menu != null || hasRows;
+  const buttons = (menu != null ? 1 : 0) + (action ? 1 : 0);
+  const besides = buttons > 0 || hasRows;
   const mark = unread ? urgent ? /* @__PURE__ */ jsx49(UrgentMark, {}) : /* @__PURE__ */ jsx49(UnreadDot, {}) : null;
-  const stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
+  const stepsAside = buttons > 0 && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
   const row = /* @__PURE__ */ jsxs32(
     "a",
     {
@@ -3327,7 +3330,7 @@ function NavItem({
         // look while the ⋮ is pointed at and while its menu is open. The same
         // for the arrow.
         besides && !active && "group-hover/nav:bg-bg-hover group-hover/nav:text-text-primary",
-        menu != null && !active && "group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:bg-bg-hover group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:text-text-primary",
+        buttons > 0 && !active && "group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:bg-bg-hover group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:text-text-primary",
         className
       ),
       ...props,
@@ -3347,6 +3350,9 @@ function NavItem({
         /* @__PURE__ */ jsx49("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
         hint != null && // Takes room only while it shows, so the label gives way to it.
         /* @__PURE__ */ jsx49("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
+        buttons > 1 && // Two buttons: the second one's room (24px and the 4px between them, the
+        // row's 8px gap making up the rest), kept only while they show.
+        /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "hidden w-5 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" }),
         count ? /* @__PURE__ */ jsx49(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx49(
           "span",
           {
@@ -3364,7 +3370,7 @@ function NavItem({
           // of the ⋮ (8px from the edge to the 16px box), one column with a
           // folder heading's dot and ⋮ (Katerina, 5 October).
           /* @__PURE__ */ jsx49("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
-        ) : menu != null && !count ? (
+        ) : buttons > 0 && !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.
@@ -3393,7 +3399,7 @@ function NavItem({
         children: /* @__PURE__ */ jsx49(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
       }
     ) }),
-    menu != null && // `right-1`: the 24px button's 16px icon ends 8px from the row's
+    buttons > 0 && // `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
@@ -3401,14 +3407,17 @@ function NavItem({
     // right of the slot's centre.
     // On a screen with no hover it always shows: nothing there can point
     // at the row, and the menu has no other way in.
-    /* @__PURE__ */ jsx49("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx49(
-      Menu,
-      {
-        align: "right",
-        trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx49(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
-        children: menu
-      }
-    ) })
+    /* @__PURE__ */ jsxs32("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center gap-1", "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: [
+      action && /* @__PURE__ */ jsx49(IconButton, { tooltip: action.tooltip, "aria-label": `${action.tooltip}: ${label}`, onClick: action.onClick, children: action.icon }),
+      menu != null && /* @__PURE__ */ jsx49(
+        Menu,
+        {
+          align: "right",
+          trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx49(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
+          children: menu
+        }
+      )
+    ] })
   ] });
   if (!hasRows) return line;
   return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [