@rapidmx/web-client 0.9.0 → 0.10.0

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineXMark } from "react-icons/hi2";
+import { TOAST_DURATION_MS } from "../../mail/useNewMailNotifications.js";
+/** Whether the tab is out of view - a pop-up's clock stops meanwhile, so it is still there when the reader comes back. */
+function useTabHidden() {
+    const [hidden, setHidden] = useState(false);
+    useEffect(() => {
+        const update = () => setHidden(document.visibilityState === "hidden");
+        update();
+        document.addEventListener("visibilitychange", update);
+        return () => document.removeEventListener("visibilitychange", update);
+    }, []);
+    return hidden;
+}
+/** One pop-up. Its 8 seconds only run while it is neither hovered nor holding keyboard focus, and the tab is in view. */
+function ToastItem({ toast, tabHidden, onDismiss, offer }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const remainingRef = useRef(TOAST_DURATION_MS);
+    const paused = tabHidden || hovered || focused;
+    useEffect(() => {
+        if (paused) {
+            return;
+        }
+        const startedAt = Date.now();
+        const timer = setTimeout(() => onDismiss(toast.uid), remainingRef.current);
+        return () => {
+            clearTimeout(timer);
+            remainingRef.current = Math.max(0, remainingRef.current - (Date.now() - startedAt));
+        };
+    }, [paused, toast.uid, onDismiss]);
+    const sender = toast.senderName || toast.senderAddress;
+    return (_jsxs("div", { "data-testid": "new-mail-toast", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (event) => {
+            // Focus moving between this pop-up's own controls is not leaving it.
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                setFocused(false);
+            }
+        }, className: "rr-toast-in pointer-events-auto relative rounded-md border border-border border-l-4 border-l-primary bg-surface text-text shadow-modal", children: [_jsxs("a", { href: toast.href, onClick: () => onDismiss(toast.uid), className: "block rounded-md p-3 pr-10 hover:bg-surface-alt focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", children: [_jsx("span", { className: "block text-xs font-semibold uppercase tracking-wide text-primary-dark", children: "New message" }), _jsxs("span", { className: "mt-0.5 flex min-w-0 items-baseline gap-1.5 text-sm", children: [_jsx("span", { className: "truncate font-bold", children: sender }), toast.senderName && _jsxs("span", { className: "truncate text-xs text-text-muted", children: ["<", toast.senderAddress, ">"] })] }), _jsx("span", { className: "block truncate text-sm font-semibold", children: toast.subject }), toast.preview && _jsx("span", { className: "mt-0.5 block text-xs text-text-muted [overflow-wrap:anywhere]", children: toast.preview })] }), _jsx("button", { type: "button", onClick: () => onDismiss(toast.uid), "aria-label": `Dismiss notification: ${toast.subject}`, className: "absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) }), offer && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-border px-3 py-2 text-xs text-text-muted", children: [_jsx("span", { className: "basis-full", children: "Get a desktop notification when mail arrives while this tab is in the background." }), _jsx("button", { type: "button", onClick: offer.onEnable, className: "rounded-sm bg-primary px-2.5 py-1 text-xs font-semibold text-text-on-primary hover:bg-primary-dark", children: "Turn on desktop notifications" }), _jsx("button", { type: "button", onClick: offer.onDecline, className: "rounded-sm px-2 py-1 text-xs font-medium hover:bg-surface-alt hover:text-text", children: "Not now" })] }))] }));
+}
+/**
+ * The new-mail pop-ups, stacked at the top right (`fixed`, above everything). The container is always rendered - a live region
+ * has to exist before its content changes to be announced - and is a polite `status` region, so an arrival is read out without
+ * interrupting. Each pop-up shows the sender's name and address, the subject and a short preview, as text; clicking it opens the
+ * message; it has a dismiss button and goes by itself after a few seconds (see `ToastItem`). Motion is CSS-only and switched off
+ * by `prefers-reduced-motion` (`.rr-toast-in` in `app.css`).
+ */
+export default function NewMailToasts({ toasts, onDismiss, offerDesktop, onEnableDesktop, onDeclineDesktop }) {
+    const tabHidden = useTabHidden();
+    return (_jsx("div", { role: "status", "aria-live": "polite", "aria-label": "New mail", "data-testid": "new-mail-toasts", className: "pointer-events-none fixed right-4 top-4 z-50 flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col gap-2", children: toasts.map((toast, index) => (_jsx(ToastItem, { toast: toast, tabHidden: tabHidden, onDismiss: onDismiss, offer: offerDesktop && index === 0 ? { onEnable: onEnableDesktop, onDecline: onDeclineDesktop } : undefined }, toast.uid))) }));
+}

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

