@proteos/ui 0.31.0 → 0.32.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 { Paperclip, BookText, Banknote, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, ChevronDown, GripVertical, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck } from 'lucide-react';
+import { Paperclip, BookText, Banknote, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck } 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, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Input as Input$1, ComboBoxStateContext, Select as Select$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, ModalOverlay, Modal as Modal$1, TextField, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, SelectValue, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, 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, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Input as Input$1, ComboBoxStateContext, Select as Select$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, SelectValue, ModalOverlay, Modal as Modal$1, TextField, 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, 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, useEffect, useContext, useSyncExternalStore, useMemo, useLayoutEffect, Suspense, useId, Fragment as Fragment$1 } from 'react';
+import { lazy, createContext, useState, useRef, useEffect, useContext, useSyncExternalStore, useMemo, useLayoutEffect, useCallback, 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';
@@ -573,7 +573,7 @@ function BadgeMultiSelect({
   autoFocus = false,
   className
 }) {
-  const styles = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles2 = 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);
@@ -613,7 +613,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles.box(),
+          styles2.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -1007,7 +1007,7 @@ function Combobox({
   allowsEmptyCollection = true,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = 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,
@@ -1026,7 +1026,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.
-              styles.box(),
+              styles2.box(),
               "flex items-center gap-1 pr-2",
               focusWithin,
               inputWrapperClassName
@@ -1038,7 +1038,7 @@ function Combobox({
                   placeholder,
                   className: cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles.content(),
+                    styles2.content(),
                     inputClassName
                   )
                 }
@@ -1478,16 +1478,16 @@ function CurrencyInput({
     onChange({ amount: nextAmount, currency_code: nextCode });
   };
   const selectedSymbol = currencyOptions.find((option) => option.code === code)?.symbol ?? code;
-  const styles = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
+  const styles2 = 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(styles.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(styles2.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",
-            styles.content(),
+            styles2.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"
@@ -2561,7 +2561,7 @@ function DatePicker({
   className,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = 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,
@@ -2579,7 +2579,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.
-              styles.box(),
+              styles2.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2589,7 +2589,7 @@ function DatePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles.content(),
+                    styles2.content(),
                     // Tabular alignment for date segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -2711,7 +2711,7 @@ function DateTimePicker({
   shouldCloseOnSelect = false,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = 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;
@@ -2734,7 +2734,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.
-              styles.box(),
+              styles2.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2744,7 +2744,7 @@ function DateTimePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles.content(),
+                    styles2.content(),
                     // Tabular alignment for date/time segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -2804,6 +2804,1117 @@ function DateTimePicker({
     }
   );
 }
+
+// src/components/draft-message-composer/create-draft-message-client.ts
+function createDraftMessageClient(conversation) {
+  return {
+    getMessage: (messageId) => conversation.messages.get(messageId),
+    getConversation: (conversationId) => conversation.conversations.get(conversationId),
+    updateDraft: (messageId, patch) => conversation.messages.updateDraft(messageId, patch),
+    sendDraft: (messageId) => conversation.messages.sendDraft(messageId),
+    rejectDraft: (messageId) => conversation.messages.rejectDraft(messageId),
+    searchRecipients: async (connectionId, q) => (await conversation.connections.listContactAddresses(connectionId, {
+      page_size: 100,
+      ...q ? { q } : {}
+    })).data
+  };
+}
+var actionsByMessageId = /* @__PURE__ */ new Map();
+var listenersByMessageId = /* @__PURE__ */ new Map();
+function notify(messageId) {
+  for (const listener of listenersByMessageId.get(messageId) ?? []) listener();
+}
+function registerDraftMessageActions(messageId, actions) {
+  actionsByMessageId.set(messageId, actions);
+  notify(messageId);
+  return () => {
+    if (actionsByMessageId.get(messageId) === actions) {
+      actionsByMessageId.delete(messageId);
+      notify(messageId);
+    }
+  };
+}
+function useDraftMessageActions(messageId) {
+  return useSyncExternalStore(
+    (listener) => {
+      let listeners3 = listenersByMessageId.get(messageId);
+      if (!listeners3) {
+        listeners3 = /* @__PURE__ */ new Set();
+        listenersByMessageId.set(messageId, listeners3);
+      }
+      listeners3.add(listener);
+      return () => {
+        listeners3.delete(listener);
+        if (listeners3.size === 0) listenersByMessageId.delete(messageId);
+      };
+    },
+    () => actionsByMessageId.get(messageId) ?? null,
+    () => null
+  );
+}
+function __resetDraftMessageActions() {
+  actionsByMessageId.clear();
+  listenersByMessageId.clear();
+}
+function MultiSelect({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Select\u2026",
+  options,
+  selectedKeys,
+  onSelectionChange,
+  isDisabled = false,
+  isInvalid = false,
+  hideSelectedOptions = false,
+  isSearchable = false,
+  onSearchChange,
+  size = "md",
+  appearance,
+  className
+}) {
+  const styles2 = 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);
+  const [search, setSearch] = useState("");
+  const triggerRef = useRef(null);
+  const selectedSet = new Set(selectedKeys);
+  const selectedOptions = options.filter((o) => selectedSet.has(o.id));
+  const needle = search.trim().toLowerCase();
+  const listboxOptions = (hideSelectedOptions ? options.filter((o) => !selectedSet.has(o.id)) : options).filter((o) => needle === "" || o.label.toLowerCase().includes(needle));
+  const updateSearch = (next) => {
+    setSearch(next);
+    onSearchChange?.(next);
+  };
+  const openPopover = (open) => {
+    setIsOpen(open);
+    if (!open && search !== "") updateSearch("");
+  };
+  const remove = (id) => {
+    const next = new Set(selectedSet);
+    next.delete(id);
+    onSelectionChange(next);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      openPopover(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-disabled": isDisabled || void 0,
+        "aria-invalid": isInvalid || void 0,
+        tabIndex: isDisabled ? -1 : 0,
+        onClick: () => !isDisabled && openPopover(!isOpen),
+        onKeyDown: onTriggerKeyDown,
+        "data-invalid": isInvalid || void 0,
+        "data-disabled": isDisabled || void 0,
+        className: cn(
+          styles2.box(),
+          "flex flex-wrap items-center gap-1.5 cursor-pointer",
+          minHeight,
+          fieldChipPadding[size],
+          "pr-2",
+          // Let focus-within light up the ring on both the trigger and any
+          // chip's remove button without any extra JS.
+          focusWithin
+        ),
+        children: [
+          selectedOptions.length === 0 ? (
+            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+            // overall height so it matches the Input/Select trigger at the same
+            // size.
+            /* @__PURE__ */ jsx("span", { className: cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
+          ) : selectedOptions.map((o) => /* @__PURE__ */ jsx(Chip, { onRemove: () => remove(o.id), isDisabled, children: o.content ?? o.label }, o.id)),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsx(FieldCaret, {}) })
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsx("p", { className: fieldHintStyles, children: description }) : null,
+    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    /* @__PURE__ */ jsxs(
+      Popover$1,
+      {
+        isOpen,
+        onOpenChange: openPopover,
+        triggerRef,
+        offset: 6,
+        placement: "bottom start",
+        className: cn(
+          "w-[var(--trigger-width)]",
+          "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"
+        ),
+        children: [
+          isSearchable ? /* @__PURE__ */ jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: search,
+              onChange: (e) => updateSearch(e.target.value),
+              placeholder: "Search\u2026",
+              "aria-label": "Search options",
+              className: cn(
+                "w-full bg-transparent outline-none rounded-[6px] px-2 py-1.5",
+                "font-sans text-[13px] text-ink placeholder:text-ink-4"
+              )
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(
+            ListBox,
+            {
+              "aria-label": typeof label === "string" ? label : "Options",
+              selectionMode: "multiple",
+              selectedKeys: selectedSet,
+              onSelectionChange: (keys) => {
+                if (keys === "all") {
+                  onSelectionChange(new Set(options.map((o) => o.id)));
+                  return;
+                }
+                onSelectionChange(keys);
+              },
+              className: "outline-none max-h-72 overflow-auto",
+              renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", fieldHintStyles), children: needle !== "" ? "No matches" : "All options selected" }),
+              children: listboxOptions.map((option) => /* @__PURE__ */ jsxs(
+                ListBoxItem,
+                {
+                  id: option.id,
+                  textValue: option.label,
+                  ...option.isDisabled ? { isDisabled: true } : {},
+                  className: cn(
+                    "group flex items-center gap-2.5",
+                    "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"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Checkmark, {}),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
+                  ]
+                },
+                option.id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Chip({
+  children,
+  onRemove,
+  isDisabled
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5",
+        "pl-2 pr-1 py-0.5 rounded-[6px]",
+        "bg-surface-2 border border-rule",
+        "font-sans text-[13px] text-ink"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            disabled: isDisabled,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: cn(
+              "inline-flex items-center justify-center shrink-0",
+              "size-4 rounded-[3px]",
+              "text-ink-3 hover:text-ink hover:bg-surface-3 cursor-pointer",
+              "outline-none focus-visible:shadow-[var(--shadow-focus)]",
+              "disabled:opacity-45 disabled:cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M2 2l6 6M8 2l-6 6",
+                stroke: "currentColor",
+                strokeWidth: "1.4",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Checkmark() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative inline-flex items-center justify-center shrink-0",
+        "size-[16px] rounded-[3px] border border-ink-4 bg-surface",
+        "transition-[background-color,border-color] duration-150",
+        "group-data-[selected]:bg-ink group-data-[selected]:border-ink"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 12 12",
+          className: cn(
+            "size-3 text-surface transition-opacity duration-150",
+            "opacity-0 group-data-[selected]:opacity-100"
+          ),
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M2.5 6.25 5 8.75 9.5 3.75",
+              stroke: "currentColor",
+              strokeWidth: "1.6",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              fill: "none"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var SEARCH_DEBOUNCE_MS = 250;
+function RecipientSelect({
+  connectionId,
+  searchRecipients,
+  value,
+  onChange,
+  placeholder
+}) {
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedSearch(search.trim()), SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [search]);
+  const [addresses, setAddresses] = useState([]);
+  const requestIdRef = useRef(0);
+  useEffect(() => {
+    if (connectionId === "") return;
+    const requestId = ++requestIdRef.current;
+    searchRecipients(connectionId, debouncedSearch).then((results) => {
+      if (requestId === requestIdRef.current) setAddresses(results);
+    }).catch(() => {
+    });
+  }, [connectionId, debouncedSearch, searchRecipients]);
+  const options = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const recipient of value) {
+      map.set(recipient.external_id, { id: recipient.external_id, label: recipient.external_id });
+    }
+    for (const address of addresses) {
+      const identifier = address.raw_value || address.value;
+      map.set(identifier, {
+        id: identifier,
+        label: address.name || identifier
+      });
+    }
+    return Array.from(map.values());
+  }, [addresses, value]);
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      size: "sm",
+      isSearchable: true,
+      onSearchChange: setSearch,
+      ...placeholder !== void 0 ? { placeholder } : {},
+      options,
+      selectedKeys: value.map((recipient) => recipient.external_id),
+      onSelectionChange: (keys) => onChange(
+        Array.from(keys).map((id) => ({
+          kind: "contact-address",
+          external_id: String(id)
+        }))
+      )
+    }
+  );
+}
+function Select({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Select\u2026",
+  options,
+  renderItem,
+  size,
+  appearance,
+  triggerClassName,
+  popoverClassName,
+  className,
+  ...props
+}) {
+  const styles2 = 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(
+              styles2.box(),
+              styles2.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: [
+    "rounded-[10px] border border-rule bg-surface shadow-[var(--shadow-inset)]",
+    "transition-[border-color,box-shadow] duration-150",
+    "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]"
+  ]
+});
+var ROW_LABEL = "w-7 shrink-0 font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4";
+function MessageComposer({
+  mode,
+  value,
+  onValueChange,
+  placeholder,
+  subjectPrefill,
+  isSubjectReadOnly,
+  disabledReason,
+  onSend,
+  connectionId,
+  connectionPicker,
+  showToField,
+  showRecipientFields,
+  searchRecipients,
+  to: toProp,
+  cc: ccProp,
+  bcc: bccProp,
+  onToChange,
+  onCcChange,
+  onBccChange,
+  attachments,
+  onAddFiles,
+  onRemoveAttachment,
+  hasUploadingAttachments,
+  showSendButton,
+  className
+}) {
+  const [isSending, setIsSending] = useState(false);
+  const [sendError, setSendError] = useState(null);
+  const [internalTo, setInternalTo] = useState([]);
+  const [internalCc, setInternalCc] = useState([]);
+  const [internalBcc, setInternalBcc] = useState([]);
+  const [showCcBcc, setShowCcBcc] = useState(false);
+  const textareaRef = useRef(null);
+  const to = toProp ?? internalTo;
+  const cc = ccProp ?? internalCc;
+  const bcc = bccProp ?? internalBcc;
+  const setTo = (next) => {
+    if (toProp === void 0) setInternalTo(next);
+    onToChange?.(next);
+  };
+  const setCc = (next) => {
+    if (ccProp === void 0) setInternalCc(next);
+    onCcChange?.(next);
+  };
+  const setBcc = (next) => {
+    if (bccProp === void 0) setInternalBcc(next);
+    onBccChange?.(next);
+  };
+  const directory = searchRecipients !== void 0 && connectionId ? { searchRecipients, connectionId } : void 0;
+  const canPickRecipients = mode === "email" && (showRecipientFields ?? false) && directory !== void 0;
+  const needsTo = (showToField ?? false) && directory !== void 0;
+  const isSendButtonShown = showSendButton ?? true;
+  useEffect(() => {
+    setInternalTo([]);
+    setInternalCc([]);
+    setInternalBcc([]);
+  }, [connectionId]);
+  const subject = value.subject ?? subjectPrefill ?? "";
+  const readyCount = (attachments ?? []).filter(
+    (attachment) => attachment.status === "ready"
+  ).length;
+  const canSend = (value.text.trim() !== "" || readyCount > 0) && (mode !== "email" || subject.trim() !== "") && (!needsTo || to.length > 0) && !(hasUploadingAttachments ?? false);
+  const submit = useCallback(async () => {
+    if (!canSend || isSending) return;
+    setIsSending(true);
+    setSendError(null);
+    try {
+      await onSend({
+        text: value.text.trim(),
+        ...mode === "email" ? { subject: subject.trim() } : {},
+        ...needsTo ? { to } : {},
+        ...cc.length > 0 ? { cc } : {},
+        ...bcc.length > 0 ? { bcc } : {}
+      });
+      onValueChange({ text: "" });
+      setInternalTo([]);
+      setInternalCc([]);
+      setInternalBcc([]);
+    } catch (error) {
+      setSendError(error instanceof Error ? error.message : "Send failed");
+    } finally {
+      setIsSending(false);
+    }
+  }, [canSend, isSending, onSend, value.text, mode, subject, needsTo, to, cc, bcc, onValueChange]);
+  if (disabledReason) {
+    return /* @__PURE__ */ jsx("div", { className: "px-[18px] py-3", children: /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "rounded-[10px] border border-rule bg-surface-2 px-3.5 py-2.5",
+          "text-[12.5px] text-ink-3 text-center"
+        ),
+        children: disabledReason
+      }
+    ) });
+  }
+  const onKeyDown2 = (event) => {
+    if (!isSendButtonShown) return;
+    const isSendCombo = mode === "email" ? event.key === "Enter" && (event.metaKey || event.ctrlKey) : event.key === "Enter" && !event.shiftKey;
+    if (isSendCombo) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  const ccBccReveal = canPickRecipients && !showCcBcc ? /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      onPress: () => setShowCcBcc(true),
+      className: "shrink-0 font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4 cursor-pointer outline-none hover:text-ink-3 focus-visible:shadow-[var(--shadow-focus)] rounded",
+      children: "Cc/Bcc"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "px-[18px] pb-3.5 pt-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(messageComposerStyles(), className), children: [
+      connectionPicker ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: ROW_LABEL, children: "Via" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "Connection",
+            size: "sm",
+            options: connectionPicker.options.map((option) => ({
+              id: option.id,
+              label: option.label,
+              textValue: option.textValue
+            })),
+            selectedKey: connectionPicker.selectedId,
+            onSelectionChange: (key) => connectionPicker.onSelect(String(key)),
+            triggerClassName: "font-mono text-[11px]",
+            popoverClassName: "min-w-[var(--trigger-width)] w-max max-w-80"
+          }
+        )
+      ] }) : null,
+      mode === "email" ? isSubjectReadOnly ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Subject" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-[13px] text-ink", children: subject }),
+        ccBccReveal
+      ] }) : /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Subject" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: subject,
+            onChange: (event) => onValueChange({ ...value, subject: event.target.value }),
+            placeholder: "Subject",
+            className: "flex-1 bg-transparent outline-none text-[13px] text-ink placeholder:text-ink-4"
+          }
+        ),
+        ccBccReveal
+      ] }) : null,
+      needsTo && directory ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: ROW_LABEL, children: "To" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+          RecipientSelect,
+          {
+            connectionId: directory.connectionId,
+            searchRecipients: directory.searchRecipients,
+            placeholder: "Pick recipients\u2026",
+            value: to,
+            onChange: setTo
+          }
+        ) })
+      ] }) : null,
+      canPickRecipients && directory && showCcBcc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: ROW_LABEL, children: "Cc" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+            RecipientSelect,
+            {
+              connectionId: directory.connectionId,
+              searchRecipients: directory.searchRecipients,
+              placeholder: "Add cc\u2026",
+              value: cc,
+              onChange: setCc
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: ROW_LABEL, children: "Bcc" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+            RecipientSelect,
+            {
+              connectionId: directory.connectionId,
+              searchRecipients: directory.searchRecipients,
+              placeholder: "Add bcc\u2026",
+              value: bcc,
+              onChange: setBcc
+            }
+          ) })
+        ] })
+      ] }) : null,
+      attachments && attachments.length > 0 ? (
+        // Single horizontally-scrollable row so the chips never grow the composer tall.
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto px-3.5 pt-2 pb-0.5", children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+          AttachmentChip,
+          {
+            name: attachment.name,
+            status: attachment.status,
+            ...attachment.sizeInBytes !== void 0 ? { sizeInBytes: attachment.sizeInBytes } : {},
+            ...attachment.contentType ? { contentType: attachment.contentType } : {},
+            ...attachment.errorMessage ? { errorMessage: attachment.errorMessage } : {},
+            ...onRemoveAttachment ? { onRemove: () => onRemoveAttachment(attachment.localId) } : {},
+            className: "shrink-0"
+          },
+          attachment.localId
+        )) })
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3.5 py-2", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: value.text,
+            placeholder,
+            rows: 1,
+            onChange: (event) => {
+              onValueChange({ ...value, text: event.target.value });
+              autoGrow(event.currentTarget);
+            },
+            onKeyDown: onKeyDown2,
+            className: cn(
+              "w-full resize-none bg-transparent outline-none",
+              "min-h-[40px] max-h-48 text-[14px] leading-[1.5] text-ink placeholder:text-ink-4"
+            ),
+            "data-conversations-composer": true
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          onAddFiles ? /* @__PURE__ */ jsx(
+            FileTrigger,
+            {
+              allowsMultiple: true,
+              onSelect: (files) => {
+                if (files) onAddFiles(Array.from(files));
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "subtle",
+                  size: "icon-md",
+                  "aria-label": "Attach files",
+                  className: "shrink-0",
+                  children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          isSendButtonShown ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-ink-4 select-none", "aria-hidden": true, children: mode === "email" ? "\u2318\u21B5" : "\u21B5" }),
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                "aria-label": "Send",
+                isDisabled: !canSend || isSending,
+                onPress: () => void submit(),
+                className: cn(
+                  "grid place-items-center size-8 rounded-[8px] cursor-pointer",
+                  "bg-accent text-tile-fg transition-opacity duration-150",
+                  "disabled:opacity-40 disabled:cursor-default",
+                  "outline-none focus-visible:shadow-[var(--shadow-focus)]"
+                ),
+                children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-3.5" })
+              }
+            )
+          ] }) : null
+        ] })
+      ] })
+    ] }),
+    sendError ? /* @__PURE__ */ jsxs("p", { className: "mt-1.5 font-mono text-[11px] text-danger", children: [
+      sendError,
+      " \u2014 your message is kept above.",
+      " ",
+      /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          onPress: () => void submit(),
+          className: "inline underline cursor-pointer outline-none focus-visible:shadow-[var(--shadow-focus)]",
+          children: "retry"
+        }
+      )
+    ] }) : null
+  ] });
+}
+function autoGrow(node) {
+  node.style.height = "auto";
+  node.style.height = `${Math.min(node.scrollHeight, 192)}px`;
+}
+var listenersByMessageId2 = /* @__PURE__ */ new Map();
+var lastOutcomeByMessageId = /* @__PURE__ */ new Map();
+function publishDraftMessageOutcome(messageId, outcome) {
+  lastOutcomeByMessageId.set(messageId, outcome);
+  for (const listener of listenersByMessageId2.get(messageId) ?? []) listener();
+}
+function subscribeDraftMessageOutcome(messageId, listener) {
+  let listeners3 = listenersByMessageId2.get(messageId);
+  if (!listeners3) {
+    listeners3 = /* @__PURE__ */ new Set();
+    listenersByMessageId2.set(messageId, listeners3);
+  }
+  listeners3.add(listener);
+  return () => {
+    listeners3.delete(listener);
+    if (listeners3.size === 0) listenersByMessageId2.delete(messageId);
+  };
+}
+function useDraftMessageOutcome(messageId) {
+  return useSyncExternalStore(
+    (listener) => subscribeDraftMessageOutcome(messageId, listener),
+    () => lastOutcomeByMessageId.get(messageId) ?? null,
+    () => null
+  );
+}
+function __resetDraftMessageOutcomes() {
+  listenersByMessageId2.clear();
+  lastOutcomeByMessageId.clear();
+}
+var draftMessageComposerStyles = tv({
+  slots: {
+    root: "flex flex-col gap-1.5",
+    header: "flex items-center gap-2 px-[18px] pt-2",
+    badge: [
+      "inline-flex items-center gap-1 rounded-pill border border-rule px-2 py-0.5",
+      "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-3 bg-surface-2"
+    ],
+    sender: "text-[12.5px] text-ink-3 truncate",
+    actions: "flex items-center justify-between gap-2 px-[18px] pb-3",
+    terminal: [
+      "mx-[18px] my-3 rounded-[10px] border border-rule bg-surface-2 px-3.5 py-2.5",
+      "text-[12.5px] text-ink-3"
+    ],
+    error: "px-[18px] font-mono text-[11px] text-danger"
+  }
+});
+var styles = draftMessageComposerStyles();
+function sendRecipientsFromMessage(message, role) {
+  return (message.recipients ?? []).filter((recipient) => recipient.role === role && !!recipient.external_id).map((recipient) => ({
+    kind: "contact-address",
+    external_id: recipient.external_id
+  }));
+}
+function terminalKindFor(status) {
+  switch (status) {
+    case "draft":
+      return null;
+    case "pending":
+    case "sent":
+      return "sent";
+    case "rejected":
+      return "rejected";
+    case "failed":
+      return "failed";
+    default:
+      return "not-draft";
+  }
+}
+function DraftMessageComposer({
+  messageId,
+  client,
+  onSent,
+  onRejected,
+  showActions = true,
+  className
+}) {
+  const [phase, setPhase] = useState("loading");
+  const [busy, setBusy] = useState("idle");
+  const [terminalKind, setTerminalKind] = useState("not-draft");
+  const [message, setMessage] = useState(null);
+  const [conversation, setConversation] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const [isConfirmingReject, setIsConfirmingReject] = useState(false);
+  const [value, setValue] = useState({ text: "" });
+  const [to, setTo] = useState([]);
+  const [cc, setCc] = useState([]);
+  const [bcc, setBcc] = useState([]);
+  const [snapshot, setSnapshot] = useState({
+    text: "",
+    subject: "",
+    to: [],
+    cc: [],
+    bcc: []
+  });
+  const [loadNonce, setLoadNonce] = useState(0);
+  const isEmail = message?.channel === "email";
+  const isSubjectEditable = isEmail && conversation?.status === "draft";
+  const areRecipientsEditable = isEmail && !conversation?.room_id;
+  const seed = useCallback((draft, thread) => {
+    const text = draft.content.find((block) => block.type === "text")?.text ?? "";
+    const subject = thread?.subject ?? "";
+    const seededTo = sendRecipientsFromMessage(draft, "to");
+    const seededCc = sendRecipientsFromMessage(draft, "cc");
+    const seededBcc = sendRecipientsFromMessage(draft, "bcc");
+    setSnapshot({ text, subject, to: seededTo, cc: seededCc, bcc: seededBcc });
+    setValue({ text, ...draft.channel === "email" ? { subject } : {} });
+    setTo(seededTo);
+    setCc(seededCc);
+    setBcc(seededBcc);
+  }, []);
+  useEffect(() => {
+    let isStale = false;
+    setPhase("loading");
+    setLoadError(null);
+    setActionError(null);
+    client.getMessage(messageId).then(async (draft) => {
+      const thread = draft.conversation_id ? await client.getConversation(draft.conversation_id) : null;
+      if (isStale) return;
+      setMessage(draft);
+      setConversation(thread);
+      const terminal = terminalKindFor(draft.status);
+      if (terminal) {
+        setTerminalKind(terminal);
+        setPhase("terminal");
+        return;
+      }
+      seed(draft, thread);
+      setPhase("ready");
+    }).catch((error) => {
+      if (isStale) return;
+      setLoadError(error instanceof Error ? error.message : "Loading the draft failed");
+      setPhase("load-error");
+    });
+    return () => {
+      isStale = true;
+    };
+  }, [client, messageId, seed, loadNonce]);
+  const isDirty = useMemo(() => {
+    return value.text !== snapshot.text || isSubjectEditable && (value.subject ?? "") !== snapshot.subject || JSON.stringify(to) !== JSON.stringify(snapshot.to) || JSON.stringify(cc) !== JSON.stringify(snapshot.cc) || JSON.stringify(bcc) !== JSON.stringify(snapshot.bcc);
+  }, [value, to, cc, bcc, snapshot, isSubjectEditable]);
+  const buildPatch = useCallback(() => {
+    const current = message;
+    const isBodyEdited = value.text !== snapshot.text;
+    const hasRecipientEdit = areRecipientsEditable && (JSON.stringify(to) !== JSON.stringify(snapshot.to) || JSON.stringify(cc) !== JSON.stringify(snapshot.cc) || JSON.stringify(bcc) !== JSON.stringify(snapshot.bcc));
+    const attachmentRefs = (current.attachments ?? []).map((attachment) => attachment.file);
+    return {
+      // Body edits collapse to one text block; an untouched body echoes the
+      // stored blocks so an agent-provided html part survives the edit.
+      content: isBodyEdited ? [{ type: "text", text: value.text.trim() }] : current.content,
+      ...isSubjectEditable ? { subject: value.subject ?? "" } : {},
+      // Presence-based replacement: any recipient edit ships ALL three groups
+      // verbatim — [] is an explicit clear, an omitted group keeps the stored
+      // one. Shipping only non-empty groups would silently resurrect removed
+      // recipients at send time.
+      ...hasRecipientEdit ? { to, cc, bcc } : {},
+      ...attachmentRefs.length > 0 ? { attachments: attachmentRefs } : {}
+    };
+  }, [message, value, to, cc, bcc, snapshot, areRecipientsEditable, isSubjectEditable]);
+  const persistDirtyEdits = useCallback(async () => {
+    const current = message;
+    if (!isDirty) return current;
+    const updated = await client.updateDraft(messageId, buildPatch());
+    setMessage(updated);
+    setConversation(
+      (thread) => thread && isSubjectEditable ? { ...thread, subject: value.subject ?? "" } : thread
+    );
+    setSnapshot({ text: value.text, subject: value.subject ?? "", to, cc, bcc });
+    return updated;
+  }, [message, isDirty, client, messageId, buildPatch, isSubjectEditable, value, to, cc, bcc]);
+  const saveDraft = useCallback(async () => {
+    if (phase !== "ready" || busy !== "idle") return;
+    setBusy("saving");
+    setActionError(null);
+    try {
+      await persistDirtyEdits();
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : "Saving the draft failed");
+    } finally {
+      setBusy("idle");
+    }
+  }, [phase, busy, persistDirtyEdits]);
+  const send = useCallback(async () => {
+    if (phase !== "ready" || busy !== "idle") return;
+    if (areRecipientsEditable && conversation?.status === "draft" && to.length === 0) {
+      setActionError("Add at least one recipient before sending");
+      return;
+    }
+    setBusy("sending");
+    setActionError(null);
+    try {
+      await persistDirtyEdits();
+      const result = await client.sendDraft(messageId);
+      setMessage(result);
+      if (result.status === "failed") {
+        setTerminalKind("failed");
+        setPhase("terminal");
+        return;
+      }
+      setTerminalKind("sent");
+      setPhase("terminal");
+      publishDraftMessageOutcome(messageId, { type: "sent", message: result });
+      onSent?.(result);
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : "Sending the draft failed");
+      throw error;
+    } finally {
+      setBusy("idle");
+    }
+  }, [
+    phase,
+    busy,
+    persistDirtyEdits,
+    client,
+    messageId,
+    onSent,
+    areRecipientsEditable,
+    conversation,
+    to
+  ]);
+  const reject = useCallback(
+    async (isConfirmed) => {
+      if (phase !== "ready" || busy !== "idle") return;
+      if (!isConfirmed) {
+        setIsConfirmingReject(true);
+        return;
+      }
+      setBusy("rejecting");
+      setActionError(null);
+      try {
+        const result = await client.rejectDraft(messageId);
+        setMessage(result);
+        setTerminalKind("rejected");
+        setPhase("terminal");
+        publishDraftMessageOutcome(messageId, { type: "rejected", message: result });
+        onRejected?.(result);
+      } catch (error) {
+        setActionError(error instanceof Error ? error.message : "Rejecting the draft failed");
+      } finally {
+        setBusy("idle");
+        setIsConfirmingReject(false);
+      }
+    },
+    [phase, busy, client, messageId, onRejected]
+  );
+  const sendRef = useRef(send);
+  const rejectRef = useRef(reject);
+  const saveRef = useRef(saveDraft);
+  sendRef.current = send;
+  rejectRef.current = reject;
+  saveRef.current = saveDraft;
+  useEffect(() => {
+    if (phase !== "ready") return;
+    return registerDraftMessageActions(messageId, {
+      // Failures surface via actionError/outcomes — external drivers get a
+      // settled promise, not a rejection to remember to catch.
+      send: () => sendRef.current().catch(() => void 0),
+      // External UIs own their confirmation — bypass the inline confirm.
+      reject: () => rejectRef.current(true),
+      saveDraft: () => saveRef.current(),
+      isBusy: busy !== "idle"
+    });
+  }, [messageId, phase, busy]);
+  const attachments = useMemo(
+    () => (message?.attachments ?? []).map((attachment) => ({
+      localId: attachment.id,
+      name: attachment.file.name || attachment.file.id,
+      status: "ready",
+      ...attachment.file.content_type ? { contentType: attachment.file.content_type } : {}
+    })),
+    [message?.attachments]
+  );
+  if (phase === "loading") {
+    return /* @__PURE__ */ jsx("div", { className: cn(styles.root(), className), children: /* @__PURE__ */ jsx("p", { className: styles.terminal(), children: "Loading draft\u2026" }) });
+  }
+  if (phase === "load-error") {
+    return /* @__PURE__ */ jsx("div", { className: cn(styles.root(), className), children: /* @__PURE__ */ jsxs("p", { className: styles.terminal(), children: [
+      loadError ?? "Loading the draft failed.",
+      " ",
+      /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          onPress: () => setLoadNonce((nonce) => nonce + 1),
+          className: "inline underline cursor-pointer outline-none focus-visible:shadow-[var(--shadow-focus)]",
+          children: "retry"
+        }
+      )
+    ] }) });
+  }
+  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(styles.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsx("p", { className: styles.terminal(), children: line }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: styles.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxs("span", { className: styles.sender(), children: [
+        "from ",
+        message.sender.name
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      MessageComposer,
+      {
+        mode: isEmail ? "email" : "chat",
+        value,
+        onValueChange: setValue,
+        placeholder: "Draft body\u2026",
+        ...isEmail && !isSubjectEditable ? { isSubjectReadOnly: true } : {},
+        onSend: async () => send(),
+        ...areRecipientsEditable && message.connection_id ? {
+          connectionId: message.connection_id,
+          searchRecipients: client.searchRecipients,
+          showToField: true,
+          showRecipientFields: true,
+          to,
+          cc,
+          bcc,
+          onToChange: setTo,
+          onCcChange: setCc,
+          onBccChange: setBcc
+        } : {},
+        ...attachments.length > 0 ? { attachments } : {},
+        showSendButton: showActions
+      }
+    ),
+    actionError ? /* @__PURE__ */ jsxs("p", { className: styles.error(), children: [
+      actionError,
+      " \u2014 your edits are kept."
+    ] }) : null,
+    showActions ? /* @__PURE__ */ jsxs("div", { className: styles.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(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            onPress: () => void reject(true),
+            isDisabled: busy !== "idle",
+            children: "Confirm reject"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "subtle", onPress: () => setIsConfirmingReject(false), children: "Cancel" })
+      ] }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onPress: () => void reject(false),
+          isDisabled: busy !== "idle",
+          children: "Reject"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "subtle",
+          onPress: () => void saveDraft(),
+          isDisabled: busy !== "idle" || !isDirty,
+          children: busy === "saving" ? "Saving\u2026" : "Save draft"
+        }
+      )
+    ] }) : null
+  ] });
+}
 var emptyStateStyles = tv({
   slots: {
     root: "flex flex-col items-center text-center px-6",
@@ -2834,12 +3945,12 @@ function EmptyState({
   size,
   className
 }) {
-  const styles = emptyStateStyles({ size });
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles.root(), className), children: [
-    icon ? /* @__PURE__ */ jsx("div", { className: styles.art(), children: icon }) : null,
-    /* @__PURE__ */ jsx("div", { className: styles.title(), children: title }),
-    description ? /* @__PURE__ */ jsx("div", { className: styles.description(), children: description }) : null,
-    action ? /* @__PURE__ */ jsx("div", { className: styles.actions(), children: action }) : null
+  const styles2 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles2.root(), className), children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: styles2.art(), children: icon }) : null,
+    /* @__PURE__ */ jsx("div", { className: styles2.title(), children: title }),
+    description ? /* @__PURE__ */ jsx("div", { className: styles2.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: styles2.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -3067,427 +4178,183 @@ function isPreviewableImageName(name) {
   if (dot <= 0 || dot === name.length - 1) return false;
   return PREVIEWABLE_EXTENSIONS.has(name.slice(dot + 1).toLowerCase());
 }
-function Input({
-  label,
-  description,
-  errorMessage,
-  placeholder,
-  size,
-  appearance,
-  inputProps,
-  inputClassName,
-  className,
-  ...props
-}) {
-  const styles = fieldControlStyles({ size, appearance });
-  return /* @__PURE__ */ jsxs(
-    TextField,
-    {
-      ...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__ */ jsx(
-          Input$1,
-          {
-            ...inputProps,
-            placeholder: placeholder ?? "",
-            className: cn(styles.box(), styles.content(), inputClassName)
-          }
-        ),
-        description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
-        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx(FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
-      ]
-    }
-  );
-}
-var MenuTrigger = MenuTrigger$1;
-var SubmenuTrigger = SubmenuTrigger$1;
-function MenuPopover({ className, offset = 4, placement = "bottom start", ...props }) {
-  return /* @__PURE__ */ jsx(
-    Popover$1,
-    {
-      offset,
-      placement,
-      ...props,
-      className: (renderProps) => cn(
-        "min-w-[200px] p-1 bg-surface border border-rule rounded-md",
-        "shadow-[var(--shadow-float)] outline-none z-[1200]",
-        "entering:animate-in entering:fade-in-0 entering:zoom-in-95",
-        "exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95",
-        typeof className === "function" ? className(renderProps) : className
-      )
-    }
-  );
-}
-function Menu({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Menu$1,
-    {
-      ...props,
-      className: (renderProps) => cn(
-        "flex flex-col gap-px outline-none",
-        typeof className === "function" ? className(renderProps) : className
-      )
-    }
-  );
-}
-var menuItemStyles = cn(
-  "flex items-center gap-2.5 px-2.5 py-1.5 rounded-md cursor-pointer outline-none",
-  "font-sans text-[13px] text-ink-2 select-none",
-  "hover:bg-surface-2 hover:text-ink focus:bg-surface-2 focus:text-ink",
-  "data-[open]:bg-surface-2 data-[open]:text-ink",
-  // submenu-parent stays lit while its flyout is open
-  "aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-ink-2",
-  "[&_svg]:size-3.5 [&_svg]:text-ink-3 hover:[&_svg]:text-ink focus:[&_svg]:text-ink"
-);
-function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    MenuItem$1,
-    {
-      ...props,
-      className: (renderProps) => cn(menuItemStyles, typeof className === "function" ? className(renderProps) : className),
-      children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
-        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
-        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight$1, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
-      ]
-    }
-  );
-}
-function Modal(props) {
-  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
+function Input({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  size,
+  appearance,
+  inputProps,
+  inputClassName,
   className,
-  modalClassName,
-  isDismissable = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    ModalOverlay,
+  const styles2 = fieldControlStyles({ size, appearance });
+  return /* @__PURE__ */ jsxs(
+    TextField,
     {
-      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",
+        "grid grid-cols-1 gap-1.5",
         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
-      )
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            ...inputProps,
+            placeholder: placeholder ?? "",
+            className: cn(styles2.box(), styles2.content(), inputClassName)
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx(FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
+      ]
     }
   );
 }
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
-}
-function ModalBody({ className, ...props }) {
+var MenuTrigger = MenuTrigger$1;
+var SubmenuTrigger = SubmenuTrigger$1;
+function MenuPopover({ className, offset = 4, placement = "bottom start", ...props }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    Popover$1,
     {
+      offset,
+      placement,
       ...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
+      className: (renderProps) => cn(
+        "min-w-[200px] p-1 bg-surface border border-rule rounded-md",
+        "shadow-[var(--shadow-float)] outline-none z-[1200]",
+        "entering:animate-in entering:fade-in-0 entering:zoom-in-95",
+        "exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95",
+        typeof className === "function" ? className(renderProps) : className
       )
     }
   );
 }
