@proteos/ui 0.50.1 → 0.51.1

package/dist/index.js

@@ -1,10 +1,10 @@
 import { cn, Button, Skeleton } from './chunk-IKAX76MB.js';
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-IKAX76MB.js';
-import { icons, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck, CircleAlert, Info } from 'lucide-react';
+import { icons, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
-import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, SelectValue, ModalOverlay, Modal as Modal$1, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
+import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, createContext, useState, useRef, useMemo, useEffect, useContext, useSyncExternalStore, useLayoutEffect, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
+import { lazy, createContext, useState, useRef, useMemo, useEffect, useContext, useSyncExternalStore, useCallback, useLayoutEffect, Suspense, useId, Fragment as Fragment$1 } from 'react';
 import { formatAmount, parseAmount } from '@proteos/sdk';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge, attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -609,7 +609,7 @@ function IconPicker({
   const [query, setQuery] = useState("");
   const [limit, setLimit] = useState(GRID_PAGE);
   const triggerRef = useRef(null);
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const selectedName = resolveLucideIconName(value);
   const SelectedIcon = selectedName ? icons[selectedName] : null;
   const matches2 = useMemo(() => {
@@ -654,7 +654,7 @@ function IconPicker({
         onClick: () => open(!isOpen),
         "data-invalid": isInvalid || void 0,
         className: cn(
-          styles3.box(),
+          styles4.box(),
           "flex shrink-0 items-center justify-center cursor-pointer",
           appearance === "cell" ? "size-[29px]" : COMPACT_SIZE[size],
           "disabled:cursor-not-allowed disabled:opacity-45"
@@ -675,8 +675,8 @@ function IconPicker({
         className: cn(
           // box carries no padding by contract — content is what gives a
           // single-element control its interior (padding, font, text-size).
-          styles3.box(),
-          styles3.content(),
+          styles4.box(),
+          styles4.content(),
           "flex w-full items-center gap-2 text-left cursor-pointer",
           "disabled:cursor-not-allowed disabled:opacity-45"
         ),
@@ -808,9 +808,7 @@ var badgeStyles = tv({
   base: [
     "inline-flex items-center gap-1.5",
     "font-mono text-[11.5px] tracking-[-0.005em]",
-    "px-2.5 py-0.5 rounded-pill border",
-    // Leading dot
-    'before:content-[""] before:block before:size-1.5 before:rounded-full'
+    "px-2.5 py-0.5 border"
   ],
   variants: {
     variant: {
@@ -844,9 +842,18 @@ var badgeStyles = tv({
         "border-[color-mix(in_oklab,var(--badge-color)_35%,var(--color-rule))]",
         "bg-[color-mix(in_oklab,var(--badge-color)_12%,var(--color-surface))]"
       ]
+    },
+    shape: {
+      pill: "rounded-pill",
+      rounded: "rounded-chip"
+    },
+    // Leading dot — its color comes from the register's `before:bg-*`.
+    hasDot: {
+      true: 'before:content-[""] before:block before:size-1.5 before:rounded-full',
+      false: ""
     }
   },
-  defaultVariants: { variant: "default" }
+  defaultVariants: { variant: "default", shape: "pill", hasDot: true }
 });
 var ICON_TONE = {
   default: "text-ink-4",
@@ -857,16 +864,31 @@ var ICON_TONE = {
   danger: "text-danger",
   custom: "text-[var(--badge-color)]"
 };
-function Badge({ variant, color, icon, className, style, children, ...props }) {
+function Badge({
+  variant,
+  shape,
+  hasDot,
+  color,
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}) {
   const Icon = icon ? resolveLucideIcon(icon) : null;
   const register2 = color ? "custom" : variant ?? "default";
   const mergedStyle = color ? { ...style, "--badge-color": color } : style;
+  const showDot = hasDot !== false && !Icon;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ...props,
       style: mergedStyle,
-      className: cn(badgeStyles({ variant: register2 }), Icon ? "before:hidden" : null, className),
+      className: cn(
+        badgeStyles({ variant: register2, shape, hasDot }),
+        showDot ? null : "before:hidden",
+        className
+      ),
       children: [
         Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("size-3 shrink-0", ICON_TONE[register2]) }) : null,
         children
@@ -877,6 +899,8 @@ function Badge({ variant, color, icon, className, style, children, ...props }) {
 function badgeChrome(option) {
   return {
     ...option.variant ? { variant: option.variant } : {},
+    ...option.shape ? { shape: option.shape } : {},
+    ...option.hasDot !== void 0 ? { hasDot: option.hasDot } : {},
     ...option.color ? { color: option.color } : {},
     ...option.icon ? { icon: option.icon } : {}
   };
@@ -897,7 +921,7 @@ function BadgeMultiSelect({
   autoFocus = false,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const [isOpen, setIsOpen] = useState(false);
@@ -937,7 +961,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -1023,13 +1047,11 @@ function BadgeMultiSelect({
 }
 function RemovableBadge({
   children,
-  variant,
-  color,
-  icon,
   onRemove,
-  isDisabled
+  isDisabled,
+  ...chrome
 }) {
-  return /* @__PURE__ */ jsxs(Badge, { ...badgeChrome({ variant, color, icon }), children: [
+  return /* @__PURE__ */ jsxs(Badge, { ...badgeChrome(chrome), children: [
     /* @__PURE__ */ jsx("span", { children }),
     /* @__PURE__ */ jsx(
       "button",
@@ -1383,7 +1405,7 @@ function ColorInput({
   }, [committed]);
   const isDraftInvalid = draft.trim() !== "" && normalizeHexColor(draft) === null;
   const invalid = isInvalid || isDraftInvalid;
-  const styles3 = fieldControlStyles({ size, invalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const edit = (next) => {
     setDraft(next);
@@ -1424,7 +1446,7 @@ function ColorInput({
           {
             "data-disabled": isDisabled || void 0,
             className: cn(
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-2",
               size === "sm" ? "pl-2" : "pl-2.5",
               focusWithin
@@ -1471,7 +1493,7 @@ function ColorInput({
                   spellCheck: false,
                   autoComplete: "off",
                   className: cn(
-                    styles3.content(),
+                    styles4.content(),
                     "min-w-0 flex-1 bg-transparent font-mono outline-none",
                     "pl-0",
                     fieldTextStyles[size]
@@ -1504,7 +1526,7 @@ function Combobox({
   allowsEmptyCollection = true,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxs(
     ComboBox,
@@ -1523,7 +1545,7 @@ function Combobox({
             className: cn(
               // Box chrome on the wrapper; the inner <input> carries the padding
               // + font so the chevron button sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-2",
               focusWithin,
               inputWrapperClassName
@@ -1535,7 +1557,7 @@ function Combobox({
                   placeholder,
                   className: cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles3.content(),
+                    styles4.content(),
                     inputClassName
                   )
                 }
@@ -1903,46 +1925,532 @@ function Command({ combo, target, className, children }) {
     discoveryActive ? /* @__PURE__ */ jsx(
       "div",
       {
-        "aria-hidden": true,
-        className: "absolute -inset-2 rounded-md bg-[color-mix(in_oklab,var(--color-ink)_28%,transparent)] pointer-events-none transition-opacity z-40",
-        children: /* @__PURE__ */ jsx("span", { className: "absolute -top-2.5 -left-2 pointer-events-none z-50", children: /* @__PURE__ */ jsx(CommandHint, { combo, tone: "prominent" }) })
+        "aria-hidden": true,
+        className: "absolute -inset-2 rounded-md bg-[color-mix(in_oklab,var(--color-ink)_28%,transparent)] pointer-events-none transition-opacity z-40",
+        children: /* @__PURE__ */ jsx("span", { className: "absolute -top-2.5 -left-2 pointer-events-none z-50", children: /* @__PURE__ */ jsx(CommandHint, { combo, tone: "prominent" }) })
+      }
+    ) : null
+  ] });
+}
+var stack = [];
+var listenerInstalled2 = false;
+function onWindowKeyDown2(event) {
+  if (event.key !== "Escape") return;
+  if (isEditableTarget(event.target)) return;
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  top.handler(event);
+}
+function ensureListener2() {
+  if (listenerInstalled2) return;
+  if (typeof window === "undefined") return;
+  window.addEventListener("keydown", onWindowKeyDown2, { capture: true });
+  listenerInstalled2 = true;
+}
+function useEscapeKey(handler, options) {
+  const enabled = options?.enabled ?? true;
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  });
+  useEffect(() => {
+    if (!enabled) return void 0;
+    ensureListener2();
+    const entry = {
+      handler: (event) => handlerRef.current(event)
+    };
+    stack.push(entry);
+    return () => {
+      const idx = stack.lastIndexOf(entry);
+      if (idx >= 0) stack.splice(idx, 1);
+    };
+  }, [enabled]);
+}
+var conversationBriefCardStyles = tv({
+  slots: {
+    root: [
+      "flex items-center gap-2.5 rounded-md border border-accent/40 px-3 py-2",
+      "bg-[color-mix(in_oklab,var(--color-accent)_6%,var(--color-surface))]"
+    ],
+    icon: [
+      "grid size-8 shrink-0 place-items-center rounded-full text-accent",
+      "bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]"
+    ],
+    body: "min-w-0 flex-1",
+    eyebrow: "font-mono text-[10px] uppercase tracking-[0.08em] text-accent",
+    title: "truncate text-[13px] font-medium text-ink",
+    summary: "truncate text-[12px] text-ink-3",
+    action: [
+      "shrink-0 cursor-pointer rounded-sm border border-accent/50 px-2.5 py-1",
+      "font-mono text-[11px] text-accent outline-none",
+      "hover:bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]",
+      "focus-visible:shadow-[var(--shadow-focus)]",
+      "disabled:cursor-default disabled:opacity-50"
+    ],
+    outcome: "shrink-0 font-mono text-[11px] text-ink-3"
+  }
+});
+var styles = conversationBriefCardStyles();
+var CONVERSATION_BRIEF_OUTCOME_LABEL = {
+  used: "Call held",
+  discarded: "Discarded"
+};
+function ConversationBriefCard({
+  title,
+  summary,
+  eyebrow = "Conversation brief \u2014 prepared",
+  openLabel = "Open Brief",
+  outcome,
+  onOpen,
+  isOpenDisabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsx(Phone, { className: "size-4", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.body(), children: [
+      /* @__PURE__ */ jsx("p", { className: styles.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsx("p", { className: styles.title(), children: title }),
+      summary ? /* @__PURE__ */ jsx("p", { className: styles.summary(), children: summary }) : null
+    ] }),
+    outcome ? /* @__PURE__ */ jsx("span", { className: styles.outcome(), children: CONVERSATION_BRIEF_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        onPress: onOpen ?? (() => {
+        }),
+        isDisabled: isOpenDisabled,
+        className: styles.action(),
+        children: openLabel
+      }
+    )
+  ] });
+}
+function Select({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Select\u2026",
+  options,
+  renderItem,
+  size,
+  appearance,
+  triggerClassName,
+  popoverClassName,
+  className,
+  ...props
+}) {
+  const styles4 = fieldControlStyles({ size, appearance });
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      ...props,
+      className: (renderProps) => cn(
+        "grid grid-cols-1 gap-1.5",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxs(
+          Button$1,
+          {
+            className: cn(
+              styles4.box(),
+              styles4.content(),
+              "flex items-center justify-between gap-3 text-left cursor-pointer",
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
+              /* @__PURE__ */ jsx(FieldCaret, {})
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx(FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
+        /* @__PURE__ */ jsxs(
+          Popover$1,
+          {
+            offset: 6,
+            className: cn(
+              // Match the trigger width exactly (RAC exposes --trigger-width on
+              // the Popover when anchored to a Select button).
+              "w-[var(--trigger-width)]",
+              // Float above modals + full-screen editors (e.g. agent-studio's
+              // .as-editor z-1000 / a raised modal overlay), matching Menu's z-[1200].
+              "z-[1300]",
+              "rounded-md border border-rule bg-surface p-1",
+              "shadow-[var(--shadow-raised)]",
+              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
+              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
+              popoverClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsx(
+                SelectItem,
+                {
+                  id: option.id,
+                  ...option.textValue ? { textValue: option.textValue } : {},
+                  ...option.isDisabled ? { isDisabled: true } : {},
+                  children: renderItem ? renderItem(option) : option.label
+                },
+                option.id
+              )) }),
+              options.length === 0 ? /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectItem(props) {
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ...props,
+      className: cn(
+        "flex items-center justify-between gap-3",
+        "rounded-[6px] px-3 py-2 text-[14px] text-ink-2",
+        "cursor-pointer outline-none select-none",
+        "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
+        "data-[focused]:bg-surface-2 data-[focused]:text-ink",
+        "data-[selected]:bg-surface-3 data-[selected]:text-ink",
+        "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
+      )
+    }
+  );
+}
+
+// src/components/conversation-brief-card/types.ts
+function conversationBriefOutcomeFor(status) {
+  if (status === "used" || status === "discarded") return status;
+  return null;
+}
+function isDialableConversationBrief(brief) {
+  return !brief.channel || brief.channel === "phone";
+}
+function contactPhoneNumbers(contact) {
+  const numbers = [];
+  for (const address of contact?.addresses ?? []) {
+    if (address.kind !== "phone" || !address.value) continue;
+    if (!numbers.includes(address.value)) numbers.push(address.value);
+  }
+  return numbers;
+}
+function ConversationBriefPreview({
+  brief,
+  contacts,
+  onCall,
+  isCallDisabled = false,
+  callDisabledReason,
+  controls,
+  isCallButtonHidden = false,
+  onSelectionChange,
+  callLabel = "Call",
+  className,
+  contentClassName,
+  renderContent,
+  onEdit,
+  editor
+}) {
+  const [pickedContactId, setPickedContactId] = useState("");
+  const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null;
+  const numbers = useMemo(() => contactPhoneNumbers(contact), [contact]);
+  const [pickedNumber, setPickedNumber] = useState("");
+  const phoneNumber = numbers.includes(pickedNumber) ? pickedNumber : numbers[0] || "";
+  const isOpen = brief.status === "prepared";
+  const names = contacts.map((entry) => entry.name).filter(Boolean).join(", ");
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  useEffect(() => {
+    onSelectionChangeRef.current?.(contact, phoneNumber);
+  }, [contact, phoneNumber]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-[14px] font-semibold text-ink", children: brief.subject || names || "Prepared conversation" }),
+      /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
+        brief.subject ? names : "",
+        brief.channel ? `Channel ${brief.channel}` : "Any channel",
+        brief.type_key ? `Type ${brief.type_key}` : "",
+        brief.status === "prepared" ? "Prepared" : brief.status === "used" ? "Call held" : "Discarded"
+      ].filter(Boolean).join(" \xB7 ") })
+    ] }),
+    editor ?? /* @__PURE__ */ jsxs("div", { className: "group/brief-content relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5",
+            "text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
+            renderContent ? null : "whitespace-pre-wrap",
+            contentClassName
+          ),
+          children: renderContent ? renderContent(brief.content) : brief.content
+        }
+      ),
+      onEdit ? /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          "aria-label": "Edit brief",
+          onPress: onEdit,
+          className: cn(
+            "absolute right-1.5 top-1.5 inline-flex size-7 cursor-pointer items-center justify-center",
+            "rounded-md bg-surface/80 text-ink-3 outline-none transition-opacity",
+            "opacity-0 group-hover/brief-content:opacity-100 focus-visible:opacity-100",
+            "data-[hovered]:bg-surface-3 data-[hovered]:text-ink",
+            "focus-visible:shadow-[var(--shadow-focus)]"
+          ),
+          children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5", "aria-hidden": true })
+        }
+      ) : null
+    ] }),
+    onCall ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-rule-2 pt-3", children: [
+      contacts.length > 1 ? /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": "Who to call",
+          selectedKey: contact?.id ?? "",
+          onSelectionChange: (key) => {
+            setPickedContactId(String(key));
+            setPickedNumber("");
+          },
+          options: contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))
+        }
+      ) : null,
+      numbers.length > 1 ? /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": "Number to call",
+          selectedKey: phoneNumber,
+          onSelectionChange: (key) => setPickedNumber(String(key)),
+          options: numbers.map((number) => ({ id: number, label: number }))
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "font-mono text-[12px] text-ink-3", children: phoneNumber || (contact ? "This contact has no phone number on file." : "No contact to call.") }),
+      controls,
+      callDisabledReason ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-warning", children: callDisabledReason }) : null,
+      isCallButtonHidden ? null : /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          isDisabled: isCallDisabled || !isOpen || phoneNumber === "" || !contact,
+          onPress: () => contact && onCall(contact, phoneNumber),
+          children: [
+            /* @__PURE__ */ jsx(Phone, { className: "size-3.5", "aria-hidden": true }),
+            callLabel
+          ]
+        }
+      ) })
+    ] }) : null
+  ] });
+}
+function Modal(props) {
+  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      isDismissable,
+      ...props,
+      className: (renderProps) => cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4",
+        // Warm ink scrim — stays in the Proteos palette (no pure black).
+        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
+        "entering:animate-in entering:fade-in-0 entering:duration-150",
+        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Modal$1,
+        {
+          className: cn(
+            "w-full max-w-lg",
+            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
+            // out as a column so a tall body scrolls instead of overflowing the
+            // screen. Short modals are unaffected — height still tracks content.
+            "flex flex-col max-h-[calc(100dvh-2rem)]",
+            "bg-surface border border-rule rounded-lg",
+            "shadow-[var(--shadow-float)]",
+            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
+            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
+            modalClassName
+          ),
+          children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
+        }
+      )
+    }
+  );
+}
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      slot: "title",
+      ...props,
+      className: cn(
+        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
+        className
+      )
+    }
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        // The scroll region: caps at the panel's spare height and scrolls when
+        // the content is taller, leaving header + footer pinned.
+        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
+        className
+      )
+    }
+  );
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
+    }
+  );
+}
+function ConversationBriefReview({
+  conversationBriefId,
+  client,
+  onOpenCall,
+  onCall,
+  isCallDisabled = false,
+  callDisabledReason,
+  onOutcome,
+  onLoadError,
+  modalTitle = "Prepared conversation",
+  modalClassName = "max-w-2xl",
+  overlayClassName,
+  openLabel,
+  className,
+  renderContent
+}) {
+  const [brief, setBrief] = useState(null);
+  const [contacts, setContacts] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [outcome, setOutcome] = useState(null);
+  const onOutcomeRef = useRef(onOutcome);
+  onOutcomeRef.current = onOutcome;
+  const onLoadErrorRef = useRef(onLoadError);
+  onLoadErrorRef.current = onLoadError;
+  const hasSettledRef = useRef(false);
+  const settle = useCallback((next, settled) => {
+    setOutcome(next);
+    setIsOpen(false);
+    if (hasSettledRef.current) return;
+    hasSettledRef.current = true;
+    onOutcomeRef.current?.(next, settled);
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const loaded = await client.getConversationBrief(conversationBriefId);
+        if (cancelled) return;
+        setBrief(loaded);
+        const terminal = conversationBriefOutcomeFor(loaded.status);
+        if (terminal) settle(terminal, loaded);
+        const people = await Promise.all(
+          loaded.contact_ids.map((contactId) => client.getContact(contactId).catch(() => null))
+        );
+        if (!cancelled) setContacts(people.filter((person) => person !== null));
+      } catch (error) {
+        if (cancelled) return;
+        onLoadErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, conversationBriefId, settle]);
+  const open = () => {
+    if (onOpenCall) {
+      onOpenCall(conversationBriefId);
+      return;
+    }
+    setIsOpen(true);
+  };
+  if (!brief) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ConversationBriefCard,
+      {
+        title: brief.subject || namesOf(contacts) || "Prepared conversation",
+        summary: summaryFor(brief, contacts),
+        outcome,
+        onOpen: open,
+        ...openLabel !== void 0 ? { openLabel } : {},
+        ...className !== void 0 ? { className } : {}
+      }
+    ),
+    onOpenCall ? null : /* @__PURE__ */ jsxs(
+      ModalContent,
+      {
+        isOpen,
+        onOpenChange: setIsOpen,
+        modalClassName,
+        ...overlayClassName !== void 0 ? { className: overlayClassName } : {},
+        children: [
+          /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: modalTitle }) }),
+          /* @__PURE__ */ jsx(ModalBody, { className: "min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
+            ConversationBriefPreview,
+            {
+              brief,
+              contacts,
+              contentClassName: "max-h-[50dvh]",
+              isCallDisabled,
+              ...callDisabledReason !== void 0 ? { callDisabledReason } : {},
+              ...renderContent !== void 0 ? { renderContent } : {},
+              ...onCall && isDialableConversationBrief(brief) ? {
+                onCall: (contact, phoneNumber) => {
+                  setIsOpen(false);
+                  onCall(brief, contact, phoneNumber);
+                }
+              } : {}
+            }
+          ) })
+        ]
       }
