@crewlethq/ui 0.31.1 → 0.33.0

package/dist/{chunk-JQLTG4KH.js → chunk-ORT5IKHP.js}

@@ -1,14 +1,14 @@
-import { Select } from './chunk-FC4YTTFJ.js';
+import { Select } from './chunk-UQGFHNDI.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
-import { Callout } from './chunk-SVSCLHHI.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { Modal } from './chunk-XEGZHHRH.js';
+import { Callout } from './chunk-SZZRIHGT.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ShareDialog-YZ4F37MW.css';
+import './ShareDialog-4QDCBWMH.css';
 import { useState, useId } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { XGlyph } from '@crewlethq/icons/glyphs';
@@ -43,6 +43,7 @@ var LABELS = {
   },
   roleFor: (name) => `Role for ${name}`,
   remove: (name) => `Remove ${name}`,
+  noAccess: "No access",
   saving: "Saving",
   busy: "Wait for the change to finish.",
   agentNote: (name, role) => `${name} can ${AGENT_CAN[role]}.`,
@@ -143,52 +144,62 @@ function ShareDialog({
           /* @__PURE__ */ jsx(Heading, { id: audienceId, className: "crewlet-share-dialog__heading", children: text.audience }),
           /* @__PURE__ */ jsx("ul", { className: "crewlet-share-dialog__audience", children: audience.map((row) => {
             const direct = row.via === void 0 && row.role !== "owner";
-            const editable = !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
-            const removable = !readOnly && onRemove !== void 0 && (row.removable ?? (row.editable ?? direct));
-            const rowNote = row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
+            const invalid = row.invalid !== void 0 && row.invalid !== "";
+            const editable = !invalid && !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
+            const removable = !readOnly && onRemove !== void 0 && (invalid ? row.removable ?? true : row.removable ?? (row.editable ?? direct));
+            const rowNote = invalid ? void 0 : row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
             const detail = row.via ?? row.principal.detail;
-            return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-share-dialog__row", row.pending && "is-pending"), "aria-busy": row.pending || void 0, children: [
-              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
-                /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
-                  row.principal.name,
-                  row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
-                    " ",
-                    text.you
-                  ] }) : null
-                ] }),
-                detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
-                row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
-                editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    value: row.role,
-                    options: roleOptions,
-                    onChange: (value) => onRoleChange(row, value),
-                    ariaLabel: text.roleFor(row.principal.name),
-                    disabled: row.pending ?? false,
-                    size: "sm",
-                    width: "auto",
-                    align: "right"
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: text.roles[row.role] }),
-                removable ? /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    label: text.remove(row.principal.name),
-                    icon: /* @__PURE__ */ jsx(XGlyph, {}),
-                    size: "sm",
-                    variant: "ghost",
-                    disabledReason: row.pending ? text.busy : void 0,
-                    onClick: () => onRemove(row)
-                  }
-                ) : null
-              ] }),
-              rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
-              /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
-            ] }, row.id);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cx("crewlet-share-dialog__row", row.pending && "is-pending", invalid && "is-invalid"),
+                "aria-busy": row.pending || void 0,
+                children: [
+                  /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
+                      row.principal.name,
+                      row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
+                        " ",
+                        text.you
+                      ] }) : null
+                    ] }),
+                    detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
+                    row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
+                    editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: row.role,
+                        options: roleOptions,
+                        onChange: (value) => onRoleChange(row, value),
+                        ariaLabel: text.roleFor(row.principal.name),
+                        disabled: row.pending ?? false,
+                        size: "sm",
+                        width: "auto",
+                        align: "right"
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: invalid ? text.noAccess : text.roles[row.role] }),
+                    removable ? /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        label: text.remove(row.principal.name),
+                        icon: /* @__PURE__ */ jsx(XGlyph, {}),
+                        size: "sm",
+                        variant: "ghost",
+                        disabledReason: row.pending ? text.busy : void 0,
+                        onClick: () => onRemove(row)
+                      }
+                    ) : null
+                  ] }),
+                  rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
+                  invalid ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__invalid", children: row.invalid }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
+                ]
+              },
+              row.id
+            );
           }) })
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": companyId, "aria-busy": companyPending || void 0, children: [

