@proteos/ui 0.42.2 → 0.43.0

package/dist/index.cjs

@@ -587,7 +587,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] = react.useState(false);
@@ -627,7 +627,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -924,6 +924,29 @@ function CardFeatureTitle({ className, ...props }) {
 function CardBody({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: chunkMWAXK66H_cjs.cn("text-[14px] leading-[1.55] text-ink-3", className) });
 }
+var CHANNEL_ICONS = {
+  slack: lucideReact.Hash,
+  email: lucideReact.Mail,
+  whatsapp: lucideReact.MessageCircle,
+  linkedin: lucideReact.Linkedin,
+  telegram: lucideReact.Send,
+  instagram: lucideReact.Camera,
+  messenger: lucideReact.MessagesSquare,
+  x: lucideReact.AtSign,
+  meeting: lucideReact.Mic,
+  "zoom-meeting": lucideReact.Video,
+  "google-meet": lucideReact.Video,
+  "teams-meeting": lucideReact.Video,
+  "webex-meeting": lucideReact.Video,
+  adhoc: lucideReact.AudioLines
+};
+function channelIcon(channel) {
+  return CHANNEL_ICONS[channel] ?? lucideReact.MessagesSquare;
+}
+function ChannelIcon({ channel, className, label }) {
+  const Icon = channelIcon(channel);
+  return label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: chunkMWAXK66H_cjs.cn("size-4", className), role: "img", "aria-label": label }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: chunkMWAXK66H_cjs.cn("size-4", className), "aria-hidden": true });
+}
 function Checkbox({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Checkbox,
@@ -1021,7 +1044,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.ComboBox,
@@ -1040,7 +1063,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-2",
               focusWithin,
               inputWrapperClassName
@@ -1052,7 +1075,7 @@ function Combobox({
                   placeholder,
                   className: chunkMWAXK66H_cjs.cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles2.content(),
+                    styles3.content(),
                     inputClassName
                   )
                 }
@@ -1492,16 +1515,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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles3.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",
-            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"
@@ -2575,7 +2598,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.DatePicker,
@@ -2593,7 +2616,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2603,7 +2626,7 @@ function DatePicker({
                 {
                   className: chunkMWAXK66H_cjs.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"
@@ -2725,7 +2748,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;
@@ -2748,7 +2771,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.
-              styles2.box(),
+              styles3.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -2758,7 +2781,7 @@ function DateTimePicker({
                 {
                   className: chunkMWAXK66H_cjs.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"
@@ -2818,6 +2841,69 @@ function DateTimePicker({
     }
   );
 }
+var draftMessageCardStyles = tailwindVariants.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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsxRuntime.jsx(ChannelIcon, { channel }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.title(), children: title }),
+      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.recipients(), children: [
+        "To ",
+        recipients.join(", ")
+      ] }) : null
+    ] }),
+    outcome ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Button,
+      {
+        onPress: onPreview ?? (() => {
+        }),
+        isDisabled: isPreviewDisabled,
+        className: styles.action(),
+        children: previewLabel
+      }
+    )
+  ] });
+}
 
 // src/components/draft-message-composer/create-draft-message-client.ts
 function createDraftMessageClient(conversation) {
@@ -2887,7 +2973,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] = react.useState(false);
@@ -2934,7 +3020,7 @@ function MultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -3184,7 +3270,7 @@ function Select({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.Select,
     {
@@ -3199,8 +3285,8 @@ function Select({
           reactAriaComponents.Button,
           {
             className: chunkMWAXK66H_cjs.cn(
-              styles2.box(),
-              styles2.content(),
+              styles3.box(),
+              styles3.content(),
               "flex items-center justify-between gap-3 text-left cursor-pointer",
               triggerClassName
             ),
@@ -3593,6 +3679,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 = tailwindVariants.tv({
   slots: {
     root: "flex flex-col gap-1.5",
@@ -3610,28 +3717,13 @@ var draftMessageComposerStyles = tailwindVariants.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,
@@ -3841,10 +3933,10 @@ function DraftMessageComposer({
     [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" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.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: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles2.terminal(), children: [
       loadError ?? "Loading the draft failed.",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3859,12 +3951,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__ */ 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.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.header(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.sender(), children: [
         "from ",
         message.sender.name
       ] })
@@ -3895,11 +3987,11 @@ function DraftMessageComposer({
         showSendButton: showActions
       }
     ),
-    actionError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.error(), children: [
+    actionError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles2.error(), children: [
       actionError,
       " \u2014 your edits are kept."
     ] }) : null,
-    showActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions(), children: [
+    showActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.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(
@@ -3936,6 +4028,207 @@ function DraftMessageComposer({
     ] }) : null
   ] });
 }
+function Modal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ModalOverlay,
+    {
+      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(
+        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
+      )
+    }
+  );
+}
+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)
+    }
+  );
+}
+function DraftMessageReview({
+  messageId,
+  client,
+  onPreview,
+  onOutcome,
+  onLoadError,
+  modalTitle = "Review draft",
+  modalClassName = "max-w-3xl",
+  overlayClassName,
+  previewLabel,
+  className
+}) {
+  const [message, setMessage] = react.useState(null);
+  const [subject, setSubject] = react.useState("");
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [isPreviewing, setIsPreviewing] = react.useState(false);
+  const [outcome, setOutcome] = react.useState(null);
+  const onOutcomeRef = react.useRef(onOutcome);
+  onOutcomeRef.current = onOutcome;
+  const onLoadErrorRef = react.useRef(onLoadError);
+  onLoadErrorRef.current = onLoadError;
+  const hasSettledRef = react.useRef(false);
+  const settle = react.useCallback((next, settled) => {
+    setOutcome(next);
+    setIsOpen(false);
+    if (hasSettledRef.current) return;
+    hasSettledRef.current = true;
+    onOutcomeRef.current?.(next, settled);
+  }, []);
+  react.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);
+  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      ModalContent,
+      {
+        isOpen,
+        onOpenChange: setIsOpen,
+        modalClassName,
+        ...overlayClassName !== void 0 ? { className: overlayClassName } : {},
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: modalTitle }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { className: "min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.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 = tailwindVariants.tv({
   slots: {
     root: "flex flex-col items-center text-center px-6",
@@ -3966,12 +4259,12 @@ function EmptyState({
   size,
   className
 }) {
-  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
+  const styles3 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.art(), children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.title(), children: title }),
+    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -4212,7 +4505,7 @@ function Input({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance, hasFocusRing });
+  const styles3 = fieldControlStyles({ size, appearance, hasFocusRing });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TextField,
     {
@@ -4228,7 +4521,7 @@ function Input({
           {
             ...inputProps,
             placeholder: placeholder ?? "",
-            className: chunkMWAXK66H_cjs.cn(styles2.box(), styles2.content(), inputClassName)
+            className: chunkMWAXK66H_cjs.cn(styles3.box(), styles3.content(), inputClassName)
           }
         ),
         description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
@@ -4291,92 +4584,6 @@ function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
     }
   );
 }
-function Modal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
-  className,
-  modalClassName,
-  isDismissable = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ModalOverlay,
-    {
-      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(
-        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
-      )
-    }
-  );
-}
-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);
@@ -4863,7 +5070,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles2 = segmentedControlStyles({ size });
+  const styles3 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.RadioGroup,
     {
@@ -4871,14 +5078,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: chunkMWAXK66H_cjs.cn(styles2.group(), className),
+      className: chunkMWAXK66H_cjs.cn(styles3.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: styles2.segment(),
+          className: styles3.segment(),
           children: option.label
         },
         String(option.id)
@@ -4901,7 +5108,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 = react.useRef(null);
@@ -4942,7 +5149,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles2.box(),
+          styles3.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -6682,45 +6889,45 @@ var tabsStyles = tailwindVariants.tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles2 = tabsStyles({ size });
+  const styles3 = tabsStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Tabs,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
     reactAriaComponents.TabList,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
     reactAriaComponents.Tab,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles2 = tabsStyles({});
+  const styles3 = tabsStyles({});
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TabPanel,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles2.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -6744,7 +6951,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles3 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TextField,
     {
@@ -6764,8 +6971,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.
-              styles2.box(),
-              styles2.content(),
+              styles3.box(),
+              styles3.content(),
               "min-h-[100px] resize-y",
               textareaClassName
             )
@@ -6786,7 +6993,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__ */ jsxRuntime.jsxs(
     reactAriaComponents.TimeField,
@@ -6802,8 +7009,8 @@ function TimeField({
           reactAriaComponents.DateInput,
           {
             className: chunkMWAXK66H_cjs.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.
@@ -6899,6 +7106,7 @@ exports.CardFeatureTitle = CardFeatureTitle;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.ChannelIcon = ChannelIcon;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ChipValue = ChipValue;
@@ -6906,6 +7114,7 @@ exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandHint = CommandHint;
 exports.CurrencyInput = CurrencyInput;
+exports.DRAFT_OUTCOME_LABEL = DRAFT_OUTCOME_LABEL;
 exports.DataTable = DataTable;
 exports.DataTableEmpty = DataTableEmpty;
 exports.DataTableError = DataTableError;
@@ -6914,7 +7123,9 @@ exports.DateCell = DateCell;
 exports.DatePicker = DatePicker;
 exports.DateTimeCell = DateTimeCell;
 exports.DateTimePicker = DateTimePicker;
+exports.DraftMessageCard = DraftMessageCard;
 exports.DraftMessageComposer = DraftMessageComposer;
+exports.DraftMessageReview = DraftMessageReview;
 exports.EmptyState = EmptyState;
 exports.ErrorAnimation = ErrorAnimation;
 exports.FieldCaret = FieldCaret;
@@ -6996,10 +7207,13 @@ exports.avatarGroupStyles = avatarGroupStyles;
 exports.avatarStyles = avatarStyles;
 exports.badgeStyles = badgeStyles;
 exports.cardStyles = cardStyles2;
+exports.channelIcon = channelIcon;
 exports.countLeaves = countLeaves;
 exports.createDraftMessageClient = createDraftMessageClient;
 exports.defaultValueFor = defaultValueFor;
+exports.draftMessageCardStyles = draftMessageCardStyles;
 exports.draftMessageComposerStyles = draftMessageComposerStyles;
+exports.draftOutcomeFor = draftOutcomeFor;
 exports.emptyStateStyles = emptyStateStyles;
 exports.fieldControlStyles = fieldControlStyles;
 exports.fieldErrorStyles = fieldErrorStyles;
@@ -7013,6 +7227,7 @@ exports.iconForContentType = iconForContentType;
 exports.imageAttachmentStyles = imageAttachmentStyles;
 exports.imageLightboxStyles = imageLightboxStyles;
 exports.isColumnDragData = isColumnDragData;
+exports.isDraftReviewOutcome = isDraftReviewOutcome;
 exports.isEditableTarget = isEditableTarget;
 exports.isPreviewableImageName = isPreviewableImageName;
 exports.makeActionsColumn = makeActionsColumn;
@@ -7035,6 +7250,7 @@ exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
 exports.tableCellStyles = tableCellStyles;
 exports.tableHeaderCellStyles = tableHeaderCellStyles;
 exports.tabsStyles = tabsStyles;
+exports.terminalKindFor = terminalKindFor;
 exports.updateLeaf = updateLeaf;
 exports.updateSubgroup = updateSubgroup;
 exports.useAttributeTypeIcon = useAttributeTypeIcon;