@rapidmx/web-client 0.27.0 → 0.29.0

package/dist/apps/shared/components/mail/compose/ComposeContext.d.ts

@@ -38,6 +38,8 @@ export interface ComposeSession {
     late?: ComposeLateInput;
     /** See `OpenComposeInput.resume`. */
     resume?: ResumeCompose;
+    /** See `OpenComposeInput.inlineFor`. Absent once the window was opened without a host for it. */
+    inlineFor?: string;
     minimized: boolean;
 }
 /** What a reply or forward could only work out after its window was already open (see `OpenComposeInput.pending`). */
@@ -92,6 +94,13 @@ export interface OpenComposeInput {
     /** Re-opens a message that was already composed - a failed send's "Open draft": the window continues that server draft, with every field
      * exactly as it was typed, instead of starting a new one. */
     resume?: ResumeCompose;
+    /**
+     * The uid of the message this reply or forward answers. When the reading pane is showing a thread that holds that message (see
+     * `useInlineCompose()`), the compose window opens as a card above the thread instead of floating at the bottom right; the
+     * user can still pop it out to the floating stack, and it goes there by itself when the thread is left. Ignored - the window
+     * floats - when no pane is showing that message. Absent for a new message, which always floats.
+     */
+    inlineFor?: string;
 }
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */
@@ -105,6 +114,28 @@ export interface ComposeContextValue {
      */
     client?: ApiClient;
 }
