@estiva-app/ui 0.66.0 → 0.68.0

package/dist/index.js

@@ -2421,6 +2421,9 @@ function InlineChip({ tone = "neutral", icon, href, className, children, ...prop
   return /* @__PURE__ */ jsx33("a", { href, className: classes, ...props, onClick: inApp, children: body });
 }
 
+// src/RichText.tsx
+import { Fragment as Fragment8 } from "react";
+
 // src/codeColours.ts
 import { createElement } from "react";
 import { common, createLowlight } from "lowlight";
@@ -2438,7 +2441,7 @@ function codeColours(text, language) {
 }
 
 // src/RichText.tsx
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var RICH_TEXT_CLASSES = {
   /* Blocks 8px apart (Katerina, 9 October; 4 before). A list's own items stay together. */
   base: "flex flex-col gap-2 break-words text-text-secondary",
@@ -2466,7 +2469,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). */
@@ -2509,7 +2513,7 @@ function calloutLook(tone) {
   return CALLOUT_TONES.has(named2) ? named2 : "note";
 }
 function Runs({ runs, draw: draw2 }) {
-  return /* @__PURE__ */ jsx34(Fragment8, { children: (runs ?? []).map((run, i) => {
+  return /* @__PURE__ */ jsx34(Fragment9, { children: (runs ?? []).map((run, i) => {
     if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw2.renderReference(run.reference, run) }, i);
     if (run.marks.includes("code")) {
       return /* @__PURE__ */ jsx34("code", { children: run.text }, i);
@@ -2539,8 +2543,12 @@ function Table({ block, draw: draw2 }) {
         colSpan: colspan && colspan > 1 ? colspan : void 0,
         rowSpan: rowspan && rowspan > 1 ? rowspan : void 0,
         children: [
-          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw: draw2 }, j)),
-          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw: draw2 })
+          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsxs25(Fragment8, { children: [
+            /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw: draw2 }),
+            draw2.renderAfter?.(child)
+          ] }, j)),
+          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw: draw2 }),
+          draw2.renderAfter?.(cell)
         ]
       },
       cell.id ?? i
@@ -2558,6 +2566,7 @@ function ListItem({ item, draw: draw2, below }) {
   if (typeof item.checked !== "boolean") {
     return /* @__PURE__ */ jsxs25("li", { "data-block-id": item.id, children: [
       /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw: draw2 }),
+      draw2.renderAfter?.(item),
       below
     ] });
   }
@@ -2569,6 +2578,7 @@ function ListItem({ item, draw: draw2, below }) {
     /* @__PURE__ */ jsx34("span", { "data-checklist-box": "", ...control ? {} : { role: "checkbox", "aria-checked": item.checked, "aria-readonly": true, "aria-label": name }, children: /* @__PURE__ */ jsx34(Checkbox, { checked: item.checked, onChange: control, "aria-label": name }) }),
     /* @__PURE__ */ jsxs25("div", { children: [
       /* @__PURE__ */ jsx34("p", { children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw: draw2 }) }),
+      draw2.renderAfter?.(item),
       below
     ] })
   ] });
@@ -2590,6 +2600,16 @@ function nestItems(items) {
 function Block({ block, draw: draw2 }) {
   const own = draw2.renderBlock?.(block);
   if (own !== void 0) return own;
+  const drawn = Drawn({ block, draw: draw2 });
+  const lineOfWords = block.type === "paragraph" || block.type === "heading" || block.type === "blockquote";
+  const after = lineOfWords ? draw2.renderAfter?.(block) : void 0;
+  if (after === void 0 || after === null || after === false) return drawn;
+  return /* @__PURE__ */ jsxs25(Fragment9, { children: [
+    drawn,
+    after
+  ] });
+}
+function Drawn({ block, draw: draw2 }) {
   const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw: draw2 });
   switch (block.type) {
     case "heading": {
@@ -2637,10 +2657,11 @@ function RichText({
   renderText = (text) => text,
   renderReference = (_reference, run) => run.text,
   renderBlock,
+  renderAfter,
   onTick
 }) {
   if (blocks.length === 0) return null;
-  const draw2 = { renderText, renderReference, renderBlock, onTick };
+  const draw2 = { renderText, renderReference, renderBlock, renderAfter, onTick };
   return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw: draw2 }, block.id ?? i)) });
 }
 
