@rapidmx/web-client 0.9.0 → 0.11.0

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

@@ -1,15 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import MailAddress from "./MailAddress.js";
 import MessageDetailPane from "./MessageDetailPane.js";
+import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
+import { useMailShell } from "./layout/MailShell.js";
+import { setReadState } from "../../mail/messageReadState.js";
+import { dateClass, isUnread, senderClass } from "./unreadStyle.js";
 /** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
 export const THREAD_PAGE_SIZE = 100;
 /**
@@ -73,8 +77,18 @@ async function loadThread(mailboxUid, conversationId) {
     messages.reverse();
     return { messages, truncated: more };
 }
+/** Whether the browser is showing a focus ring on `element` - it was focused from the keyboard (or by a key press's handler), not by a click. */
+function hasFocusRing(element) {
+    try {
+        return element.matches(":focus-visible");
+    }
+    catch {
+        return false;
+    }
+}
 /**
- * The reading pane for the conversation list: the whole thread, **newest at the top**, opened at the message
+ * The reading pane for the conversation list: the conversation's subject in a card of its own, pinned at the top, and under it the whole thread as
+ * a stack of message cards (each exactly as tall as its message; the list scrolls as a whole), **newest at the top**, opened at the message
  * the reader picked. Every message from that one through to the newest is expanded - which in this order is
  * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
  * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just
@@ -90,7 +104,8 @@ async function loadThread(mailboxUid, conversationId) {
  * single-message pane, and each acts on the message it belongs to. A collapsed message mounts none of
  * that - mounting a body iframe per message up front would be wasteful in a long thread.
  */
-export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, }) {
+export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, shortcuts, }) {
+    const { trackMessageChange } = useMailShell();
     const [messages, setMessages] = useState([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -116,6 +131,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     /** Where the toggled message's header sat in the viewport before it expanded, so the run below can put
      * it back there - expanding a message above the one being read must not shove that one off-screen. */
     const anchorRef = useRef(null);
+    /** The message whose header button had the focus when it was toggled: expanding or collapsing swaps that button for the other state's, so the
+     * focus is put back on the new one. */
+    const refocusRef = useRef(null);
     const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
@@ -192,8 +210,15 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                 scroller.scrollTop += top;
             }
         }
-        // `preventScroll` so focusing doesn't scroll it somewhere else again.
-        headerRefs.current[pendingFocusUid].focus({ preventScroll: true });
+        // A key press (j, k, the arrows) that opened this thread left the focus on its list row on purpose, so Enter goes on to open the
+        // message's page; taking the focus here would make Enter toggle this header instead. A click leaves no focus ring, and hands
+        // the focus to the thread as before.
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement && active.hasAttribute("data-row-open") && hasFocusRing(active))) {
+            // `preventScroll` so focusing doesn't scroll it somewhere else again.
+            // (A card's header button is drawn by the message pane, which registers it; a stand-in pane that doesn't has none to focus.)
+            headerRefs.current[pendingFocusUid]?.focus({ preventScroll: true });
+        }
         setPendingFocusUid(null);
     }, [pendingFocusUid, expandedUids]);
     // Keeps the message whose header was just clicked where it was on screen. Expanding one above the
@@ -206,6 +231,11 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         // The row is still there: the anchor was taken from a rendered row, and toggling never removes one.
         const row = rowRefs.current[anchor.uid];
         scrollingAncestor(row).scrollTop += row.getBoundingClientRect().top - anchor.top;
+        // The button the reader had focused is gone (a collapsed card and an expanded one each draw their own): keep them where they were.
+        if (refocusRef.current === anchor.uid) {
+            headerRefs.current[anchor.uid]?.focus({ preventScroll: true });
+        }
+        refocusRef.current = null;
     }, [expandedUids]);
     // Attachments and mark-as-read, for expanded messages only - mirrors `mailDetailHooks.ts`'s
     // `useMessageAttachments`/`useMarkMessageRead`, reimplemented here (rather than called in a loop, which