+/** The part of a session a reading pane needs to draw its slot. */
+export interface InlineComposeSession {
+    id: string;
+    /** The uid of the message the window answers. */
+    inlineFor: string;
+}
+/**
+ * For a reading pane: announces that it is showing the messages `uids`, so a Reply or Forward of one of them opens its compose
+ * window as a card in that pane (drawn with `InlineComposeSlot`) rather than a floating window, and returns the sessions to
+ * draw a slot for. When the pane stops holding a message - it unmounts, or moves to another conversation - the window answering
+ * it moves out to the floating stack, with everything typed into it.
+ */
+export declare function useInlineCompose(uids: string[]): InlineComposeSession[];
+/**
+ * The list item a reading pane holds an inline compose window in. The window itself is owned (and kept alive) by
+ * `ComposeProvider`; this only moves the element it renders into into place. `onPlaced` is called once, as it arrives, for the pane
+ * to bring it into view.
+ */
+export declare function InlineComposeSlot({ id, onPlaced }: {
+    id: string;
+    onPlaced?: (slot: HTMLLIElement) => void;
+}): React.JSX.Element;
 /** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
 export declare function useCompose(): ComposeContextValue;
 /**

package/dist/apps/shared/components/mail/compose/ComposeContext.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
 import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import { registerComposeOpener } from "../../../mail/outbox/composeBridge.js";
@@ -69,6 +70,38 @@ function useComposeWindowComponent(wanted) {
     return { Component, failed, retry: () => setAttempt((n) => n + 1) };
 }
 const ComposeContext = createContext({ openCompose: () => undefined });
+const InlineComposeContext = createContext({ sessions: [], register: () => () => undefined, containerFor: () => undefined });
+/**
+ * For a reading pane: announces that it is showing the messages `uids`, so a Reply or Forward of one of them opens its compose
+ * window as a card in that pane (drawn with `InlineComposeSlot`) rather than a floating window, and returns the sessions to
+ * draw a slot for. When the pane stops holding a message - it unmounts, or moves to another conversation - the window answering
+ * it moves out to the floating stack, with everything typed into it.
+ */
+export function useInlineCompose(uids) {
+    const { sessions, register } = useContext(InlineComposeContext);
+    const key = uids.join(",");
+    useEffect(() => register(uids), [key, register]);
+    return useMemo(() => sessions.filter((session) => uids.includes(session.inlineFor)), [sessions, key]);
+}
+/**
+ * The list item a reading pane holds an inline compose window in. The window itself is owned (and kept alive) by
+ * `ComposeProvider`; this only moves the element it renders into into place. `onPlaced` is called once, as it arrives, for the pane
+ * to bring it into view.
+ */
+export function InlineComposeSlot({ id, onPlaced }) {
+    const { containerFor } = useContext(InlineComposeContext);
+    const slotRef = useRef(null);
+    useLayoutEffect(() => {
+        const slot = slotRef.current;
+        // Nothing to hold outside a `ComposeProvider`.
+        const container = containerFor(id);
+        if (container) {
+            slot.appendChild(container);
+        }
+        onPlaced?.(slot);
+    }, [id]);
+    return _jsx("li", { ref: slotRef, "data-inline-compose": id });
+}
 /** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
 export function useCompose() {
     return useContext(ComposeContext);
@@ -85,9 +118,55 @@ export default function ComposeProvider({ children, userUid, trusted }) {
     const client = useApiClient();
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
-    // The top edge of the compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
+    // Every session's window is rendered (through a portal) into an element of its own that is *moved* between the floating stack
+    // and a reading pane's slot, never re-created: a window that changed parents in the React tree would remount and lose what was typed.
+    const containersRef = useRef(new Map());
+    // The messages the reading panes currently showing a thread hold, one entry per pane (a ref too, for `openCompose()` to read at the click).
+    const hostsRef = useRef(new Map());
+    const [hostedUids, setHostedUids] = useState([]);
+    // The inline sessions that were popped out or whose pane went away: floating for good, even if a pane shows their message again.
+    const [parked, setParked] = useState(new Set());
+    const register = useCallback((uids) => {
+        const token = Symbol();
+        hostsRef.current.set(token, uids);
+        setHostedUids([...hostsRef.current.values()].flat());
+        return () => {
+            hostsRef.current.delete(token);
+            setHostedUids([...hostsRef.current.values()].flat());
+        };
+    }, []);
+    const hosted = new Set(hostedUids);
+    const isInline = (session) => !!session.inlineFor && !parked.has(session.id) && hosted.has(session.inlineFor);
+    const inlineKey = sessions.filter(isInline).map((session) => `${session.id}:${session.inlineFor}`).join("|");
+    const inlineSessions = useMemo(() => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor })), [inlineKey]);
+    const inlineValue = useMemo(() => ({ sessions: inlineSessions, register, containerFor: (id) => containersRef.current.get(id) }), [inlineSessions, register]);
+    const floatingSessions = sessions.filter((session) => !inlineSessions.some((inline) => inline.id === session.id));
+    // A session whose message is no longer in any pane (the reader went to another conversation) is parked in the stack.
+    useEffect(() => {
+        const orphans = sessions.filter((session) => session.inlineFor && !parked.has(session.id) && !hosted.has(session.inlineFor));
+        if (orphans.length > 0) {
+            setParked((prev) => new Set([...prev, ...orphans.map((session) => session.id)]));
+        }
+    }, [sessions, hostedUids, parked]);
+    // The elements of closed sessions go away with them.
+    useEffect(() => {
+        const open = new Set(sessions.map((session) => session.id));
+        for (const [id, element] of containersRef.current) {
+            if (!open.has(id)) {
+                element.remove();
+                containersRef.current.delete(id);
+            }
+        }
+    }, [sessions]);
+    useEffect(() => () => {
+        for (const element of containersRef.current.values()) {
+            element.remove();
+        }
+        containersRef.current.clear();
+    }, []);
+    // The top edge of the floating compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
     const windowsRef = useRef(null);
-    const hasSessions = sessions.length > 0;
+    const hasSessions = floatingSessions.length > 0;
     useEffect(() => {
         const element = windowsRef.current;
         if (!element) {
@@ -104,9 +183,14 @@ export default function ComposeProvider({ children, userUid, trusted }) {
             document.documentElement.style.removeProperty(COMPOSE_TOP_VAR);
         };
     }, [hasSessions]);
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, pending, resume, }) {
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, pending, resume, inlineFor, }) {
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
+        // The window's own element, attached to the page from the start (it is moved to its slot or the stack as soon as that is drawn).
+        const container = document.createElement("div");
+        container.className = "contents";
+        document.body.appendChild(container);
+        containersRef.current.set(id, container);
         setSessions((prev) => [
             ...prev,
             {
@@ -122,6 +206,8 @@ export default function ComposeProvider({ children, userUid, trusted }) {
                 suppressSigning,
                 quotePending: !!pending,
                 resume,
+                // Only a pane that is showing the message can hold the window.
+                inlineFor: inlineFor && [...hostsRef.current.values()].some((uids) => uids.includes(inlineFor)) ? inlineFor : undefined,
                 minimized: false,
             },
         ]);
@@ -132,6 +218,17 @@ export default function ComposeProvider({ children, userUid, trusted }) {
     }
     function closeCompose(id) {
         setSessions((prev) => prev.filter((s) => s.id !== id));
+        setParked((prev) => {
+            if (!prev.has(id)) {
+                return prev;
+            }
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
+    }
+    function popOut(id) {
+        setParked((prev) => new Set(prev).add(id));
     }
     function toggleMinimize(id) {
         setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, minimized: !s.minimized } : s)));
@@ -139,16 +236,31 @@ export default function ComposeProvider({ children, userUid, trusted }) {
     const value = useMemo(() => ({ openCompose, client }), [client]);
     // Code with no React context - a failed send's "Open draft" pop-up - opens windows through this.
     useEffect(() => registerComposeOpener((input) => value.openCompose(input)), [value]);
-    // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
+    // On mobile, a non-minimized floating `ComposeWindow` renders full-screen (see that component's own doc
     // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
     // at most one non-minimized session is ever shown: the most recently opened one. Minimized
     // sessions are small chips regardless of device, so every one of those still shows — an earlier
     // session becomes visible again (as its own chip, or full-screen if it's the new most-recent
     // non-minimized one) once whatever's currently "on top" is closed or minimized. The others stay
-    // mounted, just hidden: unmounting them would throw away everything typed into them.
-    const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
-    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, sessions.length > 0 && (_jsx("div", { ref: windowsRef, className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: sessions.map((session) => {
-                    const hidden = isMobile && !session.minimized && session.id !== lastNonMinimizedId;
-                    return (_jsx("div", { hidden: hidden, className: hidden ? "hidden" : "contents", children: ComposeWindow ? (_jsx(ComposeWindow, { session: session, userUid: userUid, trusted: trusted, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })) : (_jsx(ComposeWindowPlaceholder, { session: session, failed: failed, onRetry: retryLoad, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })) }, session.id));
-                }) }))] }));
+    // mounted, just hidden: unmounting them would throw away everything typed into them. An inline card
+    // is part of the reading pane and is never hidden.
+    const lastNonMinimizedId = isMobile ? [...floatingSessions].reverse().find((s) => !s.minimized)?.id : undefined;
+    // Puts every floating session's element in the stack (an inline one is put in its slot by `InlineComposeSlot`), and hides those
+    // the mobile rule above hides.
+    useLayoutEffect(() => {
+        for (const session of sessions) {
+            const element = containersRef.current.get(session.id);
+            const floating = floatingSessions.some((s) => s.id === session.id);
+            const hidden = floating && isMobile && !session.minimized && session.id !== lastNonMinimizedId;
+            element.hidden = hidden;
+            element.className = hidden ? "hidden" : "contents";
+            if (floating && element.parentElement !== windowsRef.current) {
+                windowsRef.current.appendChild(element);
+            }
+        }
+    });
+    return (_jsx(ComposeContext.Provider, { value: value, children: _jsxs(InlineComposeContext.Provider, { value: inlineValue, children: [children, sessions.map((session) => {
+                    const inline = inlineSessions.some((s) => s.id === session.id);
+                    return createPortal(ComposeWindow ? (_jsx(ComposeWindow, { session: session, userUid: userUid, trusted: trusted, inline: inline, onPopOut: () => popOut(session.id), onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })) : (_jsx(ComposeWindowPlaceholder, { session: session, failed: failed, inline: inline, onPopOut: () => popOut(session.id), onRetry: retryLoad, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) })), containersRef.current.get(session.id), session.id);
+                }), hasSessions && _jsx("div", { ref: windowsRef, className: "fixed bottom-0 right-6 flex items-end gap-3 z-50" })] }) }));
 }

package/dist/apps/shared/components/mail/compose/ComposeWindow.d.ts

@@ -4,6 +4,11 @@ export interface ComposeWindowProps {
     session: ComposeSession;
     onClose: () => void;
     onToggleMinimize: () => void;
+    /** The window is a card in the reading pane, above the message being replied to (see `ComposeSession.inlineFor`), not a floating
+     * window: full width, a fixed height, never minimized, resized or expanded, and "Pop out" in place of those. */
+    inline?: boolean;
+    /** Moves an `inline` window out to the floating stack at the bottom right. */
+    onPopOut?: () => void;
     /** The signed-in user - identifies their own ("primary") mailbox, the default From when the session
      * doesn't name a mailbox. */
     userUid?: string;
