@crewlethq/ui 0.81.1 → 0.82.0

package/dist/VersionCompare/index.js

@@ -1,20 +1,20 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-Z6JKZI4E.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-TGCGLKD4.js';
 import '../chunk-AOFVXE6V.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-GZVAZ3LL.js';
+import '../chunk-HCUECVZ3.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
+import '../chunk-YOJAGKTS.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-OQG4P5KU.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline/index.js

@@ -1,9 +1,9 @@
-export { VersionTimeline } from '../chunk-53J2YNQA.js';
-import '../chunk-N2BF272H.js';
+export { VersionTimeline } from '../chunk-L5VU3LZT.js';
+import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/WidgetFrame/index.js

@@ -1,5 +1,5 @@
-export { WidgetFrame } from '../chunk-S5QJZOPL.js';
-import '../chunk-BRLZXYPA.js';
+export { WidgetFrame } from '../chunk-5K5SZGBI.js';
+import '../chunk-I4IUX3JF.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';

package/dist/{chunk-WCDPFTJZ.js → chunk-25JQNHTC.js}

@@ -4,31 +4,78 @@ import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './SidebarNav-VTQ3G4AE.css';
-import { createContext, useId, useContext, useState } from 'react';
+import './SidebarNav-E7PZGGA6.css';
+import { createContext, useId, useState, useContext } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var GroupLocked = createContext(false);
-function SidebarNav({ label, className, children }) {
-  return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
+var GroupFolded = createContext(false);
+function SidebarNav({ label, dense = false, className, children }) {
+  return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", dense && "crewlet-sidebar-nav--dense", className), "aria-label": label, children });
 }
-function NavGroup({ label, action, locked, className, children }) {
+function NavGroup({
+  label,
+  action,
+  locked,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  className,
+  children
+}) {
   const id = useId();
+  const [ownCollapsed, setOwnCollapsed] = useState(defaultCollapsed);
   const named = label !== void 0 && label !== null && label !== false && label !== "";
   const groupLocked = named && locked !== void 0 && locked !== "";
+  const folds = named && collapsible;
+  const folded = folds && (collapsed ?? ownCollapsed);
+  function toggle() {
+    const next = !folded;
+    if (collapsed === void 0) setOwnCollapsed(next);
+    onCollapsedChange?.(next);
+  }
+  const words = /* @__PURE__ */ jsx(LockedLabel, { reason: groupLocked ? locked : void 0, children: label });
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("crewlet-nav-group", groupLocked && "crewlet-nav-group--locked", className),
+      className: cx(
+        "crewlet-nav-group",
+        groupLocked && "crewlet-nav-group--locked",
+        folded && "crewlet-nav-group--collapsed",
+        className
+      ),
       role: named ? "group" : void 0,
       "aria-labelledby": named ? id : void 0,
       children: [
         named || action ? /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-group__head", children: [
-          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: /* @__PURE__ */ jsx(LockedLabel, { reason: groupLocked ? locked : void 0, children: label }) }) : null,
+          folds ? (
+            /*
+             * THE HEADING IS THE FOLD. Its chevron stands in the glyph column
+             * and its words on the label line, so a folded list's headings
+             * and rows still read as one grid, and the button is named by the
+             * words alone (the chevron is decoration; `aria-expanded` says
+             * which way it points).
+             */
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-nav-group__toggle",
+                id,
+                "aria-expanded": !folded,
+                onClick: toggle,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", children: words })
+                ]
+              }
+            )
+          ) : named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: words }) : null,
           action ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-nav-group__action", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__action-icon", "aria-hidden": true, children: action.icon }) }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx(GroupLocked.Provider, { value: groupLocked, children })
+        /* @__PURE__ */ jsx(GroupLocked.Provider, { value: groupLocked, children: /* @__PURE__ */ jsx(GroupFolded.Provider, { value: folded, children }) })
       ]
     }
   );
