@proteos/ui 0.42.2 → 0.43.0

package/dist/index.js

@@ -1,6 +1,6 @@
 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, SendHorizontal, 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, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, 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, 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';
@@ -586,7 +586,7 @@ function BadgeMultiSelect({
   autoFocus = false,
   className
 }) {
-  const styles2 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles3 = 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);
@@ -626,7 +626,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -923,6 +923,29 @@ function CardFeatureTitle({ className, ...props }) {
 function CardBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
 }
+var CHANNEL_ICONS = {
+  slack: Hash,
+  email: Mail,
+  whatsapp: MessageCircle,
+  linkedin: Linkedin,
+  telegram: Send,
+  instagram: Camera,
+  messenger: MessagesSquare,
+  x: AtSign,
+  meeting: Mic,
+  "zoom-meeting": Video,
+  "google-meet": Video,
+  "teams-meeting": Video,
+  "webex-meeting": Video,
+  adhoc: AudioLines
+};
+function channelIcon(channel) {
+  return CHANNEL_ICONS[channel] ?? MessagesSquare;
+}
+function ChannelIcon({ channel, className, label }) {
+  const Icon = channelIcon(channel);
+  return label !== void 0 ? /* @__PURE__ */ jsx(Icon, { className: cn("size-4", className), role: "img", "aria-label": label }) : /* @__PURE__ */ jsx(Icon, { className: cn("size-4", className), "aria-hidden": true });
+}
 function Checkbox({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(
     Checkbox$1,
@@ -1020,7 +1043,7 @@ function Combobox({
   allowsEmptyCollection = true,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = 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,
@@ -1039,7 +1062,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-2",
               focusWithin,
               inputWrapperClassName
@@ -1051,7 +1074,7 @@ function Combobox({
                   placeholder,
                   className: cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles2.content(),
+                    styles3.content(),
                     inputClassName
                   )
                 }
@@ -1491,16 +1514,16 @@ function CurrencyInput({
     onChange({ amount: nextAmount, currency_code: nextCode });
   };
   const selectedSymbol = currencyOptions.find((option) => option.code === code)?.symbol ?? code;
-  const styles2 = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
+  const styles3 = 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(styles2.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(styles3.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",
-            styles2.content(),
+            styles3.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"
@@ -2574,7 +2597,7 @@ function DatePicker({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = 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,
@@ -2592,7 +2615,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2602,7 +2625,7 @@ function DatePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles2.content(),
+                    styles3.content(),
                     // Tabular alignment for date segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -2724,7 +2747,7 @@ function DateTimePicker({
   shouldCloseOnSelect = false,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = 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;
@@ -2747,7 +2770,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2757,7 +2780,7 @@ function DateTimePicker({
                 {
                   className: cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles2.content(),
+                    styles3.content(),
                     // Tabular alignment for date/time segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -2817,6 +2840,69 @@ function DateTimePicker({
     }
   );
 }
+var draftMessageCardStyles = tv({
+  slots: {
+    root: [
+      "flex items-center gap-2.5 rounded-md border border-accent/40 px-3 py-2",
+      "bg-[color-mix(in_oklab,var(--color-accent)_6%,var(--color-surface))]"
+    ],
+    icon: [
+      "grid size-8 shrink-0 place-items-center rounded-full text-accent",
+      "bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]"
+    ],
+    body: "min-w-0 flex-1",
+    eyebrow: "font-mono text-[10px] uppercase tracking-[0.08em] text-accent",
+    title: "truncate text-[13px] font-medium text-ink",
+    recipients: "truncate text-[12px] text-ink-3",
+    action: [
+      "shrink-0 cursor-pointer rounded-sm border border-accent/50 px-2.5 py-1",
+      "font-mono text-[11px] text-accent outline-none",
+      "hover:bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]",
+      "focus-visible:shadow-[var(--shadow-focus)]",
+      "disabled:cursor-default disabled:opacity-50"
+    ],
+    outcome: "shrink-0 font-mono text-[11px] text-ink-3"
+  }
+});
+var styles = draftMessageCardStyles();
+var DRAFT_OUTCOME_LABEL = {
+  sent: "Sent",
+  rejected: "Rejected",
+  failed: "Approved, but delivery failed"
+};
+function DraftMessageCard({
+  channel,
+  title,
+  recipients,
+  eyebrow = "Draft \u2014 awaiting review",
+  previewLabel = "Review",
+  outcome,
+  onPreview,
+  isPreviewDisabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsx(ChannelIcon, { channel }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.body(), children: [
+      /* @__PURE__ */ jsx("p", { className: styles.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsx("p", { className: styles.title(), children: title }),
+      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxs("p", { className: styles.recipients(), children: [
+        "To ",
+        recipients.join(", ")
+      ] }) : null
+    ] }),
+    outcome ? /* @__PURE__ */ jsx("span", { className: styles.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        onPress: onPreview ?? (() => {
+        }),
+        isDisabled: isPreviewDisabled,
+        className: styles.action(),
+        children: previewLabel
+      }
+    )
+  ] });
+}
 
 // src/components/draft-message-composer/create-draft-message-client.ts
 function createDraftMessageClient(conversation) {
@@ -2886,7 +2972,7 @@ function MultiSelect({
   appearance,
   className
 }) {
-  const styles2 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles3 = 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);
@@ -2933,7 +3019,7 @@ function MultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -3183,7 +3269,7 @@ function Select({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxs(
     Select$1,
     {
@@ -3198,8 +3284,8 @@ function Select({
           Button$1,
           {
             className: cn(
-              styles2.box(),
-              styles2.content(),
+              styles3.box(),
+              styles3.content(),
               "flex items-center justify-between gap-3 text-left cursor-pointer",
               triggerClassName
             ),
@@ -3592,6 +3678,27 @@ function __resetDraftMessageOutcomes() {
   listenersByMessageId2.clear();
   lastOutcomeByMessageId.clear();
 }
+
+// src/components/draft-message-composer/draft-status.ts
+var OUTCOME_BY_STATUS = {
+  // `pending` is already handed to the transport — from the reviewer's side
+  // the decision was "send".
+  pending: "sent",
+  sent: "sent",
+  rejected: "rejected",
+  failed: "failed"
+};
+function terminalKindFor(status) {
+  if (status === "draft") return null;
+  return OUTCOME_BY_STATUS[status] ?? "not-draft";
+}
+function draftOutcomeFor(status) {
+  const kind = terminalKindFor(status);
+  return kind === null || kind === "not-draft" ? null : kind;
+}
+function isDraftReviewOutcome(value) {
+  return value === "sent" || value === "rejected" || value === "failed";
+}
 var draftMessageComposerStyles = tv({
   slots: {
     root: "flex flex-col gap-1.5",
@@ -3609,28 +3716,13 @@ var draftMessageComposerStyles = tv({
     error: "px-[18px] font-mono text-[11px] text-danger"
   }
 });
-var styles = draftMessageComposerStyles();
+var styles2 = 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,
@@ -3840,10 +3932,10 @@ function DraftMessageComposer({
     [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" }) });
+    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), children: /* @__PURE__ */ jsx("p", { className: styles2.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: [
+    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), children: /* @__PURE__ */ jsxs("p", { className: styles2.terminal(), children: [
       loadError ?? "Loading the draft failed.",
       " ",
       /* @__PURE__ */ jsx(
@@ -3858,12 +3950,12 @@ function DraftMessageComposer({
   }
   if (phase === "terminal" || !message) {
     const line = terminalKind === "sent" ? "This draft was sent." : terminalKind === "rejected" ? "This draft was rejected." : terminalKind === "failed" ? `Sending failed${message?.error ? ` \u2014 ${message.error}` : ""}.` : "This message is not a reviewable draft.";
-    return /* @__PURE__ */ jsx("div", { className: cn(styles.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsx("p", { className: styles.terminal(), children: line }) });
+    return /* @__PURE__ */ jsx("div", { className: cn(styles2.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsx("p", { className: styles2.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: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles2.root(), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles2.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: styles2.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxs("span", { className: styles2.sender(), children: [
         "from ",
         message.sender.name
       ] })
@@ -3894,11 +3986,11 @@ function DraftMessageComposer({
         showSendButton: showActions
       }
     ),
-    actionError ? /* @__PURE__ */ jsxs("p", { className: styles.error(), children: [
+    actionError ? /* @__PURE__ */ jsxs("p", { className: styles2.error(), children: [
       actionError,
       " \u2014 your edits are kept."
     ] }) : null,
-    showActions ? /* @__PURE__ */ jsxs("div", { className: styles.actions(), children: [
+    showActions ? /* @__PURE__ */ jsxs("div", { className: styles2.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(
@@ -3935,6 +4027,207 @@ function DraftMessageComposer({
     ] }) : null
   ] });
 }
+function Modal(props) {
+  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      isDismissable,
+      ...props,
+      className: (renderProps) => cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4",
+        // Warm ink scrim — stays in the Proteos palette (no pure black).
+        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
+        "entering:animate-in entering:fade-in-0 entering:duration-150",
+        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Modal$1,
+        {
+          className: cn(
+            "w-full max-w-lg",
+            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
+            // out as a column so a tall body scrolls instead of overflowing the
+            // screen. Short modals are unaffected — height still tracks content.
+            "flex flex-col max-h-[calc(100dvh-2rem)]",
+            "bg-surface border border-rule rounded-lg",
+            "shadow-[var(--shadow-float)]",
+            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
+            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
+            modalClassName
+          ),
+          children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
+        }
+      )
+    }
+  );
+}
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      slot: "title",
+      ...props,
+      className: cn(
+        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
+        className
+      )
+    }
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        // The scroll region: caps at the panel's spare height and scrolls when
+        // the content is taller, leaving header + footer pinned.
+        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
+        className
+      )
+    }
+  );
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
+    }
+  );
+}
+function DraftMessageReview({
+  messageId,
+  client,
+  onPreview,
+  onOutcome,
+  onLoadError,
+  modalTitle = "Review draft",
+  modalClassName = "max-w-3xl",
+  overlayClassName,
+  previewLabel,
+  className
+}) {
+  const [message, setMessage] = useState(null);
+  const [subject, setSubject] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPreviewing, setIsPreviewing] = useState(false);
+  const [outcome, setOutcome] = useState(null);
+  const onOutcomeRef = useRef(onOutcome);
+  onOutcomeRef.current = onOutcome;
+  const onLoadErrorRef = useRef(onLoadError);
+  onLoadErrorRef.current = onLoadError;
+  const hasSettledRef = useRef(false);
+  const settle = useCallback((next, settled) => {
+    setOutcome(next);
+    setIsOpen(false);
+    if (hasSettledRef.current) return;
+    hasSettledRef.current = true;
+    onOutcomeRef.current?.(next, settled);
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const loaded = await client.getMessage(messageId);
+        if (cancelled) return;
+        setMessage(loaded);
+        const terminal = draftOutcomeFor(loaded.status);
+        if (terminal) {
+          settle(terminal, loaded);
+          return;
+        }
+        if (loaded.conversation_id) {
+          const conversation = await client.getConversation(loaded.conversation_id);
+          if (!cancelled) setSubject(conversation.subject ?? "");
+        }
+      } catch (error) {
+        if (cancelled) return;
+        onLoadErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, messageId, settle]);
+  const published = useDraftMessageOutcome(messageId);
+  useEffect(() => {
+    if (published) settle(published.type, published.message);
+  }, [published, settle]);
+  const preview = () => {
+    if (!onPreview) {
+      setIsOpen(true);
+      return;
+    }
+    setIsPreviewing(true);
+    void onPreview(messageId).then((result) => {
+      if (result) settle(result);
+    }).finally(() => setIsPreviewing(false));
+  };
+  if (!message) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DraftMessageCard,
+      {
+        channel: message.channel,
+        title: titleFor(message, subject),
+        recipients: toRecipients(message),
+        outcome,
+        onPreview: preview,
+        isPreviewDisabled: isPreviewing,
+        ...previewLabel !== void 0 ? { previewLabel } : {},
+        ...className !== void 0 ? { className } : {}
+      }
+    ),
+    onPreview ? null : /* @__PURE__ */ jsxs(
+      ModalContent,
+      {
+        isOpen,
+        onOpenChange: setIsOpen,
+        modalClassName,
+        ...overlayClassName !== void 0 ? { className: overlayClassName } : {},
+        children: [
+          /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: modalTitle }) }),
+          /* @__PURE__ */ jsx(ModalBody, { className: "min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
+            DraftMessageComposer,
+            {
+              messageId,
+              client,
+              bodyClassName: "max-h-[55dvh]",
+              onSent: (sent) => settle(draftOutcomeFor(sent.status) ?? "sent", sent),
+              onRejected: (rejected) => settle("rejected", rejected),
+              onFailed: (failed) => settle("failed", failed)
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function titleFor(message, subject) {
+  const firstLine = message.content.find((block) => block.type === "text")?.text?.split("\n")[0];
+  return subject || firstLine || "Draft message";
+}
+function toRecipients(message) {
+  return (message.recipients ?? []).filter((recipient) => recipient.role === "to").map((recipient) => recipient.name || recipient.email || recipient.external_id).filter((label) => !!label);
+}
 var emptyStateStyles = tv({
   slots: {
     root: "flex flex-col items-center text-center px-6",
@@ -3965,12 +4258,12 @@ function EmptyState({
   size,
   className
 }) {
-  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
+  const styles3 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles3.root(), className), children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: styles3.art(), children: icon }) : null,
+    /* @__PURE__ */ jsx("div", { className: styles3.title(), children: title }),
+    description ? /* @__PURE__ */ jsx("div", { className: styles3.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: styles3.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -4211,7 +4504,7 @@ function Input({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance, hasFocusRing });
+  const styles3 = fieldControlStyles({ size, appearance, hasFocusRing });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -4227,7 +4520,7 @@ function Input({
           {
             ...inputProps,
             placeholder: placeholder ?? "",
-            className: cn(styles2.box(), styles2.content(), inputClassName)
+            className: cn(styles3.box(), styles3.content(), inputClassName)
           }
         ),
         description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
@@ -4290,92 +4583,6 @@ function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
     }
   );
 }
-function Modal(props) {
-  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
-  className,
-  modalClassName,
-  isDismissable = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ModalOverlay,
-    {
-      isDismissable,
-      ...props,
-      className: (renderProps) => cn(
-        "fixed inset-0 z-50 flex items-center justify-center p-4",
-        // Warm ink scrim — stays in the Proteos palette (no pure black).
-        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
-        "entering:animate-in entering:fade-in-0 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: /* @__PURE__ */ jsx(
-        Modal$1,
-        {
-          className: cn(
-            "w-full max-w-lg",
-            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
-            // out as a column so a tall body scrolls instead of overflowing the
-            // screen. Short modals are unaffected — height still tracks content.
-            "flex flex-col max-h-[calc(100dvh-2rem)]",
-            "bg-surface border border-rule rounded-lg",
-            "shadow-[var(--shadow-float)]",
-            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
-            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
-            modalClassName
-          ),
-          children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
-        }
-      )
-    }
-  );
-}
-function ModalHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
-}
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      slot: "title",
-      ...props,
-      className: cn(
-        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
-        className
-      )
-    }
-  );
-}
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { ...props, className: cn("text-[14px] leading-[1.55] text-ink-3", className) });
-}
-function ModalBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn(
-        // The scroll region: caps at the panel's spare height and scrolls when
-        // the content is taller, leaving header + footer pinned.
-        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
-        className
-      )
-    }
-  );
-}
-function ModalFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
-    }
-  );
-}
 var NavNestedContext = createContext(false);
 function useIsNested() {
   return useContext(NavNestedContext);
@@ -4862,7 +5069,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles2 = segmentedControlStyles({ size });
+  const styles3 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsx(
     RadioGroup$1,
     {
@@ -4870,14 +5077,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: cn(styles2.group(), className),
+      className: cn(styles3.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: styles2.segment(),
+          className: styles3.segment(),
           children: option.label
         },
         String(option.id)
@@ -4900,7 +5107,7 @@ function TagInput({
   autoFocus = false,
   className
 }) {
-  const styles2 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles3 = 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);
@@ -4941,7 +5148,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -6681,45 +6888,45 @@ var tabsStyles = tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles2 = tabsStyles({ size });
+  const styles3 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tabs$1,
     {
       ...props,
-      className: (rp) => cn(styles2.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles3.root(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function List({ size, className, children, ...props }) {
-  const styles2 = tabsStyles({ size });
+  const styles3 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     TabList,
     {
       ...props,
-      className: (rp) => cn(styles2.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles3.list(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Trigger({ size, className, children, ...props }) {
-  const styles2 = tabsStyles({ size });
+  const styles3 = tabsStyles({ size });
   return /* @__PURE__ */ jsx(
     Tab,
     {
       ...props,
-      className: (rp) => cn(styles2.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles3.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles2 = tabsStyles({});
+  const styles3 = tabsStyles({});
   return /* @__PURE__ */ jsx(
     TabPanel,
     {
       ...props,
-      className: (rp) => cn(styles2.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => cn(styles3.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -6743,7 +6950,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -6763,8 +6970,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.
-              styles2.box(),
-              styles2.content(),
+              styles3.box(),
+              styles3.content(),
               "min-h-[100px] resize-y",
               textareaClassName
             )
@@ -6785,7 +6992,7 @@ function TimeField({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = 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,
@@ -6801,8 +7008,8 @@ function TimeField({
           DateInput,
           {
             className: cn(
-              styles2.box(),
-              styles2.content(),
+              styles3.box(),
+              styles3.content(),
               "flex items-center min-w-0 text-ink",
               // Tabular alignment for time segments — overrides content's
               // font-sans on purpose.
@@ -6857,6 +7064,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, 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 };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, Combobox, Command, CommandHint, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, 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, channelIcon, countLeaves, createDraftMessageClient, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, makeActionsColumn, messageComposerStyles, navItemStyles, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map