@@ -41,4 +46,4 @@ export declare const DEFAULT_CRYPTO_RETRY_DELAYS_MS: number[];
  * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
  * once.
  */
-export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs, autosaveMaxWaitMs, cryptoRetryDelaysMs, }: ComposeWindowProps): React.JSX.Element;
+export default function ComposeWindow({ session, onClose, onToggleMinimize, inline, onPopOut, userUid, trusted, autosaveDelayMs, autosaveMaxWaitMs, cryptoRetryDelaysMs, }: ComposeWindowProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -4,9 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineIdentification, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
+import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineArrowTopRightOnSquare, HiOutlineChevronDown, HiOutlineIdentification, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
-import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
+import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, deleteAttachment, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
 import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
 import { buildComposeBodyHtml } from "../../../../../lib/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
@@ -100,8 +100,10 @@ function HeaderButton({ label, onClick, icon: Icon, disabled, shortcut, }) {
  * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
  * once.
  */
-export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, autosaveMaxWaitMs = DEFAULT_AUTOSAVE_MAX_WAIT_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
-    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized, quotePending, late, resume } = session;
+export default function ComposeWindow({ session, onClose, onToggleMinimize, inline, onPopOut, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, autosaveMaxWaitMs = DEFAULT_AUTOSAVE_MAX_WAIT_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
+    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, quotePending, late, resume } = session;
+    // An inline card has no minimized state: the session's flag is for the floating window it may later be popped out to.
+    const minimized = session.minimized && !inline;
     // What a reply worked out after this window opened (see `OpenComposeInput.pending`): better recipients, applied below
     // only to fields still exactly as they opened - so these, not `initialTo`/`initialCc`, are what "untouched" is measured against.
     const baselineTo = late?.to ?? initialTo;
@@ -149,6 +151,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     const [html, setHtml] = useState(resume?.html ?? "");
     const [contentReady, setContentReady] = useState(!!resume);
     const [attachments, setAttachments] = useState(resume?.attachments ?? []);
+    // The attachment being removed from the draft, whose chip is held until the server has answered.
+    const [removingAttachmentUid, setRemovingAttachmentUid] = useState(null);
     // The sender's own contact card is on the message (or on its way): "Attach my contact card" then has nothing more to do.
     const [ownCardAttached, setOwnCardAttached] = useState(false);
     const [attachError, setAttachError] = useState(null);
@@ -585,7 +589,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         }
         uploadStarted();
         try {
-            const attachment = await uploadAttachment(draft.uid, file);
+            // An inline part with a Content-ID of its own: without one the server has nothing to point the message's `cid:` reference at.
+            const attachment = await uploadAttachment(draft.uid, file, { inline: true });
             setHasUploads(true);
             void refreshDraftVersion(draft.uid);
             return attachmentContentUrl(attachment.uid);
@@ -656,6 +661,25 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         }
         return allAttached;
     }
