@proteos/ui 0.31.0 → 0.32.0

package/dist/index.cjs

@@ -574,7 +574,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] = react.useState(false);
@@ -614,7 +614,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles.box(),
+          styles2.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -1008,7 +1008,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.ComboBox,
@@ -1027,7 +1027,7 @@ function Combobox({
             className: chunkMWAXK66H_cjs.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
@@ -1039,7 +1039,7 @@ function Combobox({
                   placeholder,
                   className: chunkMWAXK66H_cjs.cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles.content(),
+                    styles2.content(),
                     inputClassName
                   )
                 }
@@ -1479,16 +1479,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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           className: chunkMWAXK66H_cjs.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"
@@ -2562,7 +2562,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.DatePicker,
@@ -2580,7 +2580,7 @@ function DatePicker({
             className: chunkMWAXK66H_cjs.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
             ),
@@ -2590,7 +2590,7 @@ function DatePicker({
                 {
                   className: chunkMWAXK66H_cjs.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"
@@ -2712,7 +2712,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;
@@ -2735,7 +2735,7 @@ function DateTimePicker({
             className: chunkMWAXK66H_cjs.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
             ),
@@ -2745,7 +2745,7 @@ function DateTimePicker({
                 {
                   className: chunkMWAXK66H_cjs.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"
@@ -2805,6 +2805,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 react.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] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const triggerRef = react.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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
+          ) : selectedOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { onRemove: () => remove(o.id), isDisabled, children: o.content ?? o.label }, o.id)),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {}) })
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldHintStyles, children: description }) : null,
+    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Popover,
+      {
+        isOpen,
+        onOpenChange: openPopover,
+        triggerRef,
+        offset: 6,
+        placement: "bottom start",
+        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: search,
+              onChange: (e) => updateSearch(e.target.value),
+              placeholder: "Search\u2026",
+              "aria-label": "Search options",
+              className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+            reactAriaComponents.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: needle !== "" ? "No matches" : "All options selected" }),
+              children: listboxOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                reactAriaComponents.ListBoxItem,
+                {
+                  id: option.id,
+                  textValue: option.label,
+                  ...option.isDisabled ? { isDisabled: true } : {},
+                  className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(Checkmark, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
+                  ]
+                },
+                option.id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Chip({
+  children,
+  onRemove,
+  isDisabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            disabled: isDisabled,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M2 2l6 6M8 2l-6 6",
+                stroke: "currentColor",
+                strokeWidth: "1.4",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Checkmark() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: "0 0 12 12",
+          className: chunkMWAXK66H_cjs.cn(
+            "size-3 text-surface transition-opacity duration-150",
+            "opacity-0 group-data-[selected]:opacity-100"
+          ),
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsxRuntime.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] = react.useState("");
+  const [debouncedSearch, setDebouncedSearch] = react.useState("");
+  react.useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedSearch(search.trim()), SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [search]);
+  const [addresses, setAddresses] = react.useState([]);
+  const requestIdRef = react.useRef(0);
+  react.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Select,
+    {
+      ...props,
+      className: (renderProps) => chunkMWAXK66H_cjs.cn(
+        "grid grid-cols-1 gap-1.5",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Button,
+          {
+            className: chunkMWAXK66H_cjs.cn(
+              styles2.box(),
+              styles2.content(),
+              "flex items-center justify-between gap-3 text-left cursor-pointer",
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
+              /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {})
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Popover,
+          {
+            offset: 6,
+            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectItem(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.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 = tailwindVariants.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] = react.useState(false);
+  const [sendError, setSendError] = react.useState(null);
+  const [internalTo, setInternalTo] = react.useState([]);
+  const [internalCc, setInternalCc] = react.useState([]);
+  const [internalBcc, setInternalBcc] = react.useState([]);
+  const [showCcBcc, setShowCcBcc] = react.useState(false);
+  const textareaRef = react.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;
+  react.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 = react.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__ */ jsxRuntime.jsx("div", { className: "px-[18px] py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      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__ */ jsxRuntime.jsxs("div", { className: "px-[18px] pb-3.5 pt-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(messageComposerStyles(), className), children: [
+      connectionPicker ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: ROW_LABEL, children: "Via" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Subject" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 truncate text-[13px] text-ink", children: subject }),
+        ccBccReveal
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Subject" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: ROW_LABEL, children: "To" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          RecipientSelect,
+          {
+            connectionId: directory.connectionId,
+            searchRecipients: directory.searchRecipients,
+            placeholder: "Pick recipients\u2026",
+            value: to,
+            onChange: setTo
+          }
+        ) })
+      ] }) : null,
+      canPickRecipients && directory && showCcBcc ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ROW_LABEL, children: "Cc" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            RecipientSelect,
+            {
+              connectionId: directory.connectionId,
+              searchRecipients: directory.searchRecipients,
+              placeholder: "Add cc\u2026",
+              value: cc,
+              onChange: setCc
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ROW_LABEL, children: "Bcc" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto px-3.5 pt-2 pb-0.5", children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 px-3.5 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: value.text,
+            placeholder,
+            rows: 1,
+            onChange: (event) => {
+              onValueChange({ ...value, text: event.target.value });
+              autoGrow(event.currentTarget);
+            },
+            onKeyDown: onKeyDown2,
+            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          onAddFiles ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.FileTrigger,
+            {
+              allowsMultiple: true,
+              onSelect: (files) => {
+                if (files) onAddFiles(Array.from(files));
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkMWAXK66H_cjs.Button,
+                {
+                  variant: "subtle",
+                  size: "icon-md",
+                  "aria-label": "Attach files",
+                  className: "shrink-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          isSendButtonShown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-ink-4 select-none", "aria-hidden": true, children: mode === "email" ? "\u2318\u21B5" : "\u21B5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactAriaComponents.Button,
+              {
+                "aria-label": "Send",
+                isDisabled: !canSend || isSending,
+                onPress: () => void submit(),
+                className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(lucideReact.SendHorizontal, { className: "size-3.5" })
+              }
+            )
+          ] }) : null
+        ] })
+      ] })
+    ] }),
+    sendError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1.5 font-mono text-[11px] text-danger", children: [
+      sendError,
+      " \u2014 your message is kept above.",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Button,
+        {
+          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 react.useSyncExternalStore(
+    (listener) => subscribeDraftMessageOutcome(messageId, listener),
+    () => lastOutcomeByMessageId.get(messageId) ?? null,
+    () => null
+  );
+}
+function __resetDraftMessageOutcomes() {
+  listenersByMessageId2.clear();
+  lastOutcomeByMessageId.clear();
+}
+var draftMessageComposerStyles = tailwindVariants.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] = react.useState("loading");
+  const [busy, setBusy] = react.useState("idle");
+  const [terminalKind, setTerminalKind] = react.useState("not-draft");
+  const [message, setMessage] = react.useState(null);
+  const [conversation, setConversation] = react.useState(null);
+  const [loadError, setLoadError] = react.useState(null);
+  const [actionError, setActionError] = react.useState(null);
+  const [isConfirmingReject, setIsConfirmingReject] = react.useState(false);
+  const [value, setValue] = react.useState({ text: "" });
+  const [to, setTo] = react.useState([]);
+  const [cc, setCc] = react.useState([]);
+  const [bcc, setBcc] = react.useState([]);
+  const [snapshot, setSnapshot] = react.useState({
+    text: "",
+    subject: "",
+    to: [],
+    cc: [],
+    bcc: []
+  });
+  const [loadNonce, setLoadNonce] = react.useState(0);
+  const isEmail = message?.channel === "email";
+  const isSubjectEditable = isEmail && conversation?.status === "draft";
+  const areRecipientsEditable = isEmail && !conversation?.room_id;
+  const seed = react.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);
+  }, []);
+  react.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 = react.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 = react.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 = react.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 = react.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 = react.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 = react.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 = react.useRef(send);
+  const rejectRef = react.useRef(reject);
+  const saveRef = react.useRef(saveDraft);
+  sendRef.current = send;
+  rejectRef.current = reject;
+  saveRef.current = saveDraft;
+  react.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 = react.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.terminal(), children: "Loading draft\u2026" }) });
+  }
+  if (phase === "load-error") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.terminal(), children: [
+      loadError ?? "Loading the draft failed.",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Button,
+        {
+          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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.terminal(), children: line }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.sender(), children: [
+        "from ",
+        message.sender.name
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: styles.error(), children: [
+      actionError,
+      " \u2014 your edits are kept."
+    ] }) : null,
+    showActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions(), children: [
+      isConfirmingReject ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12.5px] text-ink-3", children: "Reject draft?" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkMWAXK66H_cjs.Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            onPress: () => void reject(true),
+            isDisabled: busy !== "idle",
+            children: "Confirm reject"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMWAXK66H_cjs.Button, { size: "sm", variant: "subtle", onPress: () => setIsConfirmingReject(false), children: "Cancel" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMWAXK66H_cjs.Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onPress: () => void reject(false),
+          isDisabled: busy !== "idle",
+          children: "Reject"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMWAXK66H_cjs.Button,
+        {
+          size: "sm",
+          variant: "subtle",
+          onPress: () => void saveDraft(),
+          isDisabled: busy !== "idle" || !isDirty,
+          children: busy === "saving" ? "Saving\u2026" : "Save draft"
+        }
+      )
+    ] }) : null
+  ] });
+}
 var emptyStateStyles = tailwindVariants.tv({
   slots: {
     root: "flex flex-col items-center text-center px-6",
@@ -2835,12 +3946,12 @@ function EmptyState({
   size,
   className
 }) {
-  const styles = emptyStateStyles({ size });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: [
-    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.art(), children: icon }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title(), children: title }),
-    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.description(), children: description }) : null,
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.actions(), children: action }) : null
+  const styles2 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.art(), children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.title(), children: title }),
+    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -3068,427 +4179,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__ */ jsxRuntime.jsxs(
-    reactAriaComponents.TextField,
-    {
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "grid grid-cols-1 gap-1.5",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactAriaComponents.Input,
-          {
-            ...inputProps,
-            placeholder: placeholder ?? "",
-            className: chunkMWAXK66H_cjs.cn(styles.box(), styles.content(), inputClassName)
-          }
-        ),
-        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
-        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
-      ]
-    }
-  );
-}
-var MenuTrigger = reactAriaComponents.MenuTrigger;
-var SubmenuTrigger = reactAriaComponents.SubmenuTrigger;
-function MenuPopover({ className, offset = 4, placement = "bottom start", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Popover,
-    {
-      offset,
-      placement,
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-    reactAriaComponents.Menu,
-    {
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "flex flex-col gap-px outline-none",
-        typeof className === "function" ? className(renderProps) : className
-      )
-    }
-  );
-}
-var menuItemStyles = chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs(
-    reactAriaComponents.MenuItem,
-    {
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(menuItemStyles, typeof className === "function" ? className(renderProps) : className),
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children }),
-        hasSubmenu ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
-      ]
-    }
-  );
-}
-function Modal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
+function Input({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  size,
+  appearance,
+  inputProps,
+  inputClassName,
   className,
-  modalClassName,
-  isDismissable = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ModalOverlay,
+  const styles2 = fieldControlStyles({ size, appearance });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
     {
-      isDismissable,
       ...props,
       className: (renderProps) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-        reactAriaComponents.Modal,
-        {
-          className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
-        }
-      )
-    }
-  );
-}
-function ModalHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: chunkMWAXK66H_cjs.cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
-}
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Heading,
-    {
-      slot: "title",
-      ...props,
-      className: chunkMWAXK66H_cjs.cn(
-        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
-        className
-      )
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Input,
+          {
+            ...inputProps,
+            placeholder: placeholder ?? "",
+            className: chunkMWAXK66H_cjs.cn(styles2.box(), styles2.content(), inputClassName)
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
+      ]
     }
   );
 }
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: chunkMWAXK66H_cjs.cn("text-[14px] leading-[1.55] text-ink-3", className) });
-}
-function ModalBody({ className, ...props }) {
+var MenuTrigger = reactAriaComponents.MenuTrigger;
+var SubmenuTrigger = reactAriaComponents.SubmenuTrigger;
+function MenuPopover({ className, offset = 4, placement = "bottom start", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    reactAriaComponents.Popover,
     {
+      offset,
+      placement,
       ...props,
-      className: chunkMWAXK66H_cjs.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) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: chunkMWAXK66H_cjs.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] = react.useState(false);
-  const [search, setSearch] = react.useState("");
-  const triggerRef = react.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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
-          ) : selectedOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { onRemove: () => remove(o.id), isDisabled, children: o.content ?? o.label }, o.id)),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {}) })
-        ]
-      }
-    ),
-    description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldHintStyles, children: description }) : null,
-    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactAriaComponents.Popover,
-      {
-        isOpen,
-        onOpenChange: openPopover,
-        triggerRef,
-        offset: 6,
-        placement: "bottom start",
-        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              autoFocus: true,
-              value: search,
-              onChange: (e) => updateSearch(e.target.value),
-              placeholder: "Search\u2026",
-              "aria-label": "Search options",
-              className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-            reactAriaComponents.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: needle !== "" ? "No matches" : "All options selected" }),
-              children: listboxOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-                reactAriaComponents.ListBoxItem,
-                {
-                  id: option.id,
-                  textValue: option.label,
-                  ...option.isDisabled ? { isDisabled: true } : {},
-                  className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(Checkmark, {}),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
-                  ]
-                },
-                option.id
-              ))
-            }
-          )
-        ]
-      }
-    )
-  ] });
+    reactAriaComponents.Menu,
+    {
+      ...props,
+      className: (renderProps) => chunkMWAXK66H_cjs.cn(
+        "flex flex-col gap-px outline-none",
+        typeof className === "function" ? className(renderProps) : className
+      )
+    }
+  );
 }