-function ModalFooter({ className, ...props }) {
+function Menu({ 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 MultiSelect({
-  label,
-  description,
-  errorMessage,
-  placeholder = "Select\u2026",
-  options,
-  selectedKeys,
-  onSelectionChange,
-  isDisabled = false,
-  isInvalid = false,
-  hideSelectedOptions = false,
-  isSearchable = false,
-  onSearchChange,
-  size = "md",
-  appearance,
-  className
-}) {
-  const styles = 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);
-  const [search, setSearch] = useState("");
-  const triggerRef = useRef(null);
-  const selectedSet = new Set(selectedKeys);
-  const selectedOptions = options.filter((o) => selectedSet.has(o.id));
-  const needle = search.trim().toLowerCase();
-  const listboxOptions = (hideSelectedOptions ? options.filter((o) => !selectedSet.has(o.id)) : options).filter((o) => needle === "" || o.label.toLowerCase().includes(needle));
-  const updateSearch = (next) => {
-    setSearch(next);
-    onSearchChange?.(next);
-  };
-  const openPopover = (open) => {
-    setIsOpen(open);
-    if (!open && search !== "") updateSearch("");
-  };
-  const remove = (id) => {
-    const next = new Set(selectedSet);
-    next.delete(id);
-    onSelectionChange(next);
-  };
-  const onTriggerKeyDown = (e) => {
-    if (isDisabled) return;
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-      e.preventDefault();
-      openPopover(true);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
-    label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: triggerRef,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-disabled": isDisabled || void 0,
-        "aria-invalid": isInvalid || void 0,
-        tabIndex: isDisabled ? -1 : 0,
-        onClick: () => !isDisabled && openPopover(!isOpen),
-        onKeyDown: onTriggerKeyDown,
-        "data-invalid": isInvalid || void 0,
-        "data-disabled": isDisabled || void 0,
-        className: cn(
-          styles.box(),
-          "flex flex-wrap items-center gap-1.5 cursor-pointer",
-          minHeight,
-          fieldChipPadding[size],
-          "pr-2",
-          // Let focus-within light up the ring on both the trigger and any
-          // chip's remove button without any extra JS.
-          focusWithin
-        ),
-        children: [
-          selectedOptions.length === 0 ? (
-            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-            // overall height so it matches the Input/Select trigger at the same
-            // size.
-            /* @__PURE__ */ jsx("span", { className: cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
-          ) : selectedOptions.map((o) => /* @__PURE__ */ jsx(Chip, { onRemove: () => remove(o.id), isDisabled, children: o.content ?? o.label }, o.id)),
-          /* @__PURE__ */ jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsx(FieldCaret, {}) })
-        ]
-      }
-    ),
-    description ? /* @__PURE__ */ jsx("p", { className: fieldHintStyles, children: description }) : null,
-    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
-    /* @__PURE__ */ jsxs(
-      Popover$1,
-      {
-        isOpen,
-        onOpenChange: openPopover,
-        triggerRef,
-        offset: 6,
-        placement: "bottom start",
-        className: cn(
-          "w-[var(--trigger-width)]",
-          "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"
-        ),
-        children: [
-          isSearchable ? /* @__PURE__ */ jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              autoFocus: true,
-              value: search,
-              onChange: (e) => updateSearch(e.target.value),
-              placeholder: "Search\u2026",
-              "aria-label": "Search options",
-              className: cn(
-                "w-full bg-transparent outline-none rounded-[6px] px-2 py-1.5",
-                "font-sans text-[13px] text-ink placeholder:text-ink-4"
-              )
-            }
-          ) }) : null,
-          /* @__PURE__ */ jsx(
-            ListBox,
-            {
-              "aria-label": typeof label === "string" ? label : "Options",
-              selectionMode: "multiple",
-              selectedKeys: selectedSet,
-              onSelectionChange: (keys) => {
-                if (keys === "all") {
-                  onSelectionChange(new Set(options.map((o) => o.id)));
-                  return;
-                }
-                onSelectionChange(keys);
-              },
-              className: "outline-none max-h-72 overflow-auto",
-              renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", fieldHintStyles), children: needle !== "" ? "No matches" : "All options selected" }),
-              children: listboxOptions.map((option) => /* @__PURE__ */ jsxs(
-                ListBoxItem,
-                {
-                  id: option.id,
-                  textValue: option.label,
-                  ...option.isDisabled ? { isDisabled: true } : {},
-                  className: cn(
-                    "group flex items-center gap-2.5",
-                    "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"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Checkmark, {}),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
-                  ]
-                },
-                option.id
-              ))
-            }
-          )
-        ]
-      }
-    )
-  ] });
+    Menu$1,
+    {
+      ...props,
+      className: (renderProps) => cn(
+        "flex flex-col gap-px outline-none",
+        typeof className === "function" ? className(renderProps) : className
+      )
+    }
+  );
 }