+    /** Removes one attachment from the draft, saying why when the server would not. A removed vCard can be attached again. */
+    async function handleRemoveAttachment(attachment) {
+        setAttachError(null);
+        setRemovingAttachmentUid(attachment.uid);
+        try {
+            await deleteAttachment(attachment.uid, attachment.version, client);
+            setAttachments((prev) => prev.filter((other) => other.uid !== attachment.uid));
+            if (attachment.mimeType === "text/vcard") {
+                setOwnCardAttached(false);
+            }
+            void refreshDraftVersion(draft.uid);
+        }
+        catch (err) {
+            setAttachError(err instanceof ApiRequestError ? err.message : "Could not remove attachment.");
+        }
+        finally {
+            setRemovingAttachmentUid(null);
+        }
+    }
     /** Attaches the sender's own vCard ("Attach my contact card"), once: the button is off from the click on, and back on if the upload failed. */
     async function handleAttachOwnCard() {
         setOwnCardAttached(true);
@@ -1244,14 +1268,16 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     if (minimized) {
         return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsxs("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Restore", onClick: onToggleMinimize, icon: HiOutlineArrowsPointingOut }), _jsx(HeaderButton, { label: "Discard draft", onClick: handleDiscard, icon: HiOutlineXMark, disabled: closing })] })] }) }), discardModal] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: inline ? "region" : "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: !inline && !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
                     "shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
                     // `fixed` and `relative` may not both be on the element: Tailwind emits `.relative` after `.fixed`, so it wins and the
                     // sheet sat in the flow of the little fixed container the windows are stacked in instead of covering the screen.