package/dist/{chunk-4KWOKX2B.js → chunk-OSKJZNBT.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/{chunk-EHQTPVV4.js → chunk-PLTCDSTU.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { EmptyState } from './chunk-RA2ULG6H.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-5OM447RW.js → chunk-PZKHBB7D.js}

@@ -20,7 +20,7 @@ function avatarInitialsName(name, kind) {
 var AVATAR_CHARACTER_FULL_DETAIL = 56;
 var getInitials = (name) => {
   if (!name) return "?";
-  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  const words = name.trim().split(/[\s\-_.:]+/).map((word2) => word2.replace(/^\p{P}+|\p{P}+$/gu, "")).filter(Boolean);
   if (words.length === 0) return "?";
   const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
   if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";

package/dist/{chunk-VEB5ERRE.js → chunk-QWNVSR6G.js}

@@ -1,6 +1,6 @@
 import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-MY374UUD.js';
-import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
-import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
+import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-IG75YMUN.js → chunk-RTPQDNW3.js}

@@ -1,6 +1,6 @@
 import { useCallback, useSyncExternalStore } from 'react';
 
-// src/utils/useMediaMatch.ts
+// src/MediaMatch/useMediaMatch.ts
 function useMediaMatch(query) {
   const subscribe = useCallback(
     (notify) => {

package/dist/{chunk-SVSCLHHI.js → chunk-SZZRIHGT.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Callout-SXXK4B5R.css';
+import './Callout-ZAVG3P66.css';
 import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-EBNI36UQ.js → chunk-T46NR3WP.js}

@@ -1,10 +1,10 @@
-import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-GCM4TDVY.css';
+import './AppShell-JTSEOA57.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-FPS3JIPQ.js → chunk-TC7DJTXI.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './EditingStatus-L6THUAN7.css';
+import './EditingStatus-NNA2CKIL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LABELS = {

package/dist/{chunk-W5J7R5EB.js → chunk-TEUQWOWZ.js}

@@ -30,7 +30,7 @@ var Placeholder = ({
           style: {
             height: typeof height === "number" ? `${height}px` : height,
             width: typeof width === "number" ? `${width}px` : width,
-            borderRadius: `${borderRadius}px`
+            borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius
           },
           children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__glow-wave" })
         }

package/dist/chunk-THROPJZC.js

@@ -0,0 +1,115 @@
+import { SlideNav } from './chunk-6VOS2GMB.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-LV4APO72.js';
+import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenterView-T3EXIQ5S.css';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  current: (position, total, title) => `Slide ${position} of ${total}, ${title}`,
+  next: (title) => `Next, ${title}`,
+  onScreen: "Current",
+  upNext: "Next",
+  end: "End of the deck",
+  notes: "Speaker notes",
+  noNotes: "No notes for this slide.",
+  timer: "Time presenting",
+  pause: "Pause",
+  resume: "Resume",
+  reset: "Reset",
+  previous: "Previous slide",
+  forward: "Next slide",
+  position: (position, total) => `${position} of ${total}`
+};
+function formatStopwatch(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function PresenterView({
+  current,
+  currentTitle,
+  next,
+  nextTitle = "",
+  notes,
+  position,
+  total,
+  onNext,
+  onPrevious,
+  now = Date.now,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const clock = useRef(now);
+  clock.current = now;
+  const [banked, setBanked] = useState(0);
+  const [runningSince, setRunningSince] = useState(() => now());
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (runningSince === null) return void 0;
+    const id = setInterval(() => setTick((t) => t + 1), 1e3);
+    return () => clearInterval(id);
+  }, [runningSince]);
+  const elapsed = banked + (runningSince === null ? 0 : clock.current() - runningSince);
+  const pause = () => {
+    if (runningSince === null) {
+      setRunningSince(clock.current());
+    } else {
+      setBanked(elapsed);
+      setRunningSince(null);
+    }
+  };
+  const reset = () => {
+    setBanked(0);
+    setRunningSince(runningSince === null ? null : clock.current());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-presenter", className),
+      style: { "--crewlet-presenter-ratio": SLIDE_WIDTH / SLIDE_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__main", "aria-label": text.onScreen, children: [
+          /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.onScreen }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__screen", children: [
+            /* @__PURE__ */ jsx(SlideStage, { label: text.current(position, total, currentTitle), framed: true, children: current }),
+            /* @__PURE__ */ jsx(
+              SlideNav,
+              {
+                className: "crewlet-presenter__controls",
+                position,
+                total,
+                onPrevious,
+                onNext,
+                labels: { previous: text.previous, next: text.forward, end: text.end, position: text.position }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("aside", { className: "crewlet-presenter__side", children: [
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__next", "aria-label": text.upNext, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.upNext }),
+            next ? /* @__PURE__ */ jsx(SlideStage, { label: text.next(nextTitle), framed: true, children: next }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__end", children: text.end })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__timer", children: [
+            /* @__PURE__ */ jsx("span", { role: "timer", "aria-label": text.timer, className: "crewlet-presenter__elapsed", children: formatStopwatch(elapsed) }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: pause, children: runningSince === null ? text.resume : text.pause }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: reset, children: text.reset })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__notes", "aria-label": text.notes, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.notes }),
+            /* @__PURE__ */ jsx("div", { className: "crewlet-presenter__notes-body", children: notes ? /* @__PURE__ */ jsx("p", { children: notes }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__empty", children: text.noNotes }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PresenterView, formatStopwatch };

package/dist/{chunk-IDBHX5SR.js → chunk-TRQCHF2F.js}

@@ -1,4 +1,4 @@
-import { readMarkdown, writeMarkdown } from './chunk-YFW4MTK4.js';
+import { readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
 
 // src/RichEditor/roundtrip.ts
 function roundTripMarkdown(markdown) {

package/dist/{chunk-M3LUNN7F.js → chunk-TYKQ33CL.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Document-G3YTZIUL.css';
+import './Document-JUGCSQ4L.css';
 import { jsx } from 'react/jsx-runtime';
 
 function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
@@ -20,5 +20,16 @@ function Document({ as: Tag = "div", size = "md", measure = "normal", className,
 function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
   return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
 }
+function DocumentTitleField({ error = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      type: "text",
+      "aria-invalid": error || void 0,
+      className: cx("crewlet-document-title", "crewlet-document-title-field", className)
+    }
+  );
+}
 
-export { Document, DocumentTitle };
+export { Document, DocumentTitle, DocumentTitleField };

package/dist/{chunk-VVRL27HM.js → chunk-ULPL26BU.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-I3KKZ2O3.js';
+import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
@@ -6,7 +6,7 @@ import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-HBTNKHZQ.css';
+import './CommandPalette-7CFGVBND.css';
 import { useId, useMemo, useRef, useEffect, useState } from 'react';
 import { ChevronLeftGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-6AH2XJ3Q.js → chunk-UNXLTJU7.js}

@@ -1,8 +1,8 @@
-import { Document } from './chunk-M3LUNN7F.js';
-import { ArtifactKindGlyph } from './chunk-GOSQXEZU.js';
+import { Document } from './chunk-TYKQ33CL.js';
+import { ArtifactKindGlyph } from './chunk-DFZMYB5X.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
-import './DashboardCover-RMINBODB.css';
+import './DashboardCover-KYGYMRKW.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function DocCover({ children, className }) {

package/dist/{chunk-FC4YTTFJ.js → chunk-UQGFHNDI.js}

@@ -1,5 +1,5 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
-import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Select-2P7AWUE4.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
@@ -310,8 +310,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close(panel.current?.contains(document.activeElement) ?? false);
       return;
     }

package/dist/{chunk-EBJREOKS.js → chunk-UXXJDIYE.js}

@@ -1,14 +1,14 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Modal } from './chunk-XEGZHHRH.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-WZK3V62B.css';
+import './DataTable-NL2YWAIA.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-5LUI3WQP.js → chunk-V43UVX4H.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-W4XYY73O.js → chunk-VHZ3AXJD.js}

@@ -1,5 +1,5 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-HJEVSQN6.js → chunk-VL6CUNSX.js}

@@ -2,8 +2,8 @@ import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-CJGO35BH.css';
-import React, { useRef, useLayoutEffect } from 'react';
+import './Tabs-MMZXV5EF.css';
+import React, { useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function tabId(panelId, value) {
@@ -26,9 +26,12 @@ function Tabs({
   value,
   onValueChange,
   panelId,
-  renderItem
+  renderItem,
+  trailing,
+  ref
 }) {
   const navRef = useRef(null);
+  useImperativeHandle(ref, () => navRef.current, []);
   const { buttons, onKeyDown } = useRoving(items.length, null);
   useLayoutEffect(() => {
     if (variant !== "underline") return;
@@ -81,7 +84,7 @@ function Tabs({
       item.marker ? item.marker.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.marker.count }),
         /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label })
-      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null && item.count !== "" ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
     ] });
     const onSelect = () => {
       if (item.disabled) return;
@@ -112,7 +115,10 @@ function Tabs({
     );
   });
   if (renderItem) {
-    return /* @__PURE__ */ jsx("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: rows });
+    return /* @__PURE__ */ jsxs("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: [
+      rows,
+      trailing
+    ] });
   }
   return /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
 }

package/dist/{chunk-XDTYBF2F.js → chunk-W5XCNEZC.js}

@@ -32,5 +32,43 @@ function useFullscreen(ref) {
   }, [enter, exit, ref]);
   return { supported, active, enter, exit, toggle };
 }
+var IDLE_AFTER_MS = 2500;
+function useIdle(ref, enabled, timeout = IDLE_AFTER_MS) {
+  const [idle, setIdle] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) {
+      setIdle(false);
+      return void 0;
+    }
+    let timer;
+    const rest = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const focused = document.activeElement;
+        if (focused instanceof HTMLElement && focused !== el && el.contains(focused) && focused.matches(":focus-visible")) {
+          rest();
+          return;
+        }
+        setIdle(true);
+      }, timeout);
+    };
+    const wake = () => {
+      setIdle(false);
+      rest();
+    };
+    rest();
+    el.addEventListener("pointermove", wake);
+    el.addEventListener("pointerdown", wake);
+    el.addEventListener("focusin", wake);
+    return () => {
+      clearTimeout(timer);
+      el.removeEventListener("pointermove", wake);
+      el.removeEventListener("pointerdown", wake);
+      el.removeEventListener("focusin", wake);
+    };
+  }, [ref, enabled, timeout]);
+  return enabled && idle;
+}
 
-export { useFullscreen };
+export { IDLE_AFTER_MS, useFullscreen, useIdle };

package/dist/{chunk-LDJ3J4TQ.js → chunk-WGD2HX2A.js}

@@ -1,4 +1,4 @@
-import { Callout } from './chunk-SVSCLHHI.js';
+import { Callout } from './chunk-SZZRIHGT.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-FQCLKD7U.js → chunk-WKEPORNM.js}

@@ -1,2 +1,2 @@
-import './Tabs-CJGO35BH.css';
+import './Tabs-MMZXV5EF.css';
 import './SegmentedControl-FLI45IOW.css';