@@ -1,5 +1,13 @@
 import React, { PropsWithChildren } from "react";
 import { DraftThreading } from "@rapidmx/react-shared/mail/mailApi.js";
+/**
+ * Starts downloading the compose window's code without opening one - on hover/focus of a Compose or Reply button and when
+ * the browser is idle after the inbox has loaded - so that clicking it finds the chunk already in memory. Safe to call
+ * any number of times, and never rejects: a failed download is retried by the click itself.
+ */
+export declare function prefetchComposeWindow(): void;
+/** Test seam: forgets the loaded compose window chunk, as a fresh page load would. */
+export declare function resetComposeWindowLoader(): void;
 export interface ComposeSession {
     id: string;
     /** The initial sending mailbox - absent means "the caller's own mailbox" (see `ComposeWindow`). */
@@ -20,8 +28,21 @@ export interface ComposeSession {
     signatureContext: "new" | "reply_forward";
     /** See `OpenComposeInput.suppressSigning`'s own doc comment. */
     suppressSigning?: boolean;
+    /** The window opened before its quoted original was known (see `OpenComposeInput.pending`): the body waits for it. */
+    quotePending?: boolean;
+    /** What `OpenComposeInput.pending` resolved with, once it has - see `ComposeLateInput`. */
+    late?: ComposeLateInput;
     minimized: boolean;
 }
+/** What a reply or forward could only work out after its window was already open (see `OpenComposeInput.pending`). */
+export interface ComposeLateInput {
+    /** The quoted original - see `OpenComposeInput.quotedHtml`. */
+    quotedHtml?: string;
+    /** A better To than the one the window opened with - applied only if the To field is still exactly what it opened with. */
+    to?: string;
+    /** A better Cc, under the same rule as `to`. */
+    cc?: string;
+}
 export interface OpenComposeInput {
     /** The sending mailbox to start with. Omit for a fresh message (defaults to the caller's own mailbox);
      * a reply/forward passes the original message's mailbox so a shared mailbox's mail replies from it.
@@ -53,6 +74,15 @@ export interface OpenComposeInput {
      * `In-Reply-To`/`References` at all and every mail system - the sender's own Sent Items included - files it
      * as a new conversation rather than part of the thread. Absent for a fresh compose, which starts one. */
     threading?: DraftThreading;
+    /**
+     * Something the window shouldn't wait for before appearing: a reply or forward opens at once from what is already in
+     * memory (the message's own subject and sender), and this settles with what needed the network - the original's body
+     * to quote, and for Reply All the recipients its headers name. The compose window shows meanwhile, its body area
+     * waiting, and fills the body in when this resolves; `to`/`cc` replace the opened-with values only if the user hasn't
+     * touched those fields. Must never reject (resolve `undefined` for "nothing more"); when set, `quotedHtml` is ignored
+     * until it resolves.
+     */
+    pending?: Promise<ComposeLateInput | undefined>;
 }
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */

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

@@ -3,9 +3,67 @@ 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, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
-import ComposeWindow from "./ComposeWindow.js";
+import { markComposePhase } from "./composePerf.js";
+import ComposeWindowPlaceholder from "./ComposeWindowPlaceholder.js";
+let loadedComposeWindow;
+let loadingComposeWindow;
+/**
+ * The compose window - with the rich-text editor (TipTap/ProseMirror), the recipient inputs and the send pipeline - is
+ * the largest piece of the mail app and most page loads never open it, so it is a separate chunk, loaded here once. Not
+ * `React.lazy()`: a chunk that failed to download (offline, a deploy that replaced it) must be retryable, and `lazy()` keeps
+ * the rejection for good.
+ */
+function loadComposeWindow() {
+    loadingComposeWindow ?? (loadingComposeWindow = import("./ComposeWindow.js").then((module) => (loadedComposeWindow = module.default), (err) => {
+        loadingComposeWindow = undefined;
+        throw err;
+    }));
+    return loadingComposeWindow;
+}
+/**
+ * Starts downloading the compose window's code without opening one - on hover/focus of a Compose or Reply button and when
+ * the browser is idle after the inbox has loaded - so that clicking it finds the chunk already in memory. Safe to call
+ * any number of times, and never rejects: a failed download is retried by the click itself.
+ */
+export function prefetchComposeWindow() {
+    loadComposeWindow().catch(() => undefined);
+}
+/** Test seam: forgets the loaded compose window chunk, as a fresh page load would. */
+export function resetComposeWindowLoader() {
+    loadedComposeWindow = undefined;
+    loadingComposeWindow = undefined;
+}
+/** The compose window component once its chunk is in, else `undefined` (while loading, or `failed`), and a way to retry. */
+function useComposeWindowComponent(wanted) {
+    const [loaded, setComponent] = useState();
+    // Also read straight from the module: a prefetch that finished after this provider mounted has no state update to
+    // announce it, and the first click must not flash the placeholder for a chunk that is already here.
+    const Component = loaded ?? loadedComposeWindow;
+    const [failed, setFailed] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    useEffect(() => {
+        if (!wanted || Component) {
+            return;
+        }
+        let cancelled = false;
+        setFailed(false);
+        loadComposeWindow().then((component) => {
+            if (!cancelled) {
+                setComponent(() => component);
+            }
+        }, () => {
+            if (!cancelled) {
+                setFailed(true);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [wanted, Component, attempt]);
+    return { Component, failed, retry: () => setAttempt((n) => n + 1) };
+}
 const ComposeContext = createContext({ openCompose: () => undefined });
 /** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
 export function useCompose() {
@@ -21,11 +79,14 @@ export function useCompose() {
 export default function ComposeProvider({ children, userUid, trusted }) {
     const [sessions, setSessions] = useState([]);
     const isMobile = useIsMobile();
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, }) {
+    const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, pending, }) {
+        const id = crypto.randomUUID();
+        markComposePhase(id, "click");
         setSessions((prev) => [
             ...prev,
             {
-                id: crypto.randomUUID(),
+                id,
                 mailboxUid,
                 initialTo: to,
                 initialCc: cc,
@@ -35,9 +96,14 @@ export default function ComposeProvider({ children, userUid, trusted }) {
                 threading,
                 signatureContext,
                 suppressSigning,
+                quotePending: !!pending,
                 minimized: false,
             },
         ]);
+        // A window closed before this settles is simply not in the list any more - nothing to update.
+        void pending
+            ?.catch(() => undefined)
+            .then((late) => setSessions((prev) => prev.map((s) => s.id === id ? { ...s, quotePending: false, late, initialQuotedHtml: late?.quotedHtml ?? s.initialQuotedHtml } : s)));
     }
     function closeCompose(id) {
         setSessions((prev) => prev.filter((s) => s.id !== id));
@@ -56,6 +122,6 @@ export default function ComposeProvider({ children, userUid, trusted }) {
     const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
     return (_jsxs(ComposeContext.Provider, { value: value, children: [children, sessions.length > 0 && (_jsx("div", { 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: _jsx(ComposeWindow, { session: session, userUid: userUid, trusted: trusted, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) }) }, session.id));
+                    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));
                 }) }))] }));
 }

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

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useRef, useState } from "react";
+import { Suspense, lazy, useRef, useState } from "react";
 import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
-import EmojiPicker from "./EmojiPicker.js";
 import GifPicker from "./GifPicker.js";
+/** Loaded when the picker is first opened: the emoji list is a half-megabyte JSON file that nothing else needs. */
+const EmojiPicker = lazy(() => import("./EmojiPicker.js"));
 const FONT_FAMILIES = [
     { label: "Default", value: "" },
     { label: "Sans Serif", value: "Arial, Helvetica, sans-serif" },
@@ -84,5 +85,5 @@ export default function ComposeToolbar({ editor, onUploadImage }) {
                             ? ed.chain().focus().setFontFamily(e.target.value).run()
                             : ed.chain().focus().unsetFontFamily().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_FAMILIES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx("select", { "aria-label": "Font size", disabled: disabled, value: editor?.getAttributes("textStyle").fontSize ?? "", onChange: (e) => run((ed) => e.target.value
                             ? ed.chain().focus().setFontSize(e.target.value).run()
-                            : ed.chain().focus().unsetFontSize().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_SIZES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bold", icon: BsTypeBold, disabled: disabled, active: editor?.isActive("bold"), onClick: () => run((e) => e.chain().focus().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: BsTypeItalic, disabled: disabled, active: editor?.isActive("italic"), onClick: () => run((e) => e.chain().focus().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: BsTypeUnderline, disabled: disabled, active: editor?.isActive("underline"), onClick: () => run((e) => e.chain().focus().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strikethrough", icon: BsTypeStrikethrough, disabled: disabled, active: editor?.isActive("strike"), onClick: () => run((e) => e.chain().focus().toggleStrike().run()) }), _jsx(Divider, {}), _jsxs("label", { className: "w-8 h-8 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(BsPaletteFill, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Text color" }), _jsx("input", { type: "color", disabled: disabled, value: editor?.getAttributes("textStyle").color ?? "#000000", onChange: (e) => run((ed) => ed.chain().focus().setColor(e.target.value).run()), className: "sr-only" })] }), _jsx(ToolbarButton, { label: "Highlight", icon: BsHighlighter, disabled: disabled, active: editor?.isActive("highlight"), onClick: () => run((e) => e.chain().focus().toggleHighlight().run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Align left", icon: BsTextLeft, disabled: disabled, active: editor?.isActive({ textAlign: "left" }), onClick: () => run((e) => e.chain().focus().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: BsTextCenter, disabled: disabled, active: editor?.isActive({ textAlign: "center" }), onClick: () => run((e) => e.chain().focus().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: BsTextRight, disabled: disabled, active: editor?.isActive({ textAlign: "right" }), onClick: () => run((e) => e.chain().focus().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: BsJustify, disabled: disabled, active: editor?.isActive({ textAlign: "justify" }), onClick: () => run((e) => e.chain().focus().setTextAlign("justify").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bulleted list", icon: BsListUl, disabled: disabled, active: editor?.isActive("bulletList"), onClick: () => run((e) => e.chain().focus().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered list", icon: BsListOl, disabled: disabled, active: editor?.isActive("orderedList"), onClick: () => run((e) => e.chain().focus().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Decrease indent", icon: BsUnindent, disabled: disabled, onClick: () => run((e) => e.chain().focus().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Increase indent", icon: BsIndent, disabled: disabled, onClick: () => run((e) => e.chain().focus().sinkListItem("listItem").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Insert link", icon: BsLink45Deg, disabled: disabled, active: editor?.isActive("link"), onClick: openLinkPrompt }), _jsx(ToolbarButton, { label: "Insert image", icon: BsImage, disabled: disabled, onClick: () => imageInputRef.current?.click() }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelected, className: "sr-only", "aria-label": "Insert image file" }), _jsx(ToolbarButton, { label: "Insert table", icon: BsTable, disabled: disabled, onClick: () => run((e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) }), _jsx("button", { ref: emojiButtonRef, type: "button", "aria-label": "Insert emoji", title: "Insert emoji", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "emoji" ? null : "emoji")), className: "w-8 h-8 flex items-center justify-center text-base rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "\uD83D\uDE00" }), openPopup === "emoji" && (_jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: handleInsertEmoji, onClose: () => setOpenPopup(null) })), _jsx("button", { ref: gifButtonRef, type: "button", "aria-label": "Insert GIF", title: "Insert GIF", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "gif" ? null : "gif")), className: "w-8 h-8 flex items-center justify-center text-[10px] font-extrabold tracking-tight rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "GIF" }), openPopup === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: handleInsertGif, onClose: () => setOpenPopup(null) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Clear formatting", icon: BsEraser, disabled: disabled, onClick: () => run((e) => e.chain().focus().unsetAllMarks().clearNodes().run()) }), _jsx(ToolbarButton, { label: "Undo", icon: BsArrowCounterclockwise, disabled: disabled || !editor?.can().undo(), onClick: () => run((e) => e.chain().focus().undo().run()) }), _jsx(ToolbarButton, { label: "Redo", icon: BsArrowClockwise, disabled: disabled || !editor?.can().redo(), onClick: () => run((e) => e.chain().focus().redo().run()) })] }), linkPrompt] }));
+                            : ed.chain().focus().unsetFontSize().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_SIZES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bold", icon: BsTypeBold, disabled: disabled, active: editor?.isActive("bold"), onClick: () => run((e) => e.chain().focus().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: BsTypeItalic, disabled: disabled, active: editor?.isActive("italic"), onClick: () => run((e) => e.chain().focus().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: BsTypeUnderline, disabled: disabled, active: editor?.isActive("underline"), onClick: () => run((e) => e.chain().focus().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strikethrough", icon: BsTypeStrikethrough, disabled: disabled, active: editor?.isActive("strike"), onClick: () => run((e) => e.chain().focus().toggleStrike().run()) }), _jsx(Divider, {}), _jsxs("label", { className: "w-8 h-8 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(BsPaletteFill, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Text color" }), _jsx("input", { type: "color", disabled: disabled, value: editor?.getAttributes("textStyle").color ?? "#000000", onChange: (e) => run((ed) => ed.chain().focus().setColor(e.target.value).run()), className: "sr-only" })] }), _jsx(ToolbarButton, { label: "Highlight", icon: BsHighlighter, disabled: disabled, active: editor?.isActive("highlight"), onClick: () => run((e) => e.chain().focus().toggleHighlight().run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Align left", icon: BsTextLeft, disabled: disabled, active: editor?.isActive({ textAlign: "left" }), onClick: () => run((e) => e.chain().focus().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: BsTextCenter, disabled: disabled, active: editor?.isActive({ textAlign: "center" }), onClick: () => run((e) => e.chain().focus().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: BsTextRight, disabled: disabled, active: editor?.isActive({ textAlign: "right" }), onClick: () => run((e) => e.chain().focus().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: BsJustify, disabled: disabled, active: editor?.isActive({ textAlign: "justify" }), onClick: () => run((e) => e.chain().focus().setTextAlign("justify").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bulleted list", icon: BsListUl, disabled: disabled, active: editor?.isActive("bulletList"), onClick: () => run((e) => e.chain().focus().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered list", icon: BsListOl, disabled: disabled, active: editor?.isActive("orderedList"), onClick: () => run((e) => e.chain().focus().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Decrease indent", icon: BsUnindent, disabled: disabled, onClick: () => run((e) => e.chain().focus().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Increase indent", icon: BsIndent, disabled: disabled, onClick: () => run((e) => e.chain().focus().sinkListItem("listItem").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Insert link", icon: BsLink45Deg, disabled: disabled, active: editor?.isActive("link"), onClick: openLinkPrompt }), _jsx(ToolbarButton, { label: "Insert image", icon: BsImage, disabled: disabled, onClick: () => imageInputRef.current?.click() }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelected, className: "sr-only", "aria-label": "Insert image file" }), _jsx(ToolbarButton, { label: "Insert table", icon: BsTable, disabled: disabled, onClick: () => run((e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) }), _jsx("button", { ref: emojiButtonRef, type: "button", "aria-label": "Insert emoji", title: "Insert emoji", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "emoji" ? null : "emoji")), className: "w-8 h-8 flex items-center justify-center text-base rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "\uD83D\uDE00" }), openPopup === "emoji" && (_jsx(Suspense, { fallback: null, children: _jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: handleInsertEmoji, onClose: () => setOpenPopup(null) }) })), _jsx("button", { ref: gifButtonRef, type: "button", "aria-label": "Insert GIF", title: "Insert GIF", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "gif" ? null : "gif")), className: "w-8 h-8 flex items-center justify-center text-[10px] font-extrabold tracking-tight rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "GIF" }), openPopup === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: handleInsertGif, onClose: () => setOpenPopup(null) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Clear formatting", icon: BsEraser, disabled: disabled, onClick: () => run((e) => e.chain().focus().unsetAllMarks().clearNodes().run()) }), _jsx(ToolbarButton, { label: "Undo", icon: BsArrowCounterclockwise, disabled: disabled || !editor?.can().undo(), onClick: () => run((e) => e.chain().focus().undo().run()) }), _jsx(ToolbarButton, { label: "Redo", icon: BsArrowClockwise, disabled: disabled || !editor?.can().redo(), onClick: () => run((e) => e.chain().focus().redo().run()) })] }), linkPrompt] }));
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ComposeSession } from "./ComposeContext.js";
+import { type ComposeSession } from "./ComposeContext.js";
 export interface ComposeWindowProps {
     session: ComposeSession;
     onClose: () => void;

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

@@ -16,9 +16,14 @@ import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/cryp
 import { findActivePublicKey, getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import { useUnlockPrompt } from "../../layout/UnlockPromptProvider.js";
 import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
-import { applyBaselineOuterHeaders, assembleOutboundMime, buildEncryptedMessage, buildSignedOnlyMessage } from "@rapidmx/react-shared/crypto/smimeMessage.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { useCompose } from "./ComposeContext.js";
+import { ariaKeyShortcuts, withHint } from "../../../keyboard/format.js";
+import { SHORTCUTS } from "../../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../../keyboard/ShortcutProvider.js";
+import { useShortcut } from "../../../keyboard/useShortcut.js";
 import { isSigningOut, registerComposeFlush } from "./composeFlushRegistry.js";
+import { markComposePhase } from "./composePerf.js";
 import RecipientInput from "./RecipientInput.js";
 import { parseRecipientList } from "./recipients.js";
 import RichTextEditor from "./RichTextEditor.js";
@@ -80,8 +85,9 @@ const VIEWPORT_MARGIN = 24;
 function parseAddresses(value) {
     return parseRecipientList(value);
 }
-function HeaderButton({ label, onClick, icon: Icon, disabled, }) {
-    return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: onClick, disabled: disabled, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(Icon, { size: 14 }) }));
+function HeaderButton({ label, onClick, icon: Icon, disabled, shortcut, }) {
+    const env = useKeyEnvironment();
+    return (_jsx("button", { type: "button", "aria-label": label, title: shortcut ? withHint(label, shortcut, env) : label, "aria-keyshortcuts": shortcut ? ariaKeyShortcuts(shortcut, env) : undefined, onClick: onClick, disabled: disabled, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(Icon, { size: 14 }) }));
 }
 /**
  * A floating, Gmail-style compose window — overlays whatever app is currently showing instead of
@@ -98,7 +104,15 @@ function HeaderButton({ label, onClick, icon: Icon, disabled, }) {
  * once.
  */
 export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
-    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized } = session;
+    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized, quotePending, late } = session;
+    // 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;
+    const baselineCc = late?.cc ?? initialCc;
+    useEffect(() => {
+        markComposePhase(id, "shell");
+        markComposePhase(id, "chunk");
+    }, []);
     // The sending ("From") mailbox. A reply/forward session names the original message's mailbox; a fresh
     // compose leaves it unset and defaults to the caller's own mailbox once `listMailboxes()` resolves.
     // Everything mailbox-scoped below (Drafts folder, draft, signatures, crypto context) keys off this.
