@crewlethq/ui 0.81.2 → 0.83.0

package/dist/{chunk-D7G2QGET.js → chunk-X3US25XJ.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-VERJCAJ4.js';
+import { Tag } from './chunk-LBGKLYBY.js';
 import './PricingCard-BXMLP7KD.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-GPFYITOF.js → chunk-X7VZQKIW.js}

@@ -1,5 +1,5 @@
 import { StepStateMark } from './chunk-RJWO2PC5.js';
-import { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
+import { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './RunChip-K5DGHXHO.css';

package/dist/{chunk-L4HHWG4V.js → chunk-XA2QKGBJ.js}

@@ -1,7 +1,7 @@
-import { Toolbar } from './chunk-NR4CPM4T.js';
-import { announce } from './chunk-2G355KDJ.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
 import { Button } from './chunk-DGXZ635L.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SelectionBar-SCAU6EBY.css';
 import { useRef, useEffect } from 'react';

package/dist/{chunk-DV5L2GRY.js → chunk-XJMES7AE.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-RMEBFYL7.js';
+import { SlideStage } from './chunk-O6EV6GKI.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-5NJMSYDZ.js → chunk-XNC3M4IN.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
+import { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-D727FN5X.css';

package/dist/{chunk-B2YSFWUG.js → chunk-XRWHDW6F.js}

@@ -1,17 +1,17 @@
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { FilterPill } from './chunk-K4LZXSKZ.js';
-import { DateTimePicker } from './chunk-HPI5J6AR.js';
-import { DataTable } from './chunk-CZQ7UITX.js';
-import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
-import { Toolbar } from './chunk-NR4CPM4T.js';
-import { Popover } from './chunk-KHJIEPZV.js';
+import { DateTimePicker } from './chunk-7K6LVM5I.js';
+import { DataTable } from './chunk-WANKINXG.js';
+import { useListbox, useOptionKeys } from './chunk-YGRTX67J.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
-import { Input } from './chunk-FB3TCNQP.js';
-import { Count } from './chunk-MLDTLZAO.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Menu } from './chunk-TGGYSQRD.js';
+import { Input } from './chunk-O7N6W52M.js';
+import { Kbd } from './chunk-CMAZZY2I.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-L7HLNW7C.css';

package/dist/{chunk-TKUAGWNR.js → chunk-XTJHMP3W.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-3XDT5ZWL.js';
-import { useReorder } from './chunk-MPVMB2DV.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
+import { useReorder } from './chunk-BVML4UVB.js';
+import { Checkbox } from './chunk-YQ7Q52XU.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-KTIQSSME.js → chunk-XZY6S3UC.js}

@@ -1,6 +1,7 @@
 import { cx } from './chunk-ODEQTPFM.js';
 import { useState, useEffect } from 'react';
 import { CrewletCharacter } from '@crewlethq/icons/characters';
+import { radius } from '@crewlethq/tokens';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var AVATAR_STATUSES = ["working", "needs", "stopped"];
@@ -11,7 +12,9 @@ var AVATAR_STATUS_LABELS = {
 };
 var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
 var TEXT_FACE_PIXELS = 16;
-var AVATAR_CORNER_RATIO = 0.29;
+var AVATAR_CORNER_RATIO = 2 / 9;
+var radiusPixels = (value) => Number.parseFloat(value);
+var AVATAR_CORNER_RANGE = { min: radiusPixels(radius.xs), max: radiusPixels(radius.lg) };
 var AGENT_WORD = /^agent(?:[\s._-]+)(?=\S)/i;
 function avatarInitialsName(name, kind) {
   if (name === void 0 || kind !== "agent") return name;
@@ -43,7 +46,7 @@ function avatarPixels(size) {
   return typeof size === "number" ? size : AVATAR_SIZES[size];
 }
 function avatarCorner(pixels) {
-  return pixels * AVATAR_CORNER_RATIO;
+  return Math.min(AVATAR_CORNER_RANGE.max, Math.max(AVATAR_CORNER_RANGE.min, pixels * AVATAR_CORNER_RATIO));
 }
 var Avatar = ({
   src,
@@ -186,4 +189,4 @@ var STATUS_GLYPHS = {
   stopped: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", focusable: "false", children: /* @__PURE__ */ jsx("rect", { x: "4.6", y: "4.6", width: "4.8", height: "4.8", rx: ".7", fill: "currentColor" }) })
 };
 
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials };
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RANGE, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials };

package/dist/{chunk-7KHM2FZH.js → chunk-YGRTX67J.js}

@@ -1,4 +1,4 @@
-import { usePopupLayer, isComposing } from './chunk-H5XTJ7GJ.js';
+import { usePopupLayer, isComposing } from './chunk-TUEM2XIW.js';
 import './Listbox-NQV6E3FS.css';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 

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

@@ -18,5 +18,9 @@ function useMediaMatch(query) {
   );
   return useSyncExternalStore(subscribe, read, () => false);
 }
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion(view = typeof window === "undefined" ? null : window) {
+  return view?.matchMedia?.(REDUCED_MOTION_QUERY).matches ?? false;
+}
 
-export { useMediaMatch };
+export { REDUCED_MOTION_QUERY, prefersReducedMotion, useMediaMatch };

package/dist/chunk-YP2FS6SH.js

@@ -0,0 +1,54 @@
+import { Tag } from './chunk-LBGKLYBY.js';
+import { AvatarStack } from './chunk-IRONPJB4.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChatScale-L4SIHSKL.css';
+import './ThreadSummary-AGR4NDMD.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var THREAD_SUMMARY_LABELS = {
+  replies: (count) => count === 1 ? "1 reply" : `${count.toLocaleString()} replies`,
+  fresh: (count) => `${count.toLocaleString()} new`,
+  last: (when) => `Last reply ${when}`,
+  view: "View thread",
+  open: "Thread open"
+};
+function ThreadSummary({
+  replies,
+  participants,
+  last,
+  unread = 0,
+  working,
+  open = false,
+  onOpen,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...THREAD_SUMMARY_LABELS, ...overrides } : THREAD_SUMMARY_LABELS;
+  const count = labels.replies(replies);
+  const fresh = unread > 0 ? labels.fresh(unread) : null;
+  const when = labels.last(last);
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-thread-summary-wrap", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cx("crewlet-thread-summary", open && "is-open"),
+        "aria-label": [count, fresh, when].filter(Boolean).join(", "),
+        "aria-expanded": open,
+        onClick: onOpen,
+        children: [
+          /* @__PURE__ */ jsx(AvatarStack, { members: participants, size: "xs", max: 3, decorative: true }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-thread-summary__count", children: count }),
+          fresh ? /* @__PURE__ */ jsx(Tag, { size: "xs", variant: "brand", children: fresh }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-thread-summary__tail", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-thread-summary__last", children: when }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-thread-summary__view", children: open ? labels.open : labels.view })
+          ] })
+        ]
+      }
+    ),
+    working
+  ] });
+}
+
+export { THREAD_SUMMARY_LABELS, ThreadSummary };