-                    isMobile
-                        ? "fixed inset-0 w-full h-full rounded-none border-0"
-                        : ["relative border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-                ].join(" "), children: [dropActive && (_jsxs("div", { "data-drop-overlay": "", className: "pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-primary bg-primary/10 text-center text-primary-dark", children: [_jsx("span", { className: "text-base font-semibold", children: "Drop files to attach them" }), _jsx("span", { className: "text-sm", children: "Pictures go into the message where the cursor is" })] })), !isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, 
+                    inline
+                        ? "relative w-full h-[520px] rounded-md"
+                        : isMobile
+                            ? "fixed inset-0 w-full h-full rounded-none border-0"
+                            : ["relative border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
+                ].join(" "), children: [dropActive && (_jsxs("div", { "data-drop-overlay": "", className: "pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-primary bg-primary/10 text-center text-primary-dark", children: [_jsx("span", { className: "text-base font-semibold", children: "Drop files to attach them" }), _jsx("span", { className: "text-sm", children: "Pictures go into the message where the cursor is" })] })), !inline && !isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: ["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" "), onClick: inline ? undefined : onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [inline ? (_jsx(HeaderButton, { label: "Pop out", onClick: () => onPopOut?.(), icon: HiOutlineArrowTopRightOnSquare })) : (_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus })), !inline && !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, 
                                         // Two or more options only exist once the mailboxes have loaded, and the same answer that lets them list
                                         // (one that isn't known to be view-only) is what picks the default sender, so a sender is always chosen by now.
                                         value: mailboxUid, disabled: hasUploads, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
@@ -1276,5 +1302,5 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                                     return null;
                                 }
                                 return (_jsx("ul", { className: "flex flex-wrap gap-1.5 px-3 pt-1.5", "aria-label": "Recipient encryption availability", children: knownRecipients.map((status) => (_jsxs("li", { className: `text-xs font-medium py-0.5 px-2 rounded-pill ${status.canEncrypt ? "bg-primary/10 text-primary-dark" : "bg-surface-alt text-text-muted"}`, children: [status.address, " ", status.canEncrypt ? "supports encryption" : "no encryption key found"] }, status.address))) }));
-                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !draft || closing || waitingForUploads, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || closing || waitingForUploads, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
+                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsxs("li", { className: "inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted", children: [attachment.filename, _jsx("button", { type: "button", "aria-label": `Remove ${attachment.filename}`, title: `Remove ${attachment.filename}`, disabled: removingAttachmentUid === attachment.uid, onClick: () => void handleRemoveAttachment(attachment), className: "inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !draft || closing || waitingForUploads, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || closing || waitingForUploads, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
 }

package/dist/apps/shared/components/mail/compose/ComposeWindowPlaceholder.d.ts

@@ -7,6 +7,10 @@ export interface ComposeWindowPlaceholderProps {
     onRetry: () => void;
     onClose: () => void;
     onToggleMinimize: () => void;
+    /** The placeholder stands in for an inline card in the reading pane (see `ComposeWindowProps.inline`). */
+    inline?: boolean;
+    /** Moves an `inline` placeholder out to the floating stack. */
+    onPopOut?: () => void;
 }
 /**
  * What stands in for the compose window in the moment between clicking Compose/Reply/Forward and the window's code being
@@ -16,4 +20,4 @@ export interface ComposeWindowPlaceholderProps {
  *
  * Nothing here can be typed into yet, and there is no draft to save or discard, so Close just closes.
  */
-export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize }: ComposeWindowPlaceholderProps): React.JSX.Element;
+export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize, inline, onPopOut }: ComposeWindowPlaceholderProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/ComposeWindowPlaceholder.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect } from "react";
-import { HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
+import { HiOutlineArrowTopRightOnSquare, HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
 import Skeleton from "../../../../../lib/components/feedback/Skeleton.js";
 import Alert from "../../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
@@ -18,16 +18,20 @@ import { markComposePhase } from "./composePerf.js";
  *
  * Nothing here can be typed into yet, and there is no draft to save or discard, so Close just closes.
  */
-export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize }) {
+export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize, inline, onPopOut }) {
     const isMobile = useIsMobile();
     const title = session.initialSubject?.trim() || "New Message";
     const titleId = `compose-title-${session.id}`;
     useEffect(() => markComposePhase(session.id, "shell"), [session.id]);
-    if (session.minimized) {
+    if (session.minimized && !inline) {
         return (_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsx("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: _jsx("span", { className: "text-sm font-medium truncate", children: title }) }) }));
     }
-    return (_jsxs("div", { role: "dialog", "aria-labelledby": titleId, "aria-busy": !failed, className: [
+    return (_jsxs("div", { role: inline ? "region" : "dialog", "aria-labelledby": titleId, "aria-busy": !failed, className: [
             "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
-            isMobile ? "fixed inset-0 w-full h-full rounded-none border-0" : "border-b-0 rounded-t-md w-[480px] h-[520px]",
-        ].join(" "), children: [_jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { type: "button", "aria-label": "Minimize", title: "Minimize", onClick: onToggleMinimize, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(HiOutlineMinus, { size: 14 }) }), _jsx("button", { type: "button", "aria-label": "Close", title: "Close", onClick: onClose, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(HiOutlineXMark, { size: 14 }) })] })] }), failed ? (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: "The compose window couldn\u2019t be loaded. Check your connection and try again." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onRetry, children: "Retry" })] }) })) : (_jsxs("div", { role: "status", className: "flex-1 min-h-0 flex flex-col", children: [_jsx("span", { className: "sr-only", children: "Opening the compose window" }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: [_jsx("span", { className: "text-text-muted", children: "To" }), _jsx("span", { className: "truncate", children: session.initialTo })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: _jsx("span", { className: "truncate", children: session.initialSubject || _jsx("span", { className: "text-text-muted", children: "Subject" }) }) }), _jsxs("div", { className: "flex-1 p-3 flex flex-col gap-2", "aria-hidden": "true", children: [_jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" })] })] }))] }));
+            inline
+                ? "w-full h-[520px] rounded-md"
+                : isMobile
+                    ? "fixed inset-0 w-full h-full rounded-none border-0"
+                    : "border-b-0 rounded-t-md w-[480px] h-[520px]",
+        ].join(" "), children: [_jsxs("div", { className: ["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" "), onClick: inline ? undefined : onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { type: "button", "aria-label": inline ? "Pop out" : "Minimize", title: inline ? "Pop out" : "Minimize", onClick: inline ? onPopOut : onToggleMinimize, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: inline ? _jsx(HiOutlineArrowTopRightOnSquare, { size: 14 }) : _jsx(HiOutlineMinus, { size: 14 }) }), _jsx("button", { type: "button", "aria-label": "Close", title: "Close", onClick: onClose, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(HiOutlineXMark, { size: 14 }) })] })] }), failed ? (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: "The compose window couldn\u2019t be loaded. Check your connection and try again." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onRetry, children: "Retry" })] }) })) : (_jsxs("div", { role: "status", className: "flex-1 min-h-0 flex flex-col", children: [_jsx("span", { className: "sr-only", children: "Opening the compose window" }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: [_jsx("span", { className: "text-text-muted", children: "To" }), _jsx("span", { className: "truncate", children: session.initialTo })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: _jsx("span", { className: "truncate", children: session.initialSubject || _jsx("span", { className: "text-text-muted", children: "Subject" }) }) }), _jsxs("div", { className: "flex-1 p-3 flex flex-col gap-2", "aria-hidden": "true", children: [_jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" })] })] }))] }));
 }

