@crewlethq/ui 0.81.1 → 0.82.0

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

@@ -1,10 +1,10 @@
-import { HeadingLevelProvider } from './chunk-PQADV6P6.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 +40,7 @@ function ModalFrame({
   children,
   size = "sm",
   variant = "dialog",
+  side = "end",
   shape = "framed",
   placement,
   phoneSheet = false,
@@ -94,6 +95,7 @@ function ModalFrame({
       "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 +188,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/{chunk-EAIOXW2W.js → chunk-XY4O2XMR.js}

@@ -1,13 +1,13 @@
-import { Tooltip } from './chunk-I33UIUZD.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
+import { SegmentedControl } from './chunk-GZVAZ3LL.js';
 import { ArtifactIcon } from './chunk-AVL52EME.js';
-import { isApplePlatform, Kbd } from './chunk-ANTAQAR4.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Menu } from './chunk-YOJAGKTS.js';
+import { isApplePlatform, Kbd, ariaKeyshortcuts } from './chunk-CMAZZY2I.js';
 import { Button } from './chunk-DGXZ635L.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactKinds-3EH4KR3F.css';
 import './ArtifactBar-X46WJNW7.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
@@ -137,12 +137,6 @@ function ArtifactBar({
     }
   );
 }
-function ariaKeys(keys, apple) {
-  return keys.map((key) => {
-    if (key === "Mod") return apple ? "Meta" : "Control";
-    return key.length === 1 ? key.toUpperCase() : key;
-  }).join("+");
-}
 function Tip({ tool, apple }) {
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-bar__tip", children: [
     tool.label,
@@ -161,7 +155,7 @@ function ToolButton({ tool, apple }) {
         title: "",
         pressed: tool.pressed,
         disabledReason: tool.disabledReason,
-        "aria-keyshortcuts": tool.keys ? ariaKeys(tool.keys, apple) : void 0,
+        "aria-keyshortcuts": tool.keys ? ariaKeyshortcuts(tool.keys, apple) : void 0,
         onClick: tool.onSelect
       }
     ) }),
@@ -169,7 +163,7 @@ function ToolButton({ tool, apple }) {
   ] });
 }
 function LabelledTool({ tool, apple }) {
-  const shortcut = tool.keys ? ariaKeys(tool.keys, apple) : void 0;
+  const shortcut = tool.keys ? ariaKeyshortcuts(tool.keys, apple) : void 0;
   if (tool.emphasis === "primary") {
     return /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", disabled: !tool.keys, children: /* @__PURE__ */ jsx(
       Button,

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-RIAPCEB5.js → chunk-YM77TZ7Q.js}

@@ -1,11 +1,11 @@
-import { Select } from './chunk-VK45YJLH.js';
+import { Select } from './chunk-3IWZVEXA.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-EE3DJMSQ.js';
-import { Popover } from './chunk-KHJIEPZV.js';
-import { Input } from './chunk-FB3TCNQP.js';
+import { Popover } from './chunk-SM4P2SHB.js';
+import { Input } from './chunk-O7N6W52M.js';
 import { Button } from './chunk-DGXZ635L.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
+import { useFocusModality } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-YZPKNZZI.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/{chunk-OQG4P5KU.js → chunk-YOJAGKTS.js}

@@ -1,8 +1,8 @@
 import { Button } from './chunk-DGXZ635L.js';
 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 { returnFocus } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-I4SNXHOT.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

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-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-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/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';
@@ -82,6 +89,7 @@ export * from '../DocTabsEditor/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 +124,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 +137,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,6 +157,7 @@ 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 '../PresenceModel/index.js';
@@ -158,6 +171,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 +231,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';