-function Chip({
-  children,
-  onRemove,
-  isDisabled
-}) {
+var menuItemStyles = chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs(
-    "span",
+    reactAriaComponents.MenuItem,
     {
-      className: chunkMWAXK66H_cjs.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) => chunkMWAXK66H_cjs.cn(menuItemStyles, typeof className === "function" ? className(renderProps) : className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Remove",
-            disabled: isDisabled,
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove();
-            },
-            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M2 2l6 6M8 2l-6 6",
-                stroke: "currentColor",
-                strokeWidth: "1.4",
-                strokeLinecap: "round"
-              }
-            ) })
-          }
-        )
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children }),
+        hasSubmenu ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
       ]
     }
   );
 }
-function Checkmark() {
+function Modal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    reactAriaComponents.ModalOverlay,
     {
-      "aria-hidden": true,
-      className: chunkMWAXK66H_cjs.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) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-        "svg",
+        reactAriaComponents.Modal,
         {
-          viewBox: "0 0 12 12",
           className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
         }
       )
     }
   );
 }
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: chunkMWAXK66H_cjs.cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      slot: "title",
+      ...props,
+      className: chunkMWAXK66H_cjs.cn(
+        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
+        className
+      )
+    }
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: chunkMWAXK66H_cjs.cn("text-[14px] leading-[1.55] text-ink-3", className) });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
+    }
+  );
+}
 var NavNestedContext = react.createContext(false);
 function useIsNested() {
   return react.useContext(NavNestedContext);
@@ -3975,7 +4842,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles = segmentedControlStyles({ size });
+  const styles2 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.RadioGroup,
     {
@@ -3983,14 +4850,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: chunkMWAXK66H_cjs.cn(styles.group(), className),
+      className: chunkMWAXK66H_cjs.cn(styles2.group(), className),
       children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
         reactAriaComponents.Radio,
         {
           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)
@@ -3998,101 +4865,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__ */ jsxRuntime.jsxs(
-    reactAriaComponents.Select,
-    {
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "grid grid-cols-1 gap-1.5",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          reactAriaComponents.Button,
-          {
-            className: chunkMWAXK66H_cjs.cn(
-              styles.box(),
-              styles.content(),
-              "flex items-center justify-between gap-3 text-left cursor-pointer",
-              triggerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
-              /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {})
-            ]
-          }
-        ),
-        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
-        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          reactAriaComponents.Popover,
-          {
-            offset: 6,
-            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectItem(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ListBoxItem,
-    {
-      ...props,
-      className: chunkMWAXK66H_cjs.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,
@@ -4108,7 +4880,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 = react.useRef(null);
@@ -4149,7 +4921,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles.box(),
+          styles2.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -5889,45 +6661,45 @@ var tabsStyles = tailwindVariants.tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles = tabsStyles({ size });
+  const styles2 = tabsStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Tabs,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
     reactAriaComponents.TabList,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
     reactAriaComponents.Tab,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles = tabsStyles({});
+  const styles2 = tabsStyles({});
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TabPanel,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -5951,7 +6723,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles = fieldControlStyles({ size, appearance });
+  const styles2 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TextField,
     {
@@ -5971,8 +6743,8 @@ function Textarea({
             className: chunkMWAXK66H_cjs.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
             )
@@ -5993,7 +6765,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.TimeField,
@@ -6009,8 +6781,8 @@ function TimeField({
           reactAriaComponents.DateInput,
           {
             className: chunkMWAXK66H_cjs.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.
@@ -6121,6 +6893,7 @@ exports.DateCell = DateCell;
 exports.DatePicker = DatePicker;
 exports.DateTimeCell = DateTimeCell;
 exports.DateTimePicker = DateTimePicker;
+exports.DraftMessageComposer = DraftMessageComposer;
 exports.EmptyState = EmptyState;
 exports.ErrorAnimation = ErrorAnimation;
 exports.FieldCaret = FieldCaret;
@@ -6134,10 +6907,12 @@ exports.ImageLightbox = ImageLightbox;
 exports.Input = Input;
 exports.Kbd = Kbd;
 exports.LinkCell = LinkCell;
+exports.MAX_COMPOSER_ATTACHMENT_BYTES = MAX_COMPOSER_ATTACHMENT_BYTES;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuPopover = MenuPopover;
 exports.MenuTrigger = MenuTrigger;
+exports.MessageComposer = MessageComposer;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalContent = ModalContent;
@@ -6161,6 +6936,7 @@ exports.PressableCard = PressableCard;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.RecipientSelect = RecipientSelect;
 exports.RecordFilterBuilderPanel = RecordFilterBuilderPanel;
 exports.RecordFilterButton = RecordFilterButton;
 exports.RecordFilterChips = RecordFilterChips;
@@ -6188,6 +6964,8 @@ exports.TimeField = TimeField;
 exports.Tooltip = Tooltip;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TruncateCell = TruncateCell;
+exports.__resetDraftMessageActions = __resetDraftMessageActions;
+exports.__resetDraftMessageOutcomes = __resetDraftMessageOutcomes;
 exports.addFilterLeaf = addLeaf;
 exports.addPendingLeaf = addPendingLeaf;
 exports.addSubgroup = addSubgroup;
@@ -6198,7 +6976,9 @@ exports.avatarStyles = avatarStyles;
 exports.badgeStyles = badgeStyles;
 exports.cardStyles = cardStyles2;
 exports.countLeaves = countLeaves;
+exports.createDraftMessageClient = createDraftMessageClient;
 exports.defaultValueFor = defaultValueFor;
+exports.draftMessageComposerStyles = draftMessageComposerStyles;
 exports.emptyStateStyles = emptyStateStyles;
 exports.fieldControlStyles = fieldControlStyles;
 exports.fieldErrorStyles = fieldErrorStyles;
@@ -6215,18 +6995,22 @@ exports.isColumnDragData = isColumnDragData;
 exports.isEditableTarget = isEditableTarget;
 exports.isPreviewableImageName = isPreviewableImageName;
 exports.makeActionsColumn = makeActionsColumn;
+exports.messageComposerStyles = messageComposerStyles;
 exports.navItemStyles = navItemStyles;
 exports.operatorById = operatorById;
 exports.operatorsForType = operatorsForType;
 exports.parseCombo = parseCombo;
 exports.progressBarStyles = progressBarStyles;
+exports.publishDraftMessageOutcome = publishDraftMessageOutcome;
 exports.rebaseRowOnFieldChange = rebaseRowOnFieldChange;
 exports.rebaseRowOnOperatorChange = rebaseRowOnOperatorChange;
+exports.registerDraftMessageActions = registerDraftMessageActions;
 exports.removeLeaf = removeLeaf;
 exports.removeSubgroup = removeSubgroup;
 exports.replaceLeaf = replaceLeaf;
 exports.segmentedControlStyles = segmentedControlStyles;
 exports.setJoiner = setJoiner;
+exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
 exports.tableCellStyles = tableCellStyles;
 exports.tableHeaderCellStyles = tableHeaderCellStyles;
 exports.tabsStyles = tabsStyles;
@@ -6235,6 +7019,8 @@ exports.updateSubgroup = updateSubgroup;
 exports.useAttributeTypeIcon = useAttributeTypeIcon;
 exports.useCommand = useCommand;
 exports.useDiscoveryActive = useDiscoveryActive;
+exports.useDraftMessageActions = useDraftMessageActions;
+exports.useDraftMessageOutcome = useDraftMessageOutcome;
 exports.useEscapeKey = useEscapeKey;
 exports.useInfiniteScrollSentinel = useInfiniteScrollSentinel;
 exports.useRenderChipItem = useRenderChipItem;