package/dist/apps/shared/components/mail/compose/RichTextEditor.js

@@ -53,7 +53,8 @@ export default function RichTextEditor({ value, onChange, height = "360px", fill
             TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
             TextAlign.configure({ types: ["heading", "paragraph"] }),
             Highlight,
-            Image,
+            // A quoted original's pictures arrive as `data:` URIs; `assembleDraft()` attaches them to the draft when it is saved.
+            Image.configure({ allowBase64: true }),
             TableKit.configure({ table: { resizable: true } }),
             Placeholder.configure({ placeholder: "Write your message…" }),
         ],

package/dist/apps/shared/components/mail/compose/quotedBody.d.ts

@@ -43,6 +43,9 @@ export declare function clearOriginalMessageCache(): void;
  * `message.recipients` alone would reduce every Reply All to a plain reply. Unprotected headers are the sender's own
  * claim, exactly as in every other mail client's Reply All.
  *
+ * The original's embedded images (`cid:`) are replaced by `data:` URIs of the pictures themselves - fetched from the message's
+ * attachments, or taken from the decrypted entity - so the quote shows them and the new message can carry them (see `quotedImages.ts`).
+ *
  * The quote builders sanitize whatever HTML this returns (`sanitizeQuotedHtml()`), whichever source it came from.
  */
 export declare function loadOriginalMessage(message: Message, security: MessageSecurityResult | null, options?: {

package/dist/apps/shared/components/mail/compose/quotedBody.js

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { apiUrl } from "../../../../../lib/util/api.js";
-import { getMessageRawContent } from "../../../../../lib/mail/mailApi.js";
+import { attachmentContentUrl, getMessageRawContent, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { MAX_QUOTED_IMAGE_BYTES, embedQuotedImages } from "../../../../../lib/mail/compose/quotedImages.js";
+import { EMBEDDED_IMAGE_TYPES, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 import { decodeHeaderText, extractDisplayBody, parseMimeEntity } from "../../../../../lib/crypto/mime.js";
 import { parseRecipientList } from "./recipients.js";
 /** How long a reply waits for the original's body before it goes ahead with the preview - a slow or hung request must not
@@ -75,6 +77,37 @@ function headerRecipients(value, type) {
         .filter((recipient) => recipient.address.includes("@"))
         .map((recipient) => ({ address: recipient.address, ...(recipient.displayName ? { displayName: recipient.displayName } : {}), type }));
 }
+/** The `data:` URI of the picture a quoted image of `message` stands for - one of the message's own attachments, fetched with the session -
+ * or `undefined` when there is none, it is not a raster image, it is too large or it could not be had. Never rejects. */
+function serverImageResolver(message) {
+    let attachments;
+    return async (reference) => {
+        try {
+            attachments ?? (attachments = listAttachments(message.folderUid, message.uid));
+            const attachment = findInlineAttachment(await attachments, reference);
+            const type = attachment?.mimeType.split(";")[0].trim().toLowerCase();
+            if (!attachment || !type || !EMBEDDED_IMAGE_TYPES.test(type) || attachment.sizeBytes > MAX_QUOTED_IMAGE_BYTES) {
+                return undefined;
+            }
+            const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include" });
+            const bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
+            return bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(type, bytes) : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    };
+}
+/** As `serverImageResolver()`, for the parts of a message this browser decrypted or verified (`MessageSecurityResult.attachments`). */
+function partImageResolver(parts) {
+    const candidates = parts.map((part, index) => ({ uid: String(index), filename: part.filename ?? "", mimeType: part.contentType, contentId: part.contentId }));
+    return async (reference) => {
+        const found = findInlineAttachment(candidates, reference);
+        const part = found ? parts[Number(found.uid)] : undefined;
+        const bytes = part && EMBEDDED_IMAGE_TYPES.test(part.contentType) ? part.decode() : undefined;
+        return part && bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(part.contentType, bytes) : undefined;
+    };
+}
 /**
  * Loads what a Reply/Reply All/Forward needs from `message`: the full body to quote - the same content
  * `MessageDetailPane` shows, never the truncated `bodyPreview` unless nothing else can be had - and, with
@@ -96,6 +129,9 @@ function headerRecipients(value, type) {
  * `message.recipients` alone would reduce every Reply All to a plain reply. Unprotected headers are the sender's own
  * claim, exactly as in every other mail client's Reply All.
  *
+ * The original's embedded images (`cid:`) are replaced by `data:` URIs of the pictures themselves - fetched from the message's
+ * attachments, or taken from the decrypted entity - so the quote shows them and the new message can carry them (see `quotedImages.ts`).
+ *
  * The quote builders sanitize whatever HTML this returns (`sanitizeQuotedHtml()`), whichever source it came from.
  */
 export async function loadOriginalMessage(message, security, options = {}) {
@@ -137,5 +173,11 @@ export async function loadOriginalMessage(message, security, options = {}) {
         // Whatever was loaded before the failure stands: the quote falls back to the preview, Reply All to the
         // message's own recipients.
     }
+    if (result.body.html !== undefined) {
+        const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message);
+        const html = result.body.html;
+        // Bounded like the body's own request: a picture that will not arrive is left out of the quote, not waited for.
+        result.body = { html: await withTimeout(embedQuotedImages(html, resolver), QUOTE_FETCH_TIMEOUT_MS).catch(() => html) };
+    }
     return result;
 }

package/dist/apps/shared/components/mail/labelMenu.d.ts

@@ -89,9 +89,11 @@ export interface LabelMenuButtonProps extends Omit<LabelSectionsOptions, "state"
     disabled?: boolean;
     title?: string;
     className?: string;
+    /** The trigger is just its icon (`className` then styles all of it) - `aria-label` and `title` name it. */
+    iconOnly?: boolean;
     /** With `onLabelCreated`, adds a "New label" row that opens this component's own dialog. */
     mailboxUid?: string;
     onLabelCreated?: (label: Label) => void;
 }
 /** The label list as a menu button of its own - the bulk Apply label action and the reading pane's Labels. */
-export default function LabelMenuButton({ applied, partial, onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, mailboxUid, onLabelCreated, }: LabelMenuButtonProps): React.JSX.Element;
+export default function LabelMenuButton({ applied, partial, onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, iconOnly, mailboxUid, onLabelCreated, }: LabelMenuButtonProps): React.JSX.Element;

package/dist/apps/shared/components/mail/labelMenu.js

@@ -119,11 +119,11 @@ export function NewLabelDialog({ open, onClose, mailboxUid, onCreated }) {
     return (_jsxs(Modal, { open: open, onClose: onClose, title: "New label", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "new-label-name", children: _jsx("input", { id: "new-label-name", type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface" }) }), _jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: saving, disabled: saving || !name.trim(), onClick: () => void save(), children: "Create" })] })] }));
 }
 /** The label list as a menu button of its own - the bulk Apply label action and the reading pane's Labels. */
-export default function LabelMenuButton({ applied, partial = [], onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, mailboxUid, onLabelCreated, }) {
+export default function LabelMenuButton({ applied, partial = [], onCommit, labels, commit, clear, emptyNote, note, busy, label, "aria-label": ariaLabel, disabled, title, className, iconOnly, mailboxUid, onLabelCreated, }) {
     const [open, setOpen] = useState(false);
     const [creating, setCreating] = useState(false);
     const state = useLabelDraft(applied, partial, open);
-    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { "aria-label": ariaLabel, label: label, icon: _jsx(HiOutlineTag, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), disabled: disabled, title: title, className: className, onOpenChange: setOpen, sections: labelSections({
+    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { "aria-label": ariaLabel, label: label, icon: _jsx(HiOutlineTag, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), disabled: disabled, title: title, className: className, iconOnly: iconOnly, onOpenChange: setOpen, sections: labelSections({
                     labels,
                     state,
                     commit: { ...commit, disabled: commit.disabled || !state.dirty, onSelect: () => onCommit(state.draft, state.mixed) },