-    ) : null
+    )
   ] });
 }
-var stack = [];
-var listenerInstalled2 = false;
-function onWindowKeyDown2(event) {
-  if (event.key !== "Escape") return;
-  if (isEditableTarget(event.target)) return;
-  const top = stack[stack.length - 1];
-  if (!top) return;
-  top.handler(event);
+function namesOf(contacts) {
+  return contacts.map((contact) => contact.name).filter(Boolean).join(", ");
 }
-function ensureListener2() {
-  if (listenerInstalled2) return;
-  if (typeof window === "undefined") return;
-  window.addEventListener("keydown", onWindowKeyDown2, { capture: true });
-  listenerInstalled2 = true;
+function summaryFor(brief, contacts) {
+  const firstLine = brief.content.split("\n").find((line) => line.trim() !== "")?.trim() ?? "";
+  return [
+    brief.subject ? namesOf(contacts) : "",
+    brief.channel ?? "",
+    brief.type_key ?? "",
+    firstLine
+  ].filter(Boolean).join(" \xB7 ");
 }
-function useEscapeKey(handler, options) {
-  const enabled = options?.enabled ?? true;
-  const handlerRef = useRef(handler);
-  useEffect(() => {
-    handlerRef.current = handler;
-  });
-  useEffect(() => {
-    if (!enabled) return void 0;
-    ensureListener2();
-    const entry = {
-      handler: (event) => handlerRef.current(event)
-    };
-    stack.push(entry);
-    return () => {
-      const idx = stack.lastIndexOf(entry);
-      if (idx >= 0) stack.splice(idx, 1);
-    };
-  }, [enabled]);
+
+// src/components/conversation-brief-card/create-conversation-brief-client.ts
+function createConversationBriefClient(conversation) {
+  return {
+    getConversationBrief: (conversationBriefId) => conversation.conversationBriefs.get(conversationBriefId),
+    getContact: (contactId) => conversation.contacts.get(contactId)
+  };
 }
 function CurrencyInput({
   value,
@@ -1975,16 +2483,16 @@ function CurrencyInput({
     onChange({ amount: nextAmount, currency_code: nextCode });
   };
   const selectedSymbol = currencyOptions.find((option) => option.code === code)?.symbol ?? code;
-  const styles3 = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
+  const styles4 = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn(styles3.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(styles4.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           className: cn(
             "min-w-0 flex-1 bg-transparent text-ink outline-none tabular-nums",
-            styles3.content(),
+            styles4.content(),
             // Sit a touch lower than a standard field by trimming the vertical
             // padding (cell mode keeps the fixed 29px row-editor height).
             appearance === "cell" ? "" : size === "sm" ? "py-1" : "py-1.5"
@@ -2650,7 +3158,9 @@ function DataTable({
   selectionMode = "none",
   selectedIds,
   onSelectionChange,
-  columnBorders = false
+  columnBorders = false,
+  groupBy,
+  groupHeaderHeight
 }) {
   const rows = useMemo(() => {
     const pages = query.data?.pages;
@@ -2769,6 +3279,24 @@ function DataTable({
   });
   const tableRows = table.getRowModel().rows;
   const tableRowCount = tableRows.length;
+  const listItems = useMemo(() => {
+    if (!groupBy) {
+      return tableRows.map((row, dataIndex) => ({ kind: "row", row, dataIndex }));
+    }
+    const items = [];
+    let currentGroupId = null;
+    tableRows.forEach((row, dataIndex) => {
+      const group = groupBy(row.original);
+      if (group && group.id !== currentGroupId) {
+        currentGroupId = group.id;
+        items.push({ kind: "group", id: group.id, label: group.label });
+      } else if (!group) {
+        currentGroupId = null;
+      }
+      items.push({ kind: "row", row, dataIndex });
+    });
+    return items;
+  }, [tableRows, groupBy]);
   const scrollerRef = useRef(null);
   useEffect(() => {
     scrollerRef.current?.scrollTo({ top: 0 });
@@ -2779,10 +3307,11 @@ function DataTable({
     const top = listRef.current?.offsetTop ?? 0;
     setListOffset((prev) => prev === top ? prev : top);
   });
+  const headingHeight = groupHeaderHeight ?? rowHeight;
   const virtualizer = useVirtualizer({
-    count: tableRowCount,
+    count: listItems.length,
     getScrollElement: () => scrollerRef.current,
-    estimateSize: () => rowHeight,
+    estimateSize: (index) => listItems[index]?.kind === "group" ? headingHeight : rowHeight,
     overscan,
     scrollMargin: listOffset
   });
@@ -2889,8 +3418,8 @@ function DataTable({
               role: "presentation",
               style: { height: totalSize, position: "relative", width: "100%" },
               children: virtualItems.map((vRow) => {
-                const row = tableRows[vRow.index];
-                if (!row) return null;
+                const item = listItems[vRow.index];
+                if (!item) return null;
                 const rowStyle = {
                   // Items' `start` includes the virtualizer's scrollMargin
                   // (the list's offset below the sticky header); subtract
@@ -2898,18 +3427,21 @@ function DataTable({
                   transform: `translateY(${vRow.start - listOffset}px)`,
                   height: vRow.size
                 };
+                if (item.kind === "group") {
+                  return /* @__PURE__ */ jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
+                }
                 return /* @__PURE__ */ jsx(
                   DataRow,
                   {
-                    row,
-                    index: vRow.index,
+                    row: item.row,
+                    index: item.dataIndex,
                     zebra,
                     onRowClick,
                     style: rowStyle,
                     columnBorders,
                     ...rowWrapper ? { rowWrapper } : {}
                   },
-                  row.id
+                  item.row.id
                 );
               })
             }
@@ -2923,6 +3455,20 @@ function DataTable({
     }
   );
 }
+function GroupHeaderRow({ style, children }) {
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      absolute: true,
+      style,
+      className: cn(
+        "bg-surface-2 border-b border-rule",
+        "font-mono text-[11px] uppercase tracking-[0.06em] text-ink-3"
+      ),
+      children: /* @__PURE__ */ jsx(TableCell, { className: "gap-2 text-inherit", children })
+    }
+  );
+}
 function DataRow({
   row,
   index,
@@ -3155,7 +3701,7 @@ function DatePicker({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxs(
     DatePicker$1,
@@ -3173,7 +3719,7 @@ function DatePicker({
             className: cn(
               // Box chrome on the wrapper; the DateInput inside carries padding +
               // font so the calendar trigger sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -3183,7 +3729,7 @@ function DatePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles3.content(),
+                    styles4.content(),
                     // Tabular alignment for date segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -3305,7 +3851,7 @@ function DateTimePicker({
   shouldCloseOnSelect = false,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const timeGranularity = granularity === "day" ? "minute" : granularity;
   const { hourCycle } = props;
@@ -3328,7 +3874,7 @@ function DateTimePicker({
             className: cn(
               // Box chrome on the wrapper; the DateInput inside carries padding +
               // font so the calendar trigger sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -3338,7 +3884,7 @@ function DateTimePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles3.content(),
+                    styles4.content(),
                     // Tabular alignment for date/time segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -3422,7 +3968,7 @@ var draftMessageCardStyles = tv({
     outcome: "shrink-0 font-mono text-[11px] text-ink-3"
   }
 });
-var styles = draftMessageCardStyles();
+var styles2 = draftMessageCardStyles();
 var DRAFT_OUTCOME_LABEL = {
   sent: "Sent",
   rejected: "Rejected",
@@ -3439,23 +3985,23 @@ function DraftMessageCard({
   isPreviewDisabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles.root(), className), children: [
-    /* @__PURE__ */ jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsx(ChannelIcon, { channel }) }),
-    /* @__PURE__ */ jsxs("div", { className: styles.body(), children: [
-      /* @__PURE__ */ jsx("p", { className: styles.eyebrow(), children: eyebrow }),
-      /* @__PURE__ */ jsx("p", { className: styles.title(), children: title }),
-      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxs("p", { className: styles.recipients(), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles2.root(), className), children: [
+    /* @__PURE__ */ jsx("span", { className: styles2.icon(), children: /* @__PURE__ */ jsx(ChannelIcon, { channel }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles2.body(), children: [
+      /* @__PURE__ */ jsx("p", { className: styles2.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsx("p", { className: styles2.title(), children: title }),
+      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxs("p", { className: styles2.recipients(), children: [
         "To ",
         recipients.join(", ")
       ] }) : null
     ] }),
-    outcome ? /* @__PURE__ */ jsx("span", { className: styles.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsx(
+    outcome ? /* @__PURE__ */ jsx("span", { className: styles2.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsx(
       Button$1,
       {
         onPress: onPreview ?? (() => {
         }),
         isDisabled: isPreviewDisabled,
-        className: styles.action(),
+        className: styles2.action(),
         children: previewLabel
       }
     )
@@ -3530,7 +4076,7 @@ function MultiSelect({
   appearance,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const [isOpen, setIsOpen] = useState(false);
@@ -3577,7 +4123,7 @@ function MultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -3813,101 +4359,6 @@ function RecipientSelect({
     }
   );
 }
-function Select({
-  label,
-  description,
-  errorMessage,
-  placeholder = "Select\u2026",
-  options,
-  renderItem,
-  size,
-  appearance,
-  triggerClassName,
-  popoverClassName,
-  className,
-  ...props
-}) {
-  const styles3 = fieldControlStyles({ size, appearance });
-  return /* @__PURE__ */ jsxs(
-    Select$1,
-    {
-      ...props,
-      className: (renderProps) => cn(
-        "grid grid-cols-1 gap-1.5",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: [
-        label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
-        /* @__PURE__ */ jsxs(
-          Button$1,
-          {
-            className: cn(
-              styles3.box(),
-              styles3.content(),
-              "flex items-center justify-between gap-3 text-left cursor-pointer",
-              triggerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx(SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
-              /* @__PURE__ */ jsx(FieldCaret, {})
-            ]
-          }
-        ),
-        description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
-        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx(FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
-        /* @__PURE__ */ jsxs(
-          Popover$1,
-          {
-            offset: 6,
-            className: cn(
-              // Match the trigger width exactly (RAC exposes --trigger-width on
-              // the Popover when anchored to a Select button).
-              "w-[var(--trigger-width)]",
-              // Float above modals + full-screen editors (e.g. agent-studio's
-              // .as-editor z-1000 / a raised modal overlay), matching Menu's z-[1200].
-              "z-[1300]",
-              "rounded-md border border-rule bg-surface p-1",
-              "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
-              popoverClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx(ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsx(
-                SelectItem,
-                {
-                  id: option.id,
-                  ...option.textValue ? { textValue: option.textValue } : {},
-                  ...option.isDisabled ? { isDisabled: true } : {},
-                  children: renderItem ? renderItem(option) : option.label
-                },
-                option.id
-              )) }),
-              options.length === 0 ? /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectItem(props) {
-  return /* @__PURE__ */ jsx(
-    ListBoxItem,
-    {
-      ...props,
-      className: cn(
-        "flex items-center justify-between gap-3",
-        "rounded-[6px] px-3 py-2 text-[14px] text-ink-2",
-        "cursor-pointer outline-none select-none",
-        "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
-        "data-[focused]:bg-surface-2 data-[focused]:text-ink",
-        "data-[selected]:bg-surface-3 data-[selected]:text-ink",
-        "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
-      )
-    }
-  );
-}
 var MAX_COMPOSER_ATTACHMENT_BYTES = 25 * 1024 * 1024;
 var messageComposerStyles = tv({
   base: [
@@ -4274,7 +4725,7 @@ var draftMessageComposerStyles = tv({
     error: "px-[18px] font-mono text-[11px] text-danger"
   }
 });
-var styles2 = draftMessageComposerStyles();
+var styles3 = draftMessageComposerStyles();
 function sendRecipientsFromMessage(message, role) {
   return (message.recipients ?? []).filter((recipient) => recipient.role === role && !!recipient.external_id).map((recipient) => ({
     kind: "contact-address",
@@ -4490,10 +4941,10 @@ function DraftMessageComposer({
     [message?.attachments]
   );
   if (phase === "loading") {
-    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), children: /* @__PURE__ */ jsx("p", { className: styles2.terminal(), children: "Loading draft\u2026" }) });
+    return /* @__PURE__ */ jsx("div", { className: cn(styles3.root(), className), children: /* @__PURE__ */ jsx("p", { className: styles3.terminal(), children: "Loading draft\u2026" }) });
   }
   if (phase === "load-error") {
-    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), children: /* @__PURE__ */ jsxs("p", { className: styles2.terminal(), children: [
+    return /* @__PURE__ */ jsx("div", { className: cn(styles3.root(), className), children: /* @__PURE__ */ jsxs("p", { className: styles3.terminal(), children: [
       loadError ?? "Loading the draft failed.",
       " ",
       /* @__PURE__ */ jsx(
@@ -4508,12 +4959,12 @@ function DraftMessageComposer({
   }
   if (phase === "terminal" || !message) {
     const line = terminalKind === "sent" ? "This draft was sent." : terminalKind === "rejected" ? "This draft was rejected." : terminalKind === "failed" ? `Sending failed${message?.error ? ` \u2014 ${message.error}` : ""}.` : "This message is not a reviewable draft.";
-    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsx("p", { className: styles2.terminal(), children: line }) });
+    return /* @__PURE__ */ jsx("div", { className: cn(styles3.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsx("p", { className: styles3.terminal(), children: line }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles2.root(), className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles2.header(), children: [
-      /* @__PURE__ */ jsx("span", { className: styles2.badge(), children: "Draft \xB7 awaiting review" }),
-      /* @__PURE__ */ jsxs("span", { className: styles2.sender(), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles3.root(), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles3.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: styles3.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxs("span", { className: styles3.sender(), children: [
         "from ",
         message.sender.name
       ] })
@@ -4544,11 +4995,11 @@ function DraftMessageComposer({
         showSendButton: showActions
       }
     ),
-    actionError ? /* @__PURE__ */ jsxs("p", { className: styles2.error(), children: [
+    actionError ? /* @__PURE__ */ jsxs("p", { className: styles3.error(), children: [
       actionError,
       " \u2014 your edits are kept."
     ] }) : null,
-    showActions ? /* @__PURE__ */ jsxs("div", { className: styles2.actions(), children: [
+    showActions ? /* @__PURE__ */ jsxs("div", { className: styles3.actions(), children: [
       isConfirmingReject ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-[12.5px] text-ink-3", children: "Reject draft?" }),
         /* @__PURE__ */ jsx(
@@ -4585,92 +5036,6 @@ function DraftMessageComposer({
     ] }) : null
   ] });
 }
-function Modal(props) {
-  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
-  className,
-  modalClassName,
-  isDismissable = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ModalOverlay,
-    {
-      isDismissable,
-      ...props,
-      className: (renderProps) => cn(
-        "fixed inset-0 z-50 flex items-center justify-center p-4",
-        // Warm ink scrim — stays in the Proteos palette (no pure black).
-        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
-        "entering:animate-in entering:fade-in-0 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: /* @__PURE__ */ jsx(
-        Modal$1,
-        {
-          className: cn(
-            "w-full max-w-lg",
-            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
-            // out as a column so a tall body scrolls instead of overflowing the
-            // screen. Short modals are unaffected — height still tracks content.
-            "flex flex-col max-h-[calc(100dvh-2rem)]",
-            "bg-surface border border-rule rounded-lg",
-            "shadow-[var(--shadow-float)]",
-            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
-            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
-            modalClassName
-          ),
-          children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
-        }
-      )
-    }
-  );
-}
-function ModalHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
-}
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      slot: "title",
-      ...props,
-      className: cn(
-        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
-        className
-      )
-    }
-  );
-}
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
-}
-function ModalBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn(
-        // The scroll region: caps at the panel's spare height and scrolls when
-        // the content is taller, leaving header + footer pinned.
-        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
-        className
-      )
-    }
-  );
-}
-function ModalFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
-    }
-  );
-}
 function DraftMessageReview({
   messageId,
   client,
@@ -4816,12 +5181,12 @@ function EmptyState({
   size,
   className
 }) {
-  const styles3 = emptyStateStyles({ size });
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles3.root(), className), children: [
-    icon ? /* @__PURE__ */ jsx("div", { className: styles3.art(), children: icon }) : null,
-    /* @__PURE__ */ jsx("div", { className: styles3.title(), children: title }),
-    description ? /* @__PURE__ */ jsx("div", { className: styles3.description(), children: description }) : null,
-    action ? /* @__PURE__ */ jsx("div", { className: styles3.actions(), children: action }) : null
+  const styles4 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles4.root(), className), children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: styles4.art(), children: icon }) : null,
+    /* @__PURE__ */ jsx("div", { className: styles4.title(), children: title }),
+    description ? /* @__PURE__ */ jsx("div", { className: styles4.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: styles4.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -5062,7 +5427,7 @@ function Input({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance, hasFocusRing });
+  const styles4 = fieldControlStyles({ size, appearance, hasFocusRing });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -5078,7 +5443,7 @@ function Input({
           {
             ...inputProps,
             placeholder: placeholder ?? "",
-            className: cn(styles3.box(), styles3.content(), inputClassName)
+            className: cn(styles4.box(), styles4.content(), inputClassName)
           }
         ),
         description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
@@ -5588,6 +5953,8 @@ function ChipItem({
       Badge,
       {
         variant: option?.variant,
+        shape: "rounded",
+        hasDot: false,
         ...option?.color ? { color: option.color } : {},
         ...option?.icon ? { icon: option.icon } : {},
         children: option?.label ?? value
@@ -5664,7 +6031,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles3 = segmentedControlStyles({ size });
+  const styles4 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsx(
     RadioGroup$1,
     {
@@ -5672,14 +6039,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: cn(styles3.group(), className),
+      className: cn(styles4.group(), className),
       children: options.map((option) => /* @__PURE__ */ jsx(
         Radio$1,
         {
           value: String(option.id),
           ...option.isDisabled ? { isDisabled: true } : {},
           ...autoFocus && option.id === value ? { autoFocus: true } : {},
-          className: styles3.segment(),
+          className: styles4.segment(),
           children: option.label
         },
         String(option.id)
@@ -5702,7 +6069,7 @@ function TagInput({
   autoFocus = false,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const inputRef = useRef(null);
@@ -5743,7 +6110,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -7493,45 +7860,45 @@ var tabsStyles = tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tabs$1,
     {
       ...props,
-      className: (rp) => cn(styles3.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles4.root(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function List({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     TabList,
     {
       ...props,
-      className: (rp) => cn(styles3.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles4.list(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Trigger({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tab,
     {
       ...props,
-      className: (rp) => cn(styles3.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles4.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles3 = tabsStyles({});
+  const styles4 = tabsStyles({});
   return /* @__PURE__ */ jsx(
     TabPanel,
     {
       ...props,
-      className: (rp) => cn(styles3.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles4.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -7555,7 +7922,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -7575,8 +7942,8 @@ function Textarea({
             className: cn(
               // Same hairline chrome as Input, but allow vertical resize and set a
               // sensible minimum height so short content doesn't collapse.
-              styles3.box(),
-              styles3.content(),
+              styles4.box(),
+              styles4.content(),
               "min-h-[100px] resize-y",
               textareaClassName
             )
@@ -7597,7 +7964,7 @@ function TimeField({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxs(
     TimeField$1,
@@ -7613,8 +7980,8 @@ function TimeField({
           DateInput,
           {
             className: cn(
-              styles3.box(),
-              styles3.content(),
+              styles4.box(),
+              styles4.content(),
               "flex items-center min-w-0 text-ink",
               // Tabular alignment for time segments — overrides content's
               // font-sans on purpose.
@@ -7737,6 +8104,6 @@ function Tooltip({ className, offset = 6, ...props }) {
   );
 }
 
-export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, countLeaves, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, toastStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, toastStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map