package/dist/{chunk-LMQG3VPG.js → chunk-YQ7Q52XU.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-FB3TCNQP.js';
+import { FormField } from './chunk-O7N6W52M.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-GAMV2XD7.css';

package/dist/{chunk-G4CGDUCP.js → chunk-YRNNUCQP.js}

@@ -1,4 +1,4 @@
-import { SidebarNav } from './chunk-WCDPFTJZ.js';
+import { SidebarNav } from './chunk-25JQNHTC.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SectionFrame-M62UUVFQ.css';

package/dist/{chunk-5CEQ3HLH.js → chunk-YXKSUILG.js}

@@ -1,10 +1,10 @@
-import { Modal } from './chunk-C667GCU7.js';
-import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
-import { Input } from './chunk-FB3TCNQP.js';
-import { Count } from './chunk-MLDTLZAO.js';
+import { Modal } from './chunk-ZXXZESCD.js';
+import { useListbox, useHighlightRest } from './chunk-YGRTX67J.js';
+import { Input } from './chunk-O7N6W52M.js';
+import { Kbd } from './chunk-CMAZZY2I.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-NHLNHH4J.js → chunk-ZB3E2Z4Y.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactKinds-3EH4KR3F.css';
 import './ArtifactKindIllustration-D2J3HJMJ.css';
 import { useId } from 'react';
 import { CheckGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-IL3XLDW7.js → chunk-ZDWAIVWL.js}

@@ -1,7 +1,7 @@
 import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-MY374UUD.js';
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
-import { focusables } from './chunk-H5XTJ7GJ.js';
+import { focusables } from './chunk-TUEM2XIW.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-SNIPM6K7.js → chunk-ZJVLGYE3.js}

@@ -1,7 +1,7 @@
-import { Modal } from './chunk-C667GCU7.js';
+import { Modal } from './chunk-ZXXZESCD.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
-import { FormField, Input } from './chunk-FB3TCNQP.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
+import { FormField, Input } from './chunk-O7N6W52M.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useState } from 'react';
 import { ClockGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-BFM5G2Z6.js → chunk-ZPTKAYJK.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-KHJIEPZV.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './RecordChip-53J66RA6.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-2PIH6JHJ.js → chunk-ZXTDWTXS.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-VERJCAJ4.js';
+import { Tag } from './chunk-LBGKLYBY.js';
 import { Spinner } from './chunk-XSPCITPN.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-C667GCU7.js → chunk-ZXXZESCD.js}

@@ -1,10 +1,11 @@
-import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useComposedRef } from './chunk-L72URIHR.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useLayerContainer } from './chunk-OMV5W53A.js';
-import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.js';
+import { focusables, useModalLayer, useBodyScrollLock } from './chunk-TUEM2XIW.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-FYQYEI3N.css';
+import './Modal-GKUOO7PZ.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
@@ -40,6 +41,7 @@ function ModalFrame({
   children,
   size = "sm",
   variant = "dialog",
+  side = "end",
   shape = "framed",
   placement,
   phoneSheet = false,
@@ -81,19 +83,18 @@ function ModalFrame({
     return inFoot ?? frame.current;
   }, []);
   const layer = useModalLayer({ onClose, dismissable, initialFocus: where });
+  const frameRef = useComposedRef(frame, layer.panelRef);
   useBodyScrollLock(true);
   const labelledBy = given(title) ? titleId : void 0;
   const described = describedBy ?? (given(subtitle) ? subtitleId : void 0);
   const frameProps = {
     ...rest,
-    ref: (el) => {
-      frame.current = el;
-      layer.panelRef(el);
-    },
+    ref: frameRef,
     className: cx(
       "crewlet-modal",
       `crewlet-modal--${variant}`,
       variant === "dialog" ? `crewlet-modal--${size}` : void 0,
+      sheet && side === "start" ? "crewlet-modal--start" : void 0,
       prompt ? "crewlet-modal--prompt" : void 0,
       className
     ),
@@ -186,6 +187,7 @@ function ModalFrame({
           "crewlet-modal-overlay",
           `crewlet-modal-overlay--${variant}`,
           `crewlet-modal-overlay--${place}`,
+          sheet && side === "start" && "crewlet-modal-overlay--start",
           phone && "crewlet-modal-overlay--phone-sheet",
           backdrop === "clear" && "crewlet-modal-overlay--clear",
           // Fixed against the window, absolute inside a LayerHost: a fullscreen

package/dist/generated/index.d.ts

@@ -1,5 +1,7 @@
 export * from '../AccessDeniedCard/index.js';
 export * from '../Accordion/index.js';
+export * from '../ActionCard/index.js';
+export * from '../ActivityLine/index.js';
 export * from '../AddPill/index.js';
 export * from '../AgentHandoffPanel/index.js';
 export * from '../Announcer/index.js';
@@ -44,9 +46,13 @@ export * from '../ChangeMark/index.js';
 export * from '../CharacterCount/index.js';
 export * from '../CharacterPicker/index.js';
 export * from '../Charts/index.js';
+export * from '../ChatDay/index.js';
+export * from '../ChatDivider/index.js';
+export * from '../ChatMessage/index.js';
 export * from '../ChatThread/index.js';
 export * from '../CheckGrid/index.js';
 export * from '../Checkbox/index.js';
+export * from '../ChipField/index.js';
 export * from '../ChoiceButtons/index.js';
 export * from '../ChoiceCards/index.js';
 export * from '../ChoiceList/index.js';
@@ -57,6 +63,7 @@ export * from '../ColorSwatch/index.js';
 export * from '../Combobox/index.js';
 export * from '../CommandPalette/index.js';
 export * from '../CommentThread/index.js';
+export * from '../CompactNav/index.js';
 export * from '../Composer/index.js';
 export * from '../ConfirmField/index.js';
 export * from '../ConflictNote/index.js';
@@ -79,9 +86,11 @@ export * from '../DirectoryList/index.js';
 export * from '../Disclosure/index.js';
 export * from '../Divider/index.js';
 export * from '../DocTabsEditor/index.js';
+export * from '../DockColumn/index.js';
 export * from '../Document/index.js';
 export * from '../DownloadButton/index.js';
 export * from '../EditingStatus/index.js';
+export * from '../EmojiPicker/index.js';
 export * from '../EmptyState/index.js';
 export * from '../EmptyValue/index.js';
 export * from '../EntityChip/index.js';
@@ -116,6 +125,7 @@ export * from '../Layer/index.js';
 export * from '../LayersList/index.js';
 export * from '../Layout/index.js';
 export * from '../Link/index.js';
+export * from '../LinkCard/index.js';
 export * from '../LinkInterstitial/index.js';
 export * from '../List/index.js';
 export * from '../ListDetail/index.js';
@@ -128,8 +138,11 @@ export * from '../LogoSlot/index.js';
 export * from '../Markdown/index.js';
 export * from '../MarkdownEditor/index.js';
 export * from '../MediaMatch/index.js';
+export * from '../MentionChip/index.js';
+export * from '../MentionMenu/index.js';
 export * from '../Menu/index.js';
 export * from '../MergeConflicts/index.js';
+export * from '../MessageActions/index.js';
 export * from '../MessageBubble/index.js';
 export * from '../Meter/index.js';
 export * from '../Modal/index.js';
@@ -145,8 +158,10 @@ export * from '../PageHeader/index.js';
 export * from '../PageNote/index.js';
 export * from '../PeekRail/index.js';
 export * from '../PeopleRail/index.js';
+export * from '../PersonRow/index.js';
 export * from '../PinTile/index.js';
 export * from '../Popover/index.js';
+export * from '../Presence/index.js';
 export * from '../PresenceModel/index.js';
 export * from '../PresenceRing/index.js';
 export * from '../PresenceStack/index.js';
@@ -158,6 +173,7 @@ export * from '../PropertyList/index.js';
 export * from '../ProposalCard/index.js';
 export * from '../Prose/index.js';
 export * from '../QrCode/index.js';
+export * from '../ReactionBar/index.js';
 export * from '../ReadingPane/index.js';
 export * from '../ReceiptStrip/index.js';
 export * from '../RecordChip/index.js';
@@ -217,6 +233,7 @@ export * from '../ThemeSwatch/index.js';
 export * from '../ThemeSwitcher/index.js';
 export * from '../ThemeToggle/index.js';
 export * from '../ThinkingIndicator/index.js';
+export * from '../ThreadSummary/index.js';
 export * from '../TileGrid/index.js';
 export * from '../TimeRangePicker/index.js';
 export * from '../TimeWindowPicker/index.js';