@@ -52,6 +99,8 @@ function NavItem({
   current = false,
   disabledReason,
   locked,
+  unread = false,
+  muted = false,
   title,
   onPrefetch,
   renderLink,
@@ -65,10 +114,14 @@ function NavItem({
 }) {
   const id = useId();
   const inLockedGroup = useContext(GroupLocked);
+  const inFoldedGroup = useContext(GroupFolded);
   const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
   const open = expanded ?? ownExpanded;
   const nested = children !== void 0 && children !== null && children !== false;
   const inert = disabledReason !== void 0;
+  const calling = unread && !muted;
+  if (inFoldedGroup && !current && !calling) return null;
+  const state = muted ? ", muted" : calling && !count && !badge ? ", unread" : "";
   function toggle() {
     const next = !open;
     if (expanded === void 0) setOwnExpanded(next);
@@ -80,7 +133,7 @@ function NavItem({
     lead ? " " : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
       /* @__PURE__ */ jsx(LockedLabel, { reason: locked, mark: !inLockedGroup, children: label }),
-      count || badge ? /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken([count, badge]) }) : null
+      count || badge || state ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${spoken([count, badge])}${state}` }) : null
     ] }),
     count ? /* @__PURE__ */ jsx(Figure, { figure: count, mark: count.mark, className: "crewlet-nav-item__count" }) : null,
     badge ? /* @__PURE__ */ jsx(Figure, { figure: badge, className: "crewlet-nav-item__badge" }) : null
@@ -151,25 +204,36 @@ function NavItem({
     // what a screen reader is told from coming apart; a `data-current` beside
     // it would be a second answer to one question, and the first stylesheet to
     // read the wrong one is the one that disagrees.
-    /* @__PURE__ */ jsxs("div", { className: cx("crewlet-nav-item", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-item__head", children: [
-        row,
-        separateToggle ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-nav-item__toggle",
-            "aria-expanded": open,
-            "aria-controls": `${id}-children`,
-            "aria-label": expandLabel ?? (typeof label === "string" ? `${label} sections` : "Sections"),
-            onClick: toggle,
-            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) })
-          }
-        ) : null
-      ] }),
-      inert ? /* @__PURE__ */ jsx(VisuallyHidden, { id: `${id}-reason`, children: disabledReason }) : null,
-      nested ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-item__children", id: `${id}-children`, hidden: !open, children }) : null
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "crewlet-nav-item",
+          calling && "crewlet-nav-item--unread",
+          muted && "crewlet-nav-item--muted",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-item__head", children: [
+            row,
+            separateToggle ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-nav-item__toggle",
+                "aria-expanded": open,
+                "aria-controls": `${id}-children`,
+                "aria-label": expandLabel ?? (typeof label === "string" ? `${label} sections` : "Sections"),
+                onClick: toggle,
+                children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) })
+              }
+            ) : null
+          ] }),
+          inert ? /* @__PURE__ */ jsx(VisuallyHidden, { id: `${id}-reason`, children: disabledReason }) : null,
+          nested ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-item__children", id: `${id}-children`, hidden: !open, children: /* @__PURE__ */ jsx(GroupFolded.Provider, { value: false, children }) }) : null
+        ]
+      }
+    )
   );
 }
 SidebarNav.Group = NavGroup;

package/dist/{chunk-ZKLEAK7M.js → chunk-2H6YDUR5.js}

@@ -1,15 +1,15 @@
-import { Skeleton } from './chunk-BRLZXYPA.js';
-import { PrincipalAvatar } from './chunk-N2BF272H.js';
+import { Skeleton } from './chunk-I4IUX3JF.js';
+import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { Card } from './chunk-4AUTALJA.js';
-import { AvatarStack } from './chunk-BT3GB7HC.js';
-import { ArtifactKindGround } from './chunk-NHLNHH4J.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
+import { Card } from './chunk-U2IQNDDR.js';
+import { AvatarStack } from './chunk-IRONPJB4.js';
+import { ArtifactKindGround } from './chunk-ZB3E2Z4Y.js';
 import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
+import { Checkbox } from './chunk-YQ7Q52XU.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactKinds-3EH4KR3F.css';
 import './ArtifactCard-B2QE5CVL.css';
 import { useId } from 'react';
 import { PinGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-7FF6CZW5.js → chunk-2KJCUCVE.js}

@@ -1,6 +1,6 @@
-import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
-import { tabId } from './chunk-2IIHMJMZ.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
+import { SegmentedControl } from './chunk-GZVAZ3LL.js';
+import { tabId } from './chunk-HCUECVZ3.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';
@@ -20,19 +20,26 @@ var MARKDOWN_FORMATS = [
   "checklist",
   "table"
 ];
-var WRAP = { bold: "**", italic: "_", code: "`" };
+var MARKDOWN_TEXT_FORMATS = ["strikethrough", "quote", "link"];
+var WRAP = { bold: "**", italic: "_", code: "`", strikethrough: "~~" };
 var LINE_MARKER = /^(#{1,6} |- \[[ xX]\] |[-*+] |\d+[.)] )/;
 function insertMarkdown(value, { start, end }, text) {
   const next = value.slice(0, start) + text + value.slice(end);
   const caret = start + text.length;
   return { value: next, selection: { start: caret, end: caret } };
 }
+var QUOTE_MARKER = /^> ?/;
 function formatMarkdown(value, selection, format) {
   switch (format) {
     case "bold":
     case "italic":
     case "code":
+    case "strikethrough":
       return wrap(value, selection, WRAP[format]);
+    case "quote":
+      return prefixLines(value, selection, () => "> ", () => true, QUOTE_MARKER);
+    case "link":
+      return link(value, selection);
     case "heading2":
       return prefixLines(value, selection, () => "## ", (marker) => marker === "## ");
     case "heading3":
@@ -74,18 +81,21 @@ function lineSpan(value, { start, end }) {
   const newline = value.indexOf("\n", last);
   return [from, newline === -1 ? value.length : newline];
 }
-function prefixLines(value, selection, marker, has) {
+function prefixLines(value, selection, marker, has, pattern = LINE_MARKER) {
   const [from, to] = lineSpan(value, selection);
   const lines = value.slice(from, to).split("\n");
   const single = lines.length === 1;
   const written = lines.filter((line) => single || line.trim() !== "");
-  const off = written.length > 0 && written.every((line) => has(LINE_MARKER.exec(line)?.[0] ?? ""));
+  const off = written.length > 0 && written.every((line) => {
+    const existing = pattern.exec(line)?.[0];
+    return existing !== void 0 && has(existing);
+  });
   let index = 0;
   let caretShift = 0;
   const caretLine = value.slice(from, selection.start).split("\n").length - 1;
   const next = lines.map((line, at) => {
     if (!single && line.trim() === "") return line;
-    const old = LINE_MARKER.exec(line)?.[0] ?? "";
+    const old = pattern.exec(line)?.[0] ?? "";
     const body = line.slice(old.length);
     const added = off ? "" : marker(index);
     index += 1;
@@ -100,6 +110,24 @@ function prefixLines(value, selection, marker, has) {
   }
   return { value: result, selection: { start: from, end: from + block.length } };
 }
+var LINK = /^\[([^\]\n]*)\]\(([^)\s]*)\)$/;
+var LINK_ADDRESS = "https://";
+function link(value, selection) {
+  let { start, end } = selection;
+  while (start < end && /\s/.test(value[start] ?? "")) start += 1;
+  while (end > start && /\s/.test(value[end - 1] ?? "")) end -= 1;
+  const selected = value.slice(start, end);
+  const existing = LINK.exec(selected);
+  if (existing) {
+    const label = existing[1] ?? "";
+    return { value: value.slice(0, start) + label + value.slice(end), selection: { start, end: start + label.length } };
+  }
+  const written = `[${selected}](${LINK_ADDRESS})`;
+  const result = value.slice(0, start) + written + value.slice(end);
+  if (selected === "") return { value: result, selection: { start: start + 1, end: start + 1 } };
+  const address = start + selected.length + 3;
+  return { value: result, selection: { start: address, end: address + LINK_ADDRESS.length } };
+}
 var TABLE = "| Column | Column |\n| --- | --- |\n|  |  |";
 function table(value, { start, end }) {
   const before = value.slice(0, start);
@@ -333,4 +361,4 @@ function MarkdownEditor({
   );
 }
 
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords };
+export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords };

package/dist/{chunk-6LXS3X7A.js → chunk-2L4WHYMT.js}

@@ -1,6 +1,6 @@
 import { Table } from './chunk-75NQV4R4.js';
 import { DownloadButton } from './chunk-EHFQMY3B.js';
-import { StatusCard } from './chunk-RTMNULTL.js';
+import { StatusCard } from './chunk-FLW5U7YS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ResultTableCard-AP355LQM.css';
 import { useState } from 'react';

package/dist/{chunk-6G6WHTC7.js → chunk-2O5CMV76.js}

@@ -1,4 +1,4 @@
-import { StatusCard } from './chunk-RTMNULTL.js';
+import { StatusCard } from './chunk-FLW5U7YS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityList-DT3BQLUW.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/chunk-2TOGGCDM.js

@@ -0,0 +1,50 @@
+import { heldHint } from './chunk-TDFLCUBE.js';
+import { emojiName } from './chunk-MPYRC3GO.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
+import { Tooltip } from './chunk-3QQIGMY3.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChatScale-L4SIHSKL.css';
+import './MessageActions-Q4F5UH3S.css';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function MessageActions({ label = "Message actions", className, children }) {
+  return /* @__PURE__ */ jsx(Toolbar, { label, className: cx("crewlet-message-actions", className), children });
+}
+var MessageAction = forwardRef(function MessageAction2({ label, icon, pressed, disabledReason, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: heldHint(label, disabledReason), disabled: rest["aria-expanded"] === true || rest["aria-expanded"] === "true", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...rest,
+      ref,
+      label,
+      icon,
+      size: "md",
+      variant: "ghost",
+      pressed,
+      disabledReason
+    }
+  ) });
+});
+function QuickReaction({ emoji, name, onPick, label = (said) => `React with ${said}`, disabledReason }) {
+  const words = label(name ?? emojiName(emoji));
+  return /* @__PURE__ */ jsx(Tooltip, { content: heldHint(words, disabledReason), children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "crewlet-message-actions__emoji",
+      "aria-label": words,
+      "aria-disabled": disabledReason ? true : void 0,
+      onClick: () => {
+        if (!disabledReason) onPick();
+      },
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji })
+    }
+  ) });
+}
+function ActionDivider() {
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-message-actions__divider", "aria-hidden": "true" });
+}
+
+export { ActionDivider, MessageAction, MessageActions, QuickReaction };