-function Chip({
-  children,
-  onRemove,
-  isDisabled
-}) {
+var menuItemStyles = cn(
+  "flex items-center gap-2.5 px-2.5 py-1.5 rounded-md cursor-pointer outline-none",
+  "font-sans text-[13px] text-ink-2 select-none",
+  "hover:bg-surface-2 hover:text-ink focus:bg-surface-2 focus:text-ink",
+  "data-[open]:bg-surface-2 data-[open]:text-ink",
+  // submenu-parent stays lit while its flyout is open
+  "aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-ink-2",
+  "[&_svg]:size-3.5 [&_svg]:text-ink-3 hover:[&_svg]:text-ink focus:[&_svg]:text-ink"
+);
+function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
   return /* @__PURE__ */ jsxs(
-    "span",
+    MenuItem$1,
     {
-      className: cn(
-        "inline-flex items-center gap-1.5",
-        "pl-2 pr-1 py-0.5 rounded-[6px]",
-        "bg-surface-2 border border-rule",
-        "font-sans text-[13px] text-ink"
-      ),
+      ...props,
+      className: (renderProps) => cn(menuItemStyles, typeof className === "function" ? className(renderProps) : className),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Remove",
-            disabled: isDisabled,
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove();
-            },
-            className: cn(
-              "inline-flex items-center justify-center shrink-0",
-              "size-4 rounded-[3px]",
-              "text-ink-3 hover:text-ink hover:bg-surface-3 cursor-pointer",
-              "outline-none focus-visible:shadow-[var(--shadow-focus)]",
-              "disabled:opacity-45 disabled:cursor-not-allowed"
-            ),
-            children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M2 2l6 6M8 2l-6 6",
-                stroke: "currentColor",
-                strokeWidth: "1.4",
-                strokeLinecap: "round"
-              }
-            ) })
-          }
-        )
+        icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
+        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight$1, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
       ]
     }
   );
 }