@@ -110,6 +124,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     const [hasUploads, setHasUploads] = useState(false);
     const isMobile = useIsMobile();
     const { requestUnlock } = useUnlockPrompt();
+    const { openCompose } = useCompose();
+    const keyEnv = useKeyEnvironment();
     // Bumped after a successful on-demand unlock to force a re-render - `getUnlockedKeys()` below is a
     // plain read from a module-level store, not React state, so nothing else would pick up the change.
     const [, setUnlockRefresh] = useState(0);
@@ -368,26 +384,41 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     // non-blocking fetch in this codebase (e.g. `ConversationList`'s own child-message fetch) — no
     // signature is a completely legitimate outcome, so this falls back to just the quoted content
     // (if any) rather than surfacing an error over what's a cosmetic nicety.
+    //
+    // A reply or forward opens before its quoted original has been fetched (`quotePending`, see
+    // `OpenComposeInput.pending`). The body is seeded as soon as the signature is here, without the quote, so the editor is usable
+    // at once however slow the original is to come; the quote is added at the end of the editor's document when it arrives
+    // (`appendHtml` below) - the same place, under the signature, that a body seeded with it would have had it.
+    const [defaultSignature, setDefaultSignature] = useState();
     useEffect(() => {
-        // Seeds the body once, from whichever mailbox is the sender when compose opens - switching From
-        // later must not overwrite what the user has already written (the editor itself never re-syncs).
-        if (!mailboxUid || contentReady) {
+        // Fetched once, for whichever mailbox is the sender when compose opens - switching From later must not
+        // overwrite what the user has already written (the editor itself never re-syncs).
+        if (!mailboxUid || contentReady || defaultSignature) {
             return;
         }
         listMailSignatures(mailboxUid)
             .then((signatures) => {
             const signature = signatures.find((s) => signatureContext === "new" ? s.isDefaultForNewMessages : s.isDefaultForReplyForward);
-            const seeded = buildComposeBodyHtml(signature?.contentHtml, initialQuotedHtml);
-            setHtml(seeded);
-            setSeededHtml(seeded);
-        })
-            .catch(() => {
-            const seeded = buildComposeBodyHtml(undefined, initialQuotedHtml);
-            setHtml(seeded);
-            setSeededHtml(seeded);
+            setDefaultSignature({ html: signature?.contentHtml });
         })
-            .finally(() => setContentReady(true));
-    }, [mailboxUid, signatureContext, initialQuotedHtml]);
+            .catch(() => setDefaultSignature({}));
+    }, [mailboxUid, signatureContext]);
+    const [seededWithoutQuote, setSeededWithoutQuote] = useState(false);
+    useEffect(() => {
+        if (contentReady || !defaultSignature) {
+            return;
+        }
+        const seeded = buildComposeBodyHtml(defaultSignature.html, quotePending ? undefined : initialQuotedHtml);
+        setHtml(seeded);
+        setSeededHtml(seeded);
+        setSeededWithoutQuote(!!quotePending);
+        setContentReady(true);
+        markComposePhase(id, "body");
+    }, [defaultSignature, quotePending, initialQuotedHtml]);
+    /** What the editor adds to the end of its document once the quote a reply was opened without has arrived. */
+    const lateQuoteHtml = seededWithoutQuote && !quotePending && initialQuotedHtml && defaultSignature
+        ? buildComposeBodyHtml(defaultSignature.html, initialQuotedHtml).slice(buildComposeBodyHtml(defaultSignature.html) === "" ? "<p></p>".length : buildComposeBodyHtml(defaultSignature.html).length)
+        : undefined;
     useEffect(() => {
         if (!mailboxUid || !draftsFolderUid || draft) {
             return;
@@ -405,6 +436,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                 return;
             }
             setDraft(created);
+            markComposePhase(id, "draft");
             // Only now that the replacement exists is it safe to discard the draft(s) a From switch
             // superseded - if creating this one had failed, the earlier draft is still there.
             for (const superseded of supersededDraftsRef.current.splice(0)) {
@@ -710,6 +742,9 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         };
         const bodyContentType = 'text/html; charset="utf-8"';
         const signing = canSign ? { certDer: keys.unlocked.signingCertDer, privateKey: keys.unlocked.signingPrivateKey } : undefined;
+        // The S/MIME code (PKI.js and the ASN.1/X.509 libraries, over half a megabyte) is only needed here, to sign or
+        // encrypt - a plain message never loads it, and it is kept out of the compose window's own chunk.
+        const { applyBaselineOuterHeaders, assembleOutboundMime, buildEncryptedMessage, buildSignedOnlyMessage } = await import("@rapidmx/react-shared/crypto/smimeMessage.js");
         const outerHeaders = wantEncrypt ? applyBaselineOuterHeaders(protectedHeaders) : protectedHeaders;
         const mimePart = wantEncrypt
             ? await buildEncryptedMessage(bodyContentType, html, protectedHeaders, outerHeaders, recipientCertDers, signing)
@@ -1019,7 +1054,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     // Autosave. "User content" is anything beyond what compose opened with (prefilled recipients/subject,
     // seeded signature/quote) - an untouched window has nothing worth saving or confirming a discard of.
     const contentKey = JSON.stringify([to, cc, bcc, subject, html]);
-    const baselineKey = JSON.stringify([initialTo ?? "", initialCc ?? "", "", initialSubject ?? "", seededHtml ?? ""]);
+    const baselineKey = JSON.stringify([baselineTo ?? "", baselineCc ?? "", "", initialSubject ?? "", seededHtml ?? ""]);
     const hasUserContent = contentKey !== baselineKey || hasUploads;
     // A message headed for encryption is never autosaved: the draft would store its plaintext server-side,
     // defeating end-to-end encryption. Until it's known not to be, it isn't either: while the mailbox (whose
@@ -1042,6 +1077,21 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         (encryptionPossible && currentAddresses.some((address) => exhaustedLookups[address] && !recipientStatuses[address]));
     const latestRef = useRef({ draft, to, cc, bcc, subject, html, seededHtml, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided });
     latestRef.current = { draft, to, cc, bcc, subject, html, seededHtml, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided };
+    // Recipients a reply could only work out after this window opened (Reply All: whoever the original's headers name)
+    // replace the ones it opened with - but only in a field the user hasn't touched, never over what they typed.
+    useEffect(() => {
+        if (!late) {
+            return;
+        }
+        const current = latestRef.current;
+        if (late.to !== undefined && current.to === (initialTo ?? "")) {
+            setTo(late.to);
+        }
+        if (late.cc !== undefined && current.cc === (initialCc ?? "")) {
+            setCc(late.cc);
+            setShowCcBcc((shown) => shown || late.cc !== "");
+        }
+    }, [late]);
     useEffect(() => {
         const due = !!draft &&
             contentReady &&
@@ -1118,7 +1168,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     // Where the caret starts, once per session: a reply/forward in the body (at its top), a new message in To - or,
     // with To already filled in (e.g. Contacts' "Email"), in Subject. Minimizing unmounts the fields, so restoring a
     // window must not move the caret there again.
-    const isReplyOrForward = initialQuotedHtml !== undefined;
+    const isReplyOrForward = initialQuotedHtml !== undefined || !!quotePending;
     const fieldsFocusedRef = useRef(false);
     const bodyFocusedRef = useRef(false);
     const focusToOnMount = !isReplyOrForward && !initialTo && !fieldsFocusedRef.current;
@@ -1127,7 +1177,16 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     // The editor serializes the seeded body its own way (see `RichTextEditor`'s `onInitialized`). While the body is
     // still exactly what compose seeded, that serialization becomes the baseline - so an untouched reply or signature
     // isn't mistaken for an edit (and autosaved) just because the editor was focused or clicked.
+    /** The quote has been added: unless the reader has typed something already, that is still exactly what compose seeded. */
+    function handleQuoteAppended(normalized) {
+        const latest = latestRef.current;
+        if (latest.html === latest.seededHtml) {
+            setHtml(normalized);
+            setSeededHtml(normalized);
+        }
+    }
     function handleEditorInitialized(normalized) {
+        markComposePhase(id, "editor");
         const latest = latestRef.current;
         if (latest.html === latest.seededHtml && normalized !== latest.html) {
             setHtml(normalized);
@@ -1140,6 +1199,23 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             bodyFocusedRef.current || (bodyFocusedRef.current = contentReady);
         }
     }, [minimized, contentReady]);
+    // Keyboard shortcuts, active while the focus is inside this window (`container`; the scope attribute on its root is what tells the
+    // dispatcher the focus is in a compose window at all). They do what the Send and Close buttons and autosave do, under the same conditions -
+    // a shortcut pressed while its button would be disabled is consumed and does nothing.
+    const canSend = !!draft && !sending && !closing && cryptoContextReady;
+    useShortcut(SHORTCUTS.compose.send, () => void (canSend && submit(false)), { container: windowRef });
+    useShortcut(SHORTCUTS.compose.saveDraft, () => {
+        // Autosave's own conditions: never a draft that must not be stored as plaintext, and nothing while a send is on the wire.
+        if (draft && contentReady && cryptoContextReady && !sending && !closing && !autosaveSuppressed && hasUserContent) {
+            void saveDraftNow();
+        }
+    }, { container: windowRef });
+    useShortcut(SHORTCUTS.compose.close, () => {
+        if (!sending && !closing) {
+            void handleClose();
+        }
+    }, { container: windowRef });
+    useShortcut(SHORTCUTS.compose.create, () => openCompose({ mailboxUid }), { container: windowRef });
     const title = subject.trim() || "New Message";
     const titleId = `compose-title-${id}`;
     const discardModal = (_jsxs(Modal, { open: closePrompt !== null, onClose: () => setClosePrompt(null), title: closePrompt?.title ?? DISCARD_TITLE, children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: closePrompt?.message }), _jsxs("div", { className: "flex gap-3", children: [closePrompt?.retry && (_jsx(Button, { type: "button", onClick: retryCryptoContext, className: "!w-auto", children: "Retry" })), closePrompt?.closeAnyway && (_jsx(Button, { type: "button", onClick: () => {
@@ -1149,12 +1225,12 @@ 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 }), sendError && _jsx("span", { className: "shrink-0 text-xs font-bold uppercase tracking-wide", children: "Not sent" }), _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: sending || closing })] })] }) }), discardModal] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, 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", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-                ].join(" "), children: [!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: sending || closing })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(SendFailureAlert, { message: sendError, lines: sendDetails }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, 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`, value: mailboxUid ?? "", disabled: hasUploads || sending, 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)) })] })] })), (() => {
+                ].join(" "), children: [!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: sending || 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(SendFailureAlert, { message: sendError, lines: sendDetails }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, 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`, value: mailboxUid ?? "", disabled: hasUploads || sending, 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)) })] })] })), (() => {
                                 const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
                                     .map((r) => recipientStatuses[r.address])
                                     .filter((status) => !!status);
@@ -1162,5 +1238,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, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized })) }), 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), disabled: !draft || sending || closing || !cryptoContextReady, 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: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || closing || !cryptoContextReady, 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("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: sending || 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 })) }), 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 || sending || closing || !cryptoContextReady, 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: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || closing || !cryptoContextReady, 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("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: sending || 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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComposeSession } from "./ComposeContext.js";
+export interface ComposeWindowPlaceholderProps {
+    session: ComposeSession;
+    /** The compose window's code couldn't be downloaded. */
+    failed: boolean;
+    onRetry: () => void;
+    onClose: () => void;
+    onToggleMinimize: () => void;
+}
+/**
+ * What stands in for the compose window in the moment between clicking Compose/Reply/Forward and the window's code being
+ * loaded (already there when it was prefetched, so usually not seen at all): the window's own frame at its own size and
+ * place, its title and the recipients and subject the window will open with, all of which are known without the network -
+ * so the click is answered on the same frame. It is deliberately tiny and lives in the page's own chunk.
+ *
+ * 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;