package/dist/{chunk-7PJFUQMY.js → chunk-2ZSCHQOA.js}

@@ -1,5 +1,5 @@
+import { Tag } from './chunk-LBGKLYBY.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
-import { Tag } from './chunk-VERJCAJ4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastBadge-CBZPGG3G.css';

package/dist/chunk-3BRXEMYT.js

@@ -0,0 +1,46 @@
+import { PersonRow } from './chunk-EALRMP7N.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PersonRow-V5GTPNVP.css';
+import './MentionMenu-4NAQ45S4.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var MENTION_MENU_LABELS = {
+  hints: ["\u2191\u2193 to move", "Enter or Tab to choose", "Esc to close"]
+};
+function MentionMenu({ id, label, options, active, onPick, onHover, listRef, footer, labels: overrides, className }) {
+  const labels = overrides ? { ...MENTION_MENU_LABELS, ...overrides } : MENTION_MENU_LABELS;
+  const foot = footer === void 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-mention-menu__footer", children: labels.hints.map((hint) => /* @__PURE__ */ jsx("span", { children: hint }, hint)) }) : footer === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-mention-menu__footer", children: footer });
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-mention-menu", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-mention-menu__label", "aria-hidden": "true", children: label }),
+    /* @__PURE__ */ jsx("ul", { ref: listRef, id, role: "listbox", "aria-label": label, className: "crewlet-mention-menu__list", children: options.map((option, index) => /* @__PURE__ */ jsx(
+      PersonRow,
+      {
+        as: "option",
+        id: `${id}-${index}`,
+        density: "compact",
+        avatar: option.mark,
+        name: option.label,
+        detail: option.detail,
+        meta: option.note,
+        selected: index === active,
+        highlighted: index === active,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          onPick(option, index);
+        },
+        onMouseEnter: () => onHover(index)
+      },
+      option.id
+    )) }),
+    foot
+  ] });
+}
+function mentionQuery(text, caret) {
+  const before = text.slice(0, Math.max(0, Math.min(caret, text.length)));
+  const match = /(^|\s)([@#])([\p{L}\p{N}_-]*)$/u.exec(before);
+  if (!match) return null;
+  const query = match[3] ?? "";
+  return { trigger: match[2], query, start: before.length - query.length - 1 };
+}
+
+export { MENTION_MENU_LABELS, MentionMenu, mentionQuery };

package/dist/{chunk-H22SR76M.js → chunk-3H6OZUZ3.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-VERJCAJ4.js';
+import { Tag } from './chunk-LBGKLYBY.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-VK45YJLH.js → chunk-3IWZVEXA.js}

@@ -1,7 +1,7 @@
-import { useListbox, useOptionKeys, useHighlightRest } from './chunk-7KHM2FZH.js';
+import { useListbox, useOptionKeys, useHighlightRest } from './chunk-YGRTX67J.js';
 import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
-import { useFocusModality, returnFocus } from './chunk-NUZHC6MM.js';
+import { useFocusModality, returnFocus } from './chunk-4ITETIGZ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
 import './Select-6BQPBOHH.css';

package/dist/{chunk-I33UIUZD.js → chunk-3QQIGMY3.js}

@@ -1,5 +1,6 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
-import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
+import { usePopupLayer } from './chunk-TUEM2XIW.js';
+import { isVisibleFocus } from './chunk-4ITETIGZ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tooltip-LKQF7CE4.css';
 import { useId, useState, useRef, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';
@@ -10,6 +11,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function ms(value) {
   return Number.parseFloat(value);
 }
+function composeHandlers(first, second) {
+  if (typeof first !== "function") return second;
+  if (typeof second !== "function") return first;
+  return (...args) => {
+    first(...args);
+    second(...args);
+  };
+}
 function attach(ref, el) {
   if (typeof ref === "function") {
     const release = ref(el);
@@ -33,7 +42,9 @@ function Tooltip({
   openDelay = OPEN_DELAY,
   closeDelay = CLOSE_DELAY,
   className,
-  children
+  children,
+  ref: forwardedRef,
+  ...forwarded
 }) {
   const id = useId();
   const panelId = `${id}-tooltip`;
@@ -41,7 +52,7 @@ function Tooltip({
   const anchor = useRef(null);
   const panel = useRef(null);
   const timer = useRef(void 0);
-  const over = useRef({ pointer: false, focus: false });
+  const over = useRef({ pointer: false, focus: false, pressed: false });
   const [place, setPlace] = useState(null);
   const container = useLayerContainer();
   const clear = useCallback(() => {
@@ -76,7 +87,7 @@ function Tooltip({
     [clear]
   );
   const layer = usePopupLayer({ open, onDismiss: () => {
-    over.current = { pointer: false, focus: false };
+    over.current = { pointer: false, focus: false, pressed: false };
     clear();
     setOpen(false);
   } });
@@ -138,41 +149,65 @@ function Tooltip({
     if (!open) setPlace(null);
   }, [open]);
   const child = children;
-  const describedBy = child.props["aria-describedby"];
+  const outer = forwarded;
+  const passed = { ...outer };
+  for (const key of Object.keys(outer)) {
+    if (/^on[A-Z]/.test(key)) passed[key] = composeHandlers(child.props[key], outer[key]);
+  }
+  if (outer["style"] !== void 0) passed["style"] = { ...child.props["style"], ...outer["style"] };
+  const describedBy = cx(child.props["aria-describedby"], outer["aria-describedby"]) || void 0;
   const ownRef = child.props["ref"];
+  const call = (key, event) => (passed[key] ?? child.props[key])?.(event);
   const trigger = cloneElement(child, {
+    ...passed,
     ref: (el) => {
       anchor.current = el;
       layer.insideRef(el);
       const release = attach(ownRef, el);
+      const releaseForwarded = attach(forwardedRef, el);
       return () => {
         anchor.current = null;
         layer.insideRef(null);
         release();
+        releaseForwarded();
       };
     },
     "aria-describedby": open ? cx(describedBy, panelId) : describedBy,
     onPointerEnter: (event) => {
       over.current.pointer = true;
-      show(openDelay);
-      child.props["onPointerEnter"]?.(event);
+      if (!over.current.pressed) show(openDelay);
+      call("onPointerEnter", event);
     },
     onPointerLeave: (event) => {
       over.current.pointer = false;
+      over.current.pressed = false;
       hide(closeDelay);
-      child.props["onPointerLeave"]?.(event);
+      call("onPointerLeave", event);
+    },
+    // A press answers the tip: it closes at once and stays shut while the
+    // pointer is still on the control, whatever focus the press brought.
+    onPointerDown: (event) => {
+      over.current.pressed = true;
+      over.current.focus = false;
+      clear();
+      setOpen(false);
+      call("onPointerDown", event);
     },
-    // Focus opens with NO delay: a keyboard reader who reached this control
-    // asked for it, and there is no pointer passing over anything.
+    // KEYBOARD focus opens with NO delay: a keyboard reader who reached this
+    // control asked for it, and there is no pointer passing over anything.
+    // Any other focus (a press, a layer handing focus back) neither opens the
+    // tip nor holds it open.
     onFocus: (event) => {
-      over.current.focus = true;
-      show(0);
-      child.props["onFocus"]?.(event);
+      const visible = !over.current.pressed && isVisibleFocus(event.currentTarget);
+      over.current.focus = visible;
+      if (visible) show(0);
+      call("onFocus", event);
     },
     onBlur: (event) => {
       over.current.focus = false;
+      over.current.pressed = false;
       hide(0);
-      child.props["onBlur"]?.(event);
+      call("onBlur", event);
     }
   });
   const style = place ? { left: place.left, top: place.top, zIndex: layer.zIndex } : (

package/dist/{chunk-NUZHC6MM.js → chunk-4ITETIGZ.js}

@@ -64,5 +64,16 @@ function returnFocus(el, options) {
   clear();
   return false;
 }
+function isVisibleFocus(el) {
+  let visible;
+  try {
+    visible = el.matches(":focus-visible");
+  } catch {
+    visible = true;
+  }
+  if (!visible) return false;
+  const pointer = el.ownerDocument.documentElement.getAttribute(FOCUS_MODALITY_ATTRIBUTE) === "pointer";
+  return !(pointer && el.hasAttribute(FOCUS_RETURNED_ATTRIBUTE));
+}
 
-export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality };
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, isVisibleFocus, returnFocus, trackFocusModality, useFocusModality };

package/dist/{chunk-FQI62PIZ.js → chunk-4RYELYWG.js}

@@ -1,6 +1,6 @@
 import { Note } from './chunk-5SZGKSGL.js';
-import { CanvasToolbar, toolForKey } from './chunk-KL6A7JGH.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OBPINJNO.js';
+import { CanvasToolbar, toolForKey } from './chunk-HA2PL7PA.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-SEKO6P3Y.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-U6LR5F6H.css';