-function Checkmark() {
+function Modal(props) {
+  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "span",
+    ModalOverlay,
     {
-      "aria-hidden": true,
-      className: cn(
-        "relative inline-flex items-center justify-center shrink-0",
-        "size-[16px] rounded-[3px] border border-ink-4 bg-surface",
-        "transition-[background-color,border-color] duration-150",
-        "group-data-[selected]:bg-ink group-data-[selected]:border-ink"
+      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(
-        "svg",
+        Modal$1,
         {
-          viewBox: "0 0 12 12",
           className: cn(
-            "size-3 text-surface transition-opacity duration-150",
-            "opacity-0 group-data-[selected]:opacity-100"
+            "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
           ),
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M2.5 6.25 5 8.75 9.5 3.75",
-              stroke: "currentColor",
-              strokeWidth: "1.6",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              fill: "none"
-            }
-          )
+          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)
+    }
+  );
+}
 var NavNestedContext = createContext(false);
 function useIsNested() {
   return useContext(NavNestedContext);
@@ -3974,7 +4841,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles = segmentedControlStyles({ size });
+  const styles2 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsx(
     RadioGroup$1,
     {
@@ -3982,14 +4849,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: cn(styles.group(), className),
+      className: cn(styles2.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: styles.segment(),
+          className: styles2.segment(),
           children: option.label
         },
         String(option.id)
@@ -3997,101 +4864,6 @@ function SegmentedControl({
     }
   );
 }
-function Select({
-  label,
-  description,
-  errorMessage,
-  placeholder = "Select\u2026",
-  options,
-  renderItem,
-  size,
-  appearance,
-  triggerClassName,
-  popoverClassName,
-  className,
-  ...props
-}) {
-  const styles = 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(
-              styles.box(),
-              styles.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"
-      )
-    }
-  );
-}
 function TagInput({
   label,
   description,
@@ -4107,7 +4879,7 @@ function TagInput({
   autoFocus = false,
   className
 }) {
-  const styles = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles2 = 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);
@@ -4148,7 +4920,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles.box(),
+          styles2.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -5888,45 +6660,45 @@ var tabsStyles = tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles = tabsStyles({ size });
+  const styles2 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tabs$1,
     {
       ...props,
-      className: (rp) => cn(styles.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles2.root(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function List({ size, className, children, ...props }) {
-  const styles = tabsStyles({ size });
+  const styles2 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     TabList,
     {
       ...props,
-      className: (rp) => cn(styles.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles2.list(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Trigger({ size, className, children, ...props }) {
-  const styles = tabsStyles({ size });
+  const styles2 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tab,
     {
       ...props,
-      className: (rp) => cn(styles.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles2.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles = tabsStyles({});
+  const styles2 = tabsStyles({});
   return /* @__PURE__ */ jsx(
     TabPanel,
     {
       ...props,
-      className: (rp) => cn(styles.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles2.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -5950,7 +6722,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -5970,8 +6742,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.
-              styles.box(),
-              styles.content(),
+              styles2.box(),
+              styles2.content(),
               "min-h-[100px] resize-y",
               textareaClassName
             )
@@ -5992,7 +6764,7 @@ function TimeField({
   className,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = 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,
@@ -6008,8 +6780,8 @@ function TimeField({
           DateInput,
           {
             className: cn(
-              styles.box(),
-              styles.content(),
+              styles2.box(),
+              styles2.content(),
               "flex items-center min-w-0 text-ink",
               // Tabular alignment for time segments — overrides content's
               // font-sans on purpose.
@@ -6064,6 +6836,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, Checkbox, CheckboxGroup, ChipValue, Combobox, Command, CommandHint, CurrencyInput, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, EmptyState, ErrorAnimation, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, Menu, MenuItem, MenuPopover, MenuTrigger, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, Tooltip, TooltipTrigger, TruncateCell, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, countLeaves, defaultValueFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isEditableTarget, isPreviewableImageName, makeActionsColumn, navItemStyles, operatorById, operatorsForType, parseCombo, progressBarStyles, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, removeLeaf, removeSubgroup, replaceLeaf, segmentedControlStyles, setJoiner, tableCellStyles, tableHeaderCellStyles, tabsStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, 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, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, ChipValue, Combobox, Command, CommandHint, CurrencyInput, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageComposer, EmptyState, ErrorAnimation, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, 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, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, countLeaves, createDraftMessageClient, defaultValueFor, draftMessageComposerStyles, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isEditableTarget, isPreviewableImageName, makeActionsColumn, messageComposerStyles, navItemStyles, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, tableCellStyles, tableHeaderCellStyles, tabsStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map