@@ -230,20 +260,25 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                     attachmentsRequestedRef.current.delete(uid);
                 });
             }
-            if (!message.flags.read && !markReadRequestedRef.current.has(uid)) {
+            if (!markReadRequestedRef.current.has(uid)) {
+                // Asked once per opened conversation and per expanding of the message: a failure is not retried from here, because
+                // undoing the optimistic change changes `messages`, which would run this effect again and ask again, for ever. A message
+                // that is already read is asked about too (there is nothing to send), so marking it unread while it is open - the
+                // keyboard's Ctrl+U - doesn't make this run again and read it straight back.
                 markReadRequestedRef.current.add(uid);
-                // `message` is this render's copy, so the request carries its current `version`.
-                setMessageRead(message, true)
-                    .then((updated) => {
-                    if (generation !== generationRef.current)
-                        return;
-                    // `message` is the unread copy this pane just replaced - what tells the list's own
-                    // conversation row that its unread count has gone down by one.
-                    patchMessage(updated, message);
-                })
-                    .catch(() => {
-                    // Best-effort, as in `useMarkMessageRead`.
-                    markReadRequestedRef.current.delete(uid);
+                if (message.flags.read === true) {
+                    continue;
+                }
+                // `message` is this render's copy, so the request carries its current `version`. The row, the conversation row's
+                // unread count and the folder badge all change at once; `previous` is what tells the list's conversation row
+                // that its count moved (see `setReadState()`).
+                void setReadState(message, true, {
+                    patch: (updated, previous) => {
+                        if (generation === generationRef.current) {
+                            patchMessage(updated, previous);
+                        }
+                    },
+                    track: trackMessageChange,
                 });
             }
         }
@@ -260,8 +295,11 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         onMessageRemoved(updated);
     }
     function toggleExpanded(uid) {
+        // Opening a message again asks to mark it read again - that is how one whose request failed is retried.
+        markReadRequestedRef.current.delete(uid);
         // The row this button lives in has rendered, so its ref is set.
         anchorRef.current = { uid, top: rowRefs.current[uid].getBoundingClientRect().top };
+        refocusRef.current = document.activeElement === headerRefs.current[uid] ? uid : null;
         setExpandedUids((prev) => {
             const next = new Set(prev);
             if (next.has(uid)) {
@@ -273,35 +311,44 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             return next;
         });
     }
+    // The keyboard acts on the message that was opened - or the newest, when the opened one isn't in this thread - never on all the expanded
+    // ones at once (each is a `MessageDetailPane`, and two of them must not both answer Ctrl+R).
+    const keyboardUid = messages.some((message) => message.uid === selectedUid) ? selectedUid : messages[0]?.uid;
     function folderTypeOf(message) {
         return folders.find((folder) => folder.uid === message.folderUid)?.type;
     }
     if (!conversation) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
     }
-    if (loading) {
-        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
-    }
-    if (error) {
-        return (_jsx("div", { className: "p-4 flex-1", children: _jsx(Alert, { children: error }) }));
-    }
-    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [messages.length, " message", messages.length === 1 ? "" : "s"] }), truncated && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] }))] }), _jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto", children: messages.map((message) => {
+    const subject = displaySubject(conversation.subject) || "(no subject)";
+    // The newest message that is open carries the Reply / Forward buttons at the foot of its card.
+    const footerUid = messages.find((message) => expandedUids.has(message.uid))?.uid;
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsx(SubjectCard, { subject: subject, meta: loading
+                    ? conversation.messageCount > 1
+                        ? `${conversation.messageCount} messages`
+                        : undefined
+                    : error
+                        ? undefined
+                        : `${messages.length} message${messages.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: messages.map((message) => {
                     const uid = message.uid;
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
-                    return (_jsxs("li", { ref: (node) => {
+                    const messageUnread = isUnread(message);
+                    return (_jsx("li", { ref: (node) => {
                             rowRefs.current[uid] = node;
-                        }, 
-                        // An expanded message is as tall as the list it scrolls in - `min-h-full`
-                        // against the `<ul>`'s own resolved height - so its `MessageDetailPane` below
-                        // has a full pane of height to fill and its body reaches the bottom of the
-                        // window whatever that window's size is. `min-` rather than `h-`: a message
-                        // whose header alone is taller than the pane still gets the room it needs.
-                        className: ["border-b border-border", expanded ? "flex flex-col min-h-full" : ""].join(" "), children: [_jsx("h2", { className: "shrink-0", children: _jsxs("button", { type: "button", ref: (node) => {
+                        }, "data-unread": messageUnread ? "true" : undefined, children: expanded ? (_jsx(MessageDetailPane, { inThread: true, threadSubject: subject, threadHeader: {
+                                bodyId,
+                                unread: messageUnread,
+                                onToggle: () => toggleExpanded(uid),
+                                buttonRef: (node) => {
+                                    headerRefs.current[uid] = node;
+                                },
+                            }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
                                         headerRefs.current[uid] = node;
-                                    }, onClick: () => toggleExpanded(uid), "aria-expanded": expanded, "aria-controls": bodyId, className: [
-                                        "w-full text-left px-4 py-3 hover:bg-surface-alt",
-                                        message.flags.read ? "" : "font-semibold",
-                                    ].join(" "), children: [_jsxs("span", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleString() })] }), !expanded && (_jsx("span", { className: "block text-xs text-text-muted truncate font-normal", children: message.bodyPreview }))] }) }), _jsx("div", { id: bodyId, hidden: !expanded, className: expanded ? "flex-1 min-h-0 flex" : undefined, children: expanded && (_jsx(MessageDetailPane, { inThread: true, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) })] }, uid));
-                }) })] }));
+                                    }, buttonProps: {
+                                        onClick: () => toggleExpanded(uid),
+                                        "aria-expanded": false,
+                                        "aria-controls": bodyId,
+                                    } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
+                }) }))] }));
 }

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type MessageDetailPaneType from "./MessageDetailPane.js";
+import type ConversationThreadPaneType from "./ConversationThreadPane.js";
+/** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
+export declare function prefetchReadingPane(): void;
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export declare function LazyMessageDetailPane(props: React.ComponentProps<typeof MessageDetailPaneType>): React.JSX.Element;
+export declare function LazyConversationThreadPane(props: React.ComponentProps<typeof ConversationThreadPaneType>): React.JSX.Element;

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

@@ -0,0 +1,83 @@
+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, useState } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ReadingPaneSkeleton } from "./reading/MessageCard.js";
+/**
+ * The reading pane (`MessageDetailPane`, and the thread pane that stacks it) is only rendered once a message is selected, and
+ * it is the heaviest piece of the inbox after the compose window - message security, the body sanitizer, the labels and move
+ * menus - so it is a chunk of its own, downloaded when the browser is idle after the list has loaded (`prefetchReadingPane()`)
+ * and, at the latest, on the first selection. Nothing about the pane changes: these wrap the same components, with a skeleton
+ * while the chunk loads and a reload prompt if it can't.
+ *
+ * Deliberately not `React.lazy()` + `<Suspense>`: a boundary that has shown its fallback holds the content back for up to 300 ms
+ * after the code arrives (React's fallback throttle), which would put a fifth of a second between a click and a pane whose
+ * code was already fetched. This reads the loaded component synchronously when there is one, so an already-loaded pane renders
+ * on the click's own frame, and it can retry a failed download.
+ */
+function lazyComponent(load, skeleton) {
+    let loaded;
+    let loading;
+    /** Starts (once) loading the component's code. Rejects if it can't be downloaded - and then a later call tries again. */
+    function start() {
+        loading ?? (loading = load().then((module) => (loaded = module.default), (err) => {
+            loading = undefined;
+            throw err;
+        }));
+        return loading;
+    }
+    function Lazy(props) {
+        const [, setLoadedNow] = useState(0);
+        const [failed, setFailed] = useState(false);
+        useEffect(() => {
+            if (loaded) {
+                return;
+            }
+            let cancelled = false;
+            start().then(() => !cancelled && setLoadedNow((n) => n + 1), () => !cancelled && setFailed(true));
+            return () => {
+                cancelled = true;
+            };
+        }, []);
+        if (loaded) {
+            const Component = loaded;
+            return _jsx(Component, { ...props });
+        }
+        return failed ? _jsx(ChunkFailed, {}) : skeleton(props);
+    }
+    return { Lazy, start };
+}
+/** A chunk that can't be downloaded (offline, or replaced by a deploy since this page loaded) is the one failure a reading
+ * pane can't recover from by itself: say so, with the fix, rather than leaving a blank pane. */
+function ChunkFailed() {
+    return (_jsx("div", { className: "flex-1 p-6", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: "This part of the page couldn\u2019t be loaded. Check your connection, then reload." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => window.location.reload(), children: "Reload" })] }) }));
+}
+// While the code loads the pane already draws its frame - the header card with the subject the list row knows, and a card of placeholder lines - so
+// the click is answered on its own frame and the messages only fill in.
+const messageDetailPane = lazyComponent(() => import("./MessageDetailPane.js"), 
+// `LazyMessageDetailPane` renders the empty state, not this, for no message.
+(props) => _jsx(ReadingPaneSkeleton, { subject: props.message.subject }));
+const conversationThreadPane = lazyComponent(() => import("./ConversationThreadPane.js"), (props) => _jsx(ReadingPaneSkeleton, { subject: props.conversation.subject, messageCount: props.conversation.messageCount }));
+/** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
+export function prefetchReadingPane() {
+    messageDetailPane.start().catch(() => undefined);
+    conversationThreadPane.start().catch(() => undefined);
+}
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export function LazyMessageDetailPane(props) {
+    if (!props.message) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
+    }
+    return _jsx(messageDetailPane.Lazy, { ...props });
+}
+export function LazyConversationThreadPane(props) {
+    if (!props.conversation) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
+    }
+    return _jsx(conversationThreadPane.Lazy, { ...props });
+}

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

@@ -36,15 +36,17 @@ export interface MailSelectionBarProps {
     onArchive: () => void;
     /** Moves the selection into `folderUid`, resolving once the bulk update has settled. It resolves
      * whether or not that update was rejected: a bulk update is applied element by element, so a failure
-     * is explained in this bar (along with the reload it triggers) rather than in the prompt, which would
-     * be claiming the move simply didn't happen. */
+     * is explained by a pop-up (see `notifyApiError()`), raised by the page along with the reload it triggers, rather than in the
+     * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
     onDelete: () => void;
     /** A bulk action is in flight - every action is held until it settles, since the next one would send
      * `version`s the first has already superseded. */
     busy: boolean;
-    error: string | null;
+    /** The keyboard acts on this selection (Delete, Ctrl+Q, Ctrl+U, Insert - registered by the page): Mark read, Mark unread, Flag and
+     * Delete name their shortcut in the tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
@@ -56,4 +58,4 @@ export interface MailSelectionBarProps {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, error, }: MailSelectionBarProps): React.JSX.Element;
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -4,9 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
 import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
+import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 function actionClassName() {
     return "px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
 }
@@ -20,7 +22,12 @@ function actionClassName() {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, error, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }) {
+    const env = useKeyEnvironment();
+    /** `title` and `aria-keyshortcuts` for an action the keyboard also does; `reason` (why it is disabled) wins the tooltip. */
+    const hint = (label, shortcut, reason) => shortcuts
+        ? { title: reason ?? withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) }
+        : { title: reason };
     const selectedCount = totals?.selected ?? selected.length;
     const listedCount = totals?.listed ?? listed.length;
     // Counted on the rows that were ticked, but *emptied* on the messages: a ticked conversation whose
@@ -42,7 +49,7 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // partially applied, and is left exactly as it is unless the reader touches that row.
     const appliedToAll = labels.filter((label) => !none && selected.every((m) => m.labelUids?.includes(label.uid)));
     const appliedToSome = labels.filter((label) => selected.some((m) => m.labelUids?.includes(label.uid)) && !appliedToAll.includes(label));
-    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy, note: selected.length === 1
+    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy, note: selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
-                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, title: deleteReason, className: actionClassName(), children: "Delete" })] }), error && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: error }) }))] }));
+                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Attachment, Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import { MessageSecurityResult } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+import type { MessageSecurityResult } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 /** The detail line under a `verified_at_first_open` badge. */
 export declare function verifiedAtFirstOpenMessage(result: MessageSecurityResult): string;
 export interface SenderNameCheck {
@@ -24,9 +24,6 @@ export declare function trustSignerErrorMessage(err: unknown): string;
 /** Groups a fingerprint into 4-character blocks (`AB12 CD34 ...`), ignoring any separators it came with, so it can be
  * read out and compared with the sender over another channel. */
 export declare function formatFingerprint(fingerprint: string): string;
-/** Sanitizes a client-rendered body for `srcDoc` (DOMPurify plus every remote resource reference stripped - see
- * react-shared's `messageBodySanitizer.ts`), with the CSP meta as its very first element. */
-export declare function buildSecureSrcDoc(html: string): string;
 export interface MessageDetailPaneProps {
     message: Message | null;
     attachments: Attachment[];
@@ -86,13 +83,33 @@ export interface MessageDetailPaneProps {
     /** Handed a label created from the Labels menu, for the caller to add to `labels`. Without it the menu
      * offers no "New label" row, only the link to where labels are managed. */
     onLabelCreated?: (label: Label) => void;
-    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: the
-     * subject becomes a heading under the thread's own, since a document has one `h1` and the thread's is
-     * the conversation. Everything else - the badges, the actions, the body - is identical. */
+    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: only its card is drawn - the thread
+     * owns the subject card, the scrolling and the `h1` - and the message's own subject appears (as an `h3`) only when it differs from the
+     * thread's (`threadSubject`). Everything else - the badges, the actions, the body - is identical. */
     inThread?: boolean;
+    /** The thread's subject, for a message of a thread to tell whether its own subject is worth showing. */
+    threadSubject?: string;
+    /** In a thread, what makes the sender line of this expanded card the button that collapses it: the id of the body it controls, whether the
+     * message is unread (which draws the accent bar and tint), what it does, and where to put its ref. */
+    threadHeader?: {
+        bodyId: string;
+        unread: boolean;
+        onToggle: () => void;
+        buttonRef: (node: HTMLButtonElement | null) => void;
+    };
+    /** Draw the Reply and Forward buttons at the foot of the card - by default for the single-message pane, and in a thread only where the
+     * caller asks (the newest expanded message). */
+    footer?: boolean;
+    /**
+     * Registers this pane's keyboard shortcuts - Reply, Reply all, Forward, Archive, Move to - so they act on this message. Only the message
+     * the keyboard is acting on should set it: the one pane beside the list, or the opened message of a thread (each expanded message of a
+     * thread is a pane, and two of them must not both claim Ctrl+R). Also puts the shortcut in those buttons' tooltips.
+     */
+    shortcuts?: boolean;
 }
 /**
- * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
+ * A message's reading pane - a subject card, and under it the message as a card: header (sender, recipients, time, actions), notices, attachments,
+ * the body (`reading/MessageBody`: an isolated frame exactly as tall as its content, or text) and a footer. Rendered with `inThread`, only the card.
  * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
  * and the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
  * a message row) — see each call site for how `message`/`attachments`/`isSentItems` are sourced. The