@crewlethq/ui 0.81.2 → 0.83.0

package/dist/ThreadSummary-AGR4NDMD.css

@@ -0,0 +1,90 @@
+/*
+ * The line under a message that has replies, and the working line under it.
+ */
+
+.crewlet-thread-summary-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  max-width: 100%;
+}
+
+/* No piece is wider than the column: a long working line truncates. */
+.crewlet-thread-summary-wrap > * {
+  max-width: 100%;
+}
+
+/* The faces sit on the content edge: the line's 1px edge and its inset are
+   taken back by the same amount outside it. */
+.crewlet-thread-summary {
+  --crewlet-thread-summary-inset: var(--spacing-1);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  max-width: 100%;
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  margin-inline-start: calc((var(--crewlet-thread-summary-inset) + 1px) * -1);
+  padding: 0 var(--crewlet-thread-summary-inset);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-compact);
+  line-height: 1;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* Lifted onto the transcript's own ground inside a hairline, under the
+   pointer or the keyboard, and while the thread is open. */
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) {
+  border-color: var(--color-edge-hairline);
+  background: var(--crewlet-chat-ground);
+}
+
+.crewlet-thread-summary:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-thread-summary__count {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+/* "Last reply 1h ago" and "View thread" share one cell, so the line keeps
+   its width when one gives way to the other under the pointer. */
+.crewlet-thread-summary__tail {
+  display: inline-grid;
+  min-width: 0;
+  padding-inline-end: var(--spacing-1);
+  white-space: nowrap;
+}
+
+.crewlet-thread-summary__last,
+.crewlet-thread-summary__view {
+  grid-area: 1 / 1;
+}
+
+.crewlet-thread-summary__last {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-thread-summary__view {
+  justify-self: end;
+  visibility: hidden;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) .crewlet-thread-summary__last {
+  visibility: hidden;
+}
+
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) .crewlet-thread-summary__view {
+  visibility: visible;
+}

package/dist/TimeRangePicker/index.js

@@ -1,23 +1,24 @@
-export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-SNIPM6K7.js';
-import '../chunk-C667GCU7.js';
+export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-ZJVLGYE3.js';
+import '../chunk-ZXXZESCD.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.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-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,18 +1,19 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-RIAPCEB5.js';
-import '../chunk-VK45YJLH.js';
-import '../chunk-7KHM2FZH.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-T3S3D4FC.js';
+import '../chunk-3IWZVEXA.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-EE3DJMSQ.js';
-import '../chunk-KHJIEPZV.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.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-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Toaster/index.js

@@ -1,6 +1,6 @@
 export { ToastProvider, Toaster, readingDuration, toasterInsetStyle, useToast } from '../chunk-JIBWNHTC.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Toolbar/index.js

@@ -1,5 +1,5 @@
-export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-NR4CPM4T.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-NXFTCPF6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tooltip/Tooltip.d.ts

@@ -1,11 +1,26 @@
-import { type ReactElement, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';
 export type TooltipPlacement = 'top' | 'bottom';
 /**
  * Where along the trigger the panel lines up: `center` on its middle, or
  * `start` on its leading edge, running toward the inline end.
  */
 export type TooltipAlign = 'center' | 'start';
-export interface TooltipProps {
+/**
+ * Everything a tooltip is handed beyond its own props belongs to its TRIGGER.
+ *
+ * A tooltip stands where a trigger is expected: a `Popover` or a `Menu` clones
+ * its trigger with a ref and its state (`aria-expanded`, `aria-controls`, a
+ * press handler), and when that trigger is `<Tooltip><button /></Tooltip>`
+ * those land on the tooltip. They are merged onto the child: the ref composed
+ * with the child's own and the tooltip's, every handler run after the child's
+ * own, `style` merged, and any other attribute set over the child's, since the
+ * component cloning its trigger is the one that knows the state it names.
+ * `className` is not among them: it is the panel's.
+ */
+type TriggerAttributes = Omit<HTMLAttributes<HTMLElement>, 'content' | 'children' | 'className'>;
+export interface TooltipProps extends TriggerAttributes {
+    /** A ref to the TRIGGER element, composed with the child's own. */
+    ref?: Ref<HTMLElement> | undefined;
     /** One short line. A tooltip is not a place to put a list or a paragraph. */
     content: ReactNode;
     /** The preferred side. It flips when there is not room and there is more room the other way. */
@@ -55,8 +70,20 @@ export interface TooltipProps {
  *   is pressed. NOTHING HIDES IT ON A TIMER: a reader who needs longer than
  *   somebody else's idea of long enough is exactly the reader this is for.
  *
+ * FOCUS HOLDS IT ONLY WHEN IT IS KEYBOARD FOCUS, the focus `:focus-visible`
+ * matches (`isVisibleFocus`). A mouse press focuses a button too, and so does
+ * a layer handing focus back as it closes, so a tip shown for a hover outlived
+ * the hover: press Formatting, move away, and "Hide formatting" stayed on the
+ * screen until something else took focus. Hover still opens it, keyboard
+ * focus still opens it and keeps it, and A PRESS CLOSES IT, as a press on a
+ * control answers its hint; it opens again on the pointer's next arrival.
+ *
  * It is linked by `aria-describedby` rather than `aria-labelledby`: the
  * control has a name already, and replacing it with the hint is how a Close
  * button came to be announced as "Closing is unavailable until this finishes".
+ *
+ * Any other prop, and a ref, belongs to the trigger and is merged onto the
+ * child (see `TriggerAttributes`), so a tooltip can be a Popover's trigger.
  */
-export declare function Tooltip({ content, placement, align, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, placement, align, disabled, openDelay, closeDelay, className, children, ref: forwardedRef, ...forwarded }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/Tooltip/index.js

@@ -1,5 +1,7 @@
-export { Tooltip } from '../chunk-I33UIUZD.js';
+export { Tooltip } from '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,14 +1,17 @@
-export { TreeCanvas } from '../chunk-JQEXAH7G.js';
+export { TreeCanvas } from '../chunk-FPU7AA3X.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-OBPINJNO.js';
+import '../chunk-NCUSI4ZU.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-ANTAQAR4.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,9 +1,9 @@
-export { TreeGrid } from '../chunk-IL3XLDW7.js';
+export { TreeGrid } from '../chunk-ZDWAIVWL.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ValueField/index.js

@@ -1,15 +1,15 @@
-export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-GHQG4VZA.js';
-import '../chunk-VK45YJLH.js';
-import '../chunk-6EWNMSS4.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-FB3TCNQP.js';
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-G3CACE5L.js';
+import '../chunk-3IWZVEXA.js';
+import '../chunk-NNZRTR5M.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare/index.js

@@ -1,20 +1,21 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-Z6JKZI4E.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-RBQRTGXX.js';
 import '../chunk-AOFVXE6V.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.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-LOWQK2PB.js → chunk-22CU7V4J.js}

@@ -1,8 +1,8 @@
-import { HuePicker } from './chunk-HEA6TERQ.js';
-import { Popover } from './chunk-KHJIEPZV.js';
+import { HuePicker } from './chunk-SHH7UD5U.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-I22MUEG7.js';
-import { Avatar } from './chunk-KTIQSSME.js';
+import { CharacterPicker } from './chunk-LNQSNXGJ.js';
+import { Avatar } from './chunk-XZY6S3UC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-POOJUOKC.css';
 import { CREWLET_CHARACTER_GEOMETRY, CREWLET_CHARACTERS } from '@crewlethq/icons/characters';

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-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-FQI62PIZ.js → chunk-2SVQBQAD.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-DRFOTWJE.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-NCUSI4ZU.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-U6LR5F6H.css';

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';