@@ -2737,7 +2758,7 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
   return /* @__PURE__ */ jsx38(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx38(IdentityRows, { ...rest, onClose }) });
@@ -2748,7 +2769,7 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
     /* @__PURE__ */ jsxs28(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
       /* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx38(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
       /* @__PURE__ */ jsx38(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
@@ -2757,14 +2778,14 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    relayUrl && /* @__PURE__ */ jsxs28(Fragment10, { children: [
       /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
       /* @__PURE__ */ jsxs28(MenuSection, { label: "Workspace", children: [
         /* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
         /* @__PURE__ */ jsx38(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    appRows && /* @__PURE__ */ jsxs28(Fragment10, { children: [
       /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
@@ -3019,7 +3040,7 @@ var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
 
 // src/ConfirmDialog.tsx
 import { useState as useState6 } from "react";
-import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState6(false);
   const confirm = async () => {
@@ -3037,7 +3058,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       alert: true,
       title,
       onClose,
-      footer: /* @__PURE__ */ jsxs30(Fragment10, { children: [
+      footer: /* @__PURE__ */ jsxs30(Fragment11, { children: [
         /* @__PURE__ */ jsx43(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
         /* @__PURE__ */ jsx43(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
@@ -3209,7 +3230,7 @@ function ProgressBar({ value, max, label, variant = "default", className }) {
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment11, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState8 } from "react";
+import { Fragment as Fragment12, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState8 } from "react";
 import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef10(null);
@@ -3253,7 +3274,7 @@ function Breadcrumb({ items, className }) {
       // truncates and is measured.
       /* @__PURE__ */ jsx47("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx47(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
     ) : /* @__PURE__ */ jsx47("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs31(Fragment12, { children: [
       index > 0 && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
       item.icon && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       truncated.has(index) ? (
@@ -3288,6 +3309,7 @@ function NavItem({
   icon,
   menu,
   menuLabel,
+  action,
   hint,
   unread = false,
   urgent = false,
@@ -3308,9 +3330,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 +3350,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 +3370,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 +3390,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 +3419,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 +3427,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: [
@@ -3438,7 +3467,7 @@ import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight3, IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, count, actions, menu, menuLabel, showActions = "hover", hover = "fill", look = "heading", render, className }) {
   const row = look === "row";
   const acts = actions && actions.length > 0 || menu != null;
@@ -3452,7 +3481,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
       // row itself carried the click.
       // 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__ */ jsxs33(Fragment12, { children: [
+      children: /* @__PURE__ */ jsxs33(Fragment13, { children: [
         icon != null ? /* @__PURE__ */ jsxs33("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
           /* @__PURE__ */ jsx50("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
           chevron && /* @__PURE__ */ jsx50(
@@ -3566,7 +3595,7 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 }
 
 // src/NavTree.tsx
-import { Fragment as Fragment13, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var NAV_TREE_INTENT_MS = 150;
 function holds(nodes, id) {
   return !!nodes && id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? null, id));
@@ -3656,7 +3685,7 @@ function NavTreeSection({ id, title, message, loading = false, pending, trailing
   );
 }
 function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = "", storageKey }) {
-  return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment14, { children: [
     title && /* @__PURE__ */ jsx52(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
     groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
       // No words, no line: an app that says nothing when it has no groups.
@@ -4176,7 +4205,7 @@ function ListColumn(props) {
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { Fragment as Fragment14, jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
   return /* @__PURE__ */ jsx66(
     BaseTabs.Root,
@@ -4210,7 +4239,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
                   tab.label,
                   tab.count !== void 0 ? /* @__PURE__ */ jsx66("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] }),
-                tab.unread ? /* @__PURE__ */ jsxs46(Fragment14, { children: [
+                tab.unread ? /* @__PURE__ */ jsxs46(Fragment15, { children: [
                   /* @__PURE__ */ jsx66(UnreadDot, { className: "h-auto w-auto" }),
                   /* @__PURE__ */ jsx66("span", { className: "sr-only", children: "new" })
                 ] }) : null