@rapidmx/web-client 0.8.0 → 0.10.0

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,82 @@
+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 Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.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) {
+    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, {}) : _jsx(PaneSkeleton, {});
+    }
+    return { Lazy, start };
+}
+function PaneSkeleton() {
+    return (_jsxs("div", { role: "status", "aria-busy": "true", className: "flex-1 p-6 flex flex-col gap-3", children: [_jsx("span", { className: "sr-only", children: "Loading the message" }), _jsx(Skeleton, { width: "w-2/3", height: "h-6" }), _jsx(Skeleton, { width: "w-1/3" }), _jsx(Skeleton, { height: "h-40" })] }));
+}
+/** 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" })] }) }));
+}
+const messageDetailPane = lazyComponent(() => import("./MessageDetailPane.js"));
+const conversationThreadPane = lazyComponent(() => import("./ConversationThreadPane.js"));
+/** 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/MailAddress.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { MailAddressLike } from "@rapidmx/react-shared/mail/mailAddress.js";
+export interface MailAddressProps {
+    /** A message's `from`, a recipient, a conversation participant. */
+    recipient: MailAddressLike;
+    className?: string;
+}
+/**
+ * A sender or recipient as one compact line for a dense row: the name, when there is one, with the real address in muted
+ * type after it - `Jean-Philippe  <jp@example.com>` - or the bare address without a name. The address is never left out,
+ * and when the row is too narrow for both the name gives way first (it shrinks a thousand times faster), then the
+ * address's own local part - the `@domain`, which is what says who really sent it, keeps its room to the end. The full
+ * `Name <address>` is the tooltip and, once, the accessible text (the two visible halves are hidden from assistive
+ * technology), so a screen reader hears one address, not fragments.
+ */
+export default function MailAddress({ recipient, className }: MailAddressProps): React.JSX.Element;
+/** How many recipients a `RecipientLine` shows before folding the rest behind "and N more". */
+export declare const RECIPIENT_LINE_LIMIT = 3;
+/**
+ * A `To`/`Cc` line of a message header: every recipient as `Name <address>` in the text itself (never hover-only), wrapping
+ * onto more lines as needed. A long list shows its first `RECIPIENT_LINE_LIMIT` and folds the rest behind a button -
+ * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty.
+ */
+export declare function RecipientLine({ label, recipients }: {
+    label: string;
+    recipients: MailAddressLike[];
+}): React.JSX.Element | null;

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

@@ -0,0 +1,39 @@
+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 React, { useState } from "react";
+import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+/**
+ * A sender or recipient as one compact line for a dense row: the name, when there is one, with the real address in muted
+ * type after it - `Jean-Philippe  <jp@example.com>` - or the bare address without a name. The address is never left out,
+ * and when the row is too narrow for both the name gives way first (it shrinks a thousand times faster), then the
+ * address's own local part - the `@domain`, which is what says who really sent it, keeps its room to the end. The full
+ * `Name <address>` is the tooltip and, once, the accessible text (the two visible halves are hidden from assistive
+ * technology), so a screen reader hears one address, not fragments.
+ */
+export default function MailAddress({ recipient, className }) {
+    const { name, address } = splitMailAddress(recipient);
+    const full = formatMailAddress(recipient);
+    const at = address.lastIndexOf("@");
+    const local = at > 0 ? address.slice(0, at) : address;
+    const domain = at > 0 ? address.slice(at) : "";
+    return (_jsxs("span", { className: ["flex min-w-0 items-baseline gap-1.5", className].filter(Boolean).join(" "), title: full, children: [_jsx("span", { className: "sr-only", children: full }), name && (_jsx("span", { "aria-hidden": "true", className: "truncate min-w-0", style: { flexShrink: 1000 }, children: name })), _jsxs("span", { "aria-hidden": "true", className: ["flex min-w-0 items-baseline", name ? "text-xs font-normal text-text-muted" : ""].filter(Boolean).join(" "), children: [name && _jsx("span", { children: "<" }), _jsx("span", { className: "truncate min-w-0", children: local }), domain && _jsx("span", { className: "shrink-0", children: domain }), name && _jsx("span", { children: ">" })] })] }));
+}
+/** How many recipients a `RecipientLine` shows before folding the rest behind "and N more". */
+export const RECIPIENT_LINE_LIMIT = 3;
+/**
+ * A `To`/`Cc` line of a message header: every recipient as `Name <address>` in the text itself (never hover-only), wrapping
+ * onto more lines as needed. A long list shows its first `RECIPIENT_LINE_LIMIT` and folds the rest behind a button -
+ * "and 12 more" / "Show fewer" - so a message to a hundred people doesn't take the whole header. Nothing when empty.
+ */
+export function RecipientLine({ label, recipients }) {
+    const [expanded, setExpanded] = useState(false);
+    if (recipients.length === 0) {
+        return null;
+    }
+    const folded = recipients.length > RECIPIENT_LINE_LIMIT;
+    const shown = folded && !expanded ? recipients.slice(0, RECIPIENT_LINE_LIMIT) : recipients;
+    return (_jsxs("p", { className: "text-sm text-text-muted break-words", children: [_jsx("span", { children: label }), " ", shown.map((recipient, index) => (_jsxs(React.Fragment, { children: [index > 0 && ", ", _jsx("span", { children: formatMailAddress(recipient) })] }, index))), folded && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), className: "text-xs font-semibold text-primary-dark underline hover:no-underline", children: expanded ? "Show fewer" : `and ${recipients.length - RECIPIENT_LINE_LIMIT} more` })] }))] }));
+}

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

@@ -45,6 +45,9 @@ export interface MailSelectionBarProps {
      * `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 +59,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, error, shortcuts, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -7,6 +7,9 @@ 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 +23,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, error, 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 +50,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" })] }), error && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: error }) }))] }));
 }

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 {
@@ -90,6 +90,12 @@ export interface MessageDetailPaneProps {
      * 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. */
     inThread?: 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.

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

@@ -11,7 +11,6 @@ import { buildForwardQuote, buildReplyQuote, buildReplyRecipients, buildReplyThr
 import { sanitizeMessageBodyHtml } from "@rapidmx/react-shared/mail/messageBodySanitizer.js";
 import MoveToFolderDialog from "./MoveToFolderDialog.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
-import { evaluateMessageSecurity, evaluateMessageSecurityWithSeal, } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 import { extractAddresses } from "@rapidmx/react-shared/crypto/mime.js";
 import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
@@ -20,10 +19,16 @@ import { currentVerificationSeal, getVaultGeneration, sendVerificationSeal } fro
 import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
 import KeyChangeReview from "../contacts/KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, sameFingerprint } from "../contacts/contactKeys.js";
-import { useCompose } from "./compose/ComposeContext.js";
-import { loadOriginalMessage } from "./compose/quotedBody.js";
+import { prefetchComposeWindow, useCompose } from "./compose/ComposeContext.js";
+import { loadOriginalMessage, prefetchOriginalMessage } from "./compose/quotedBody.js";
 import { formatRecipient } from "./compose/recipients.js";
+import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+import { RecipientLine } from "./MailAddress.js";
 import { useMailShell } from "./layout/MailShell.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 { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
 import { moveLocalEntity } from "../../search/localIndexRpcClient.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
@@ -129,8 +134,9 @@ function downloadMimeAttachment(attachment) {
  * A plain `<button>` rather than react-shared's `Button`, whose padding and minimum width are sized for a
  * text label. Ordinary DOM order, so the keyboard reaches these in the order they are read.
  */
-function IconAction({ icon, label, onClick, disabled, busy, }) {
-    return (_jsx("button", { type: "button", "aria-label": label, title: label, "aria-busy": busy || undefined, disabled: disabled, onClick: onClick, className: "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: icon }));
+function IconAction({ icon, label, onClick, disabled, busy, onPrefetch, 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, "aria-busy": busy || undefined, disabled: disabled, onClick: onClick, onPointerEnter: onPrefetch, onFocus: onPrefetch, className: "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: icon }));
 }
 function SecurityIndicator({ security }) {
     const { label, className } = SECURITY_INDICATOR[security.state];
@@ -193,7 +199,7 @@ export default function MessageDetailPane(props) {
 function needsRawSecurityEvaluation(message) {
     return !!message.encrypted || message.hasAttachments;
 }
-function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, folders, onMoved, onFolderCreated, onReceiptHandled, onArchived, labels, onLabelsChanged, onLabelCreated, inThread, }) {
+function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, folders, onMoved, onFolderCreated, onReceiptHandled, onArchived, labels, onLabelsChanged, onLabelCreated, inThread, shortcuts, }) {
     // A copy re-read from the server after an Outbox action was refused (409/403) or a send lease ran out - see
     // `reloadMessage()`. A prop copy newer by `version` wins; an equal-version reload is kept, since claiming a send
     // lease need not bump `version`.
@@ -237,7 +243,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const [keyChangeNotice, setKeyChangeNotice] = useState(null);
     // "Now", for deciding whether a scheduled send's lease is still live - advanced when the lease runs out.
     const [nowMs, setNowMs] = useState(() => Date.now());
-    const { mailboxes } = useMailShell();
+    const { mailboxes, trackMessageChange } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
@@ -291,6 +297,9 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             if (cancelled) {
                 return;
             }
+            // The S/MIME code (PKI.js and the ASN.1/X.509 libraries) loads here, only for a message that is signed or
+            // encrypted - it is over half a megabyte, and the pane opens plain messages without it.
+            const messageSecurity = await import("@rapidmx/react-shared/crypto/messageSecurity.js");
             const [primaryAddress, ...aliasAddresses] = readerAddressesKey ? readerAddressesKey.split(" ") : [];
             const ownAddresses = readerAddressesKey.toLowerCase().split(" ");
             const ownKeys = ownAddresses.includes(senderAddress.toLowerCase()) ? (readerMailbox.keys ?? []) : [];
@@ -308,7 +317,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     ...(sealContext.keyState?.previous ?? []),
                     ...ownKeys,
                 ];
-                result = await evaluateMessageSecurityWithSeal(rawMime, unlocked, pinned, primaryAddress, {
+                result = await messageSecurity.evaluateMessageSecurityWithSeal(rawMime, unlocked, pinned, primaryAddress, {
                     mailboxUid: message.mailboxUid,
                     messageUid: message.uid,
                     ...currentVerificationSeal(message),
@@ -316,14 +325,14 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     signerKeys,
                 }).catch(() => 
                 // Only a lock while sealing throws: evaluate as locked (the lock itself re-evaluates too).
-                evaluateMessageSecurity(rawMime, undefined, pinned, primaryAddress));
+                messageSecurity.evaluateMessageSecurity(rawMime, undefined, pinned, primaryAddress));
                 if (result.sealToWrite) {
                     // Best effort and in the background: never awaited, never shown.
                     void sendVerificationSeal(message.uid, result.sealToWrite);
                 }
             }
             else {
-                result = await evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
+                result = await messageSecurity.evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
             }
             // Only one reader address can be checked per evaluation: a message sent to one of this mailbox's
             // aliases isn't "not addressed to you", so each alias is tried before saying so.
@@ -331,7 +340,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                 if (!result.notAddressedToReader) {
                     break;
                 }
-                const viaAlias = await evaluateMessageSecurity(rawMime, unlocked, pinned, alias);
+                const viaAlias = await messageSecurity.evaluateMessageSecurity(rawMime, unlocked, pinned, alias);
                 result = { ...result, notAddressedToReader: viaAlias.notAddressedToReader };
             }
             const unpinned = contactPins.loaded && pins.length === 0;
@@ -440,46 +449,72 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid).catch(() => undefined));
         return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
+    /** Starts fetching what Reply/Reply All/Forward will need (the compose window's code, the original's body) as the
+     * pointer or keyboard reaches one of their buttons, so the click itself finds it already on its way or here. */
+    function prefetchReply() {
+        prefetchComposeWindow();
+        prefetchOriginalMessage(message);
+    }
+    /**
+     * Opens the compose window at once from what is already in memory - the message's own subject and sender, and the
+     * mailbox it was read in - and fetches what needs the network meanwhile: the original's body to quote, and for Reply All
+     * the recipients its headers name. Both reach the window through `OpenComposeInput.pending` when they arrive, so the
+     * window is on screen on the click's own frame rather than after two or three sequential requests.
+     */
     async function handleReplyOrForward(kind) {
         setPreparingCompose(true);
         try {
-            const [original, own] = await Promise.all([
-                loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
-                kind === "forward" ? [] : ownAddresses(),
-            ]);
             const encrypt = !!message.encrypted;
             // What makes the new message part of this one's thread rather than a conversation of its own:
             // the server composes the MIME from the recipients, subject and HTML alone, so nothing else
             // recovers what is being replied to. A forward carries it for the same reason - it continues
             // the thread it came from, which is where its recipient will file the reply to it.
             const threading = buildReplyThreading(message);
+            const format = (list) => list.map((r) => formatRecipient(r)).join(", ");
+            // Known without a request when the shell has already listed the mailbox; otherwise fetched with the body, and
+            // the window's recipients are corrected by `late` below if that changes who they are.
+            const knownOwn = readerAddressesKey ? readerAddressesKey.split(" ") : undefined;
+            // Never rejects: loadOriginalMessage() and ownAddresses() don't, and the rest is pure.
+            const late = (async () => {
+                const [original, own] = await Promise.all([
+                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
+                    kind === "forward" ? [] : (knownOwn ?? ownAddresses()),
+                ]);
+                if (kind === "forward") {
+                    return { quotedHtml: buildForwardQuote(message, original.body) };
+                }
+                // The message's own recipients are only the envelope recipient of a delivered message, so Reply All
+                // answers whoever its headers actually name, with anything the record holds that they don't.
+                const known = new Set((original.recipients ?? []).map((r) => r.address.trim().toLowerCase()));
+                const recipients = buildReplyRecipients({ ...message, recipients: [...(original.recipients ?? []), ...message.recipients.filter((r) => !known.has(r.address.trim().toLowerCase()))] }, own, kind === "replyAll");
+                return { quotedHtml: buildReplyQuote(message, original.body), to: format(recipients.to), cc: format(recipients.cc) };
+            })();
             if (kind === "forward") {
                 openCompose({
                     mailboxUid: message.mailboxUid,
                     subject: forwardSubject(message.subject),
-                    quotedHtml: buildForwardQuote(message, original.body),
                     signatureContext: "reply_forward",
                     encrypt,
                     threading,
+                    pending: late,
                 });
-                return;
             }
-            // The message's own recipients are only the envelope recipient of a delivered message, so Reply All
-            // answers whoever its headers actually name, with anything the record holds that they don't.
-            const known = new Set((original.recipients ?? []).map((r) => r.address.trim().toLowerCase()));
-            const recipients = buildReplyRecipients({ ...message, recipients: [...(original.recipients ?? []), ...message.recipients.filter((r) => !known.has(r.address.trim().toLowerCase()))] }, own, kind === "replyAll");
-            const format = (list) => list.map((r) => formatRecipient(r)).join(", ");
-            openCompose({
-                mailboxUid: message.mailboxUid,
-                to: format(recipients.to),
-                cc: recipients.cc.length > 0 ? format(recipients.cc) : undefined,
-                subject: replySubject(message.subject),
-                quotedHtml: buildReplyQuote(message, original.body),
-                signatureContext: "reply_forward",
-                suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
-                encrypt,
-                threading,
-            });
+            else {
+                const first = buildReplyRecipients(message, knownOwn ?? [], kind === "replyAll");
+                openCompose({
+                    mailboxUid: message.mailboxUid,
+                    to: format(first.to),
+                    cc: first.cc.length > 0 ? format(first.cc) : undefined,
+                    subject: replySubject(message.subject),
+                    signatureContext: "reply_forward",
+                    suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                    encrypt,
+                    threading,
+                    pending: late,
+                });
+            }
+            // Held until the quote is in, so a second click can't open a second window for the same message meanwhile.
+            await late;
         }
         finally {
             setPreparingCompose(false);
@@ -515,6 +550,8 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             const updated = await cancelScheduledSend(message, draftsFolderUid);
             // Keeps a `folder:`-scoped Tier 2 local search from still finding it in its old folder.
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
+            // Out of Outbox, into Drafts: both folders' badges.
+            trackMessageChange(message, updated).settle();
             onScheduledSendCanceled?.(updated);
         }
         catch (err) {
@@ -539,6 +576,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         try {
             const updated = await archiveMessage(message.uid);
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
+            trackMessageChange(message, updated).settle();
             onArchived?.(updated);
         }
         catch (err) {
@@ -583,8 +621,21 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
      */
     async function handleMove(folderUid) {
         const updated = await moveMessage(message, folderUid);
+        // Move to, Delete and Report junk are all this: the source folder's badge goes down, the target's up.
+        trackMessageChange(message, updated).settle();
         onMoved?.(updated);
     }
+    // Keyboard shortcuts for the message this pane shows. They call the same handlers as the buttons below, and exist only where the
+    // button does (Archive not for Drafts/Outbox, Move to only with folders to move to). A shortcut pressed while its action is already
+    // running is consumed and does nothing, exactly as the disabled button would: a browser must not act on Ctrl+R meanwhile.
+    const archivable = !inOutbox && message.folderUid !== draftsFolderUid;
+    const movable = !!folders && folders.length > 0;
+    const keyboard = !!shortcuts;
+    useShortcut(SHORTCUTS.mail.reply, () => void (!preparingCompose && handleReplyOrForward("reply")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.replyAll, () => void (!preparingCompose && handleReplyOrForward("replyAll")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.forward, () => void (!preparingCompose && handleReplyOrForward("forward")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.archive, () => void (!archiving && handleArchive()), { enabled: keyboard && archivable });
+    useShortcut(SHORTCUTS.mail.move, () => setMovePrompt(true), { enabled: keyboard && movable });
     // Only ever invoked from the pending-receipt banner below, which itself only renders once `message`
     // is loaded — same real invariant as every other handler above.
     async function handleReceipt(type, action) {
@@ -627,8 +678,8 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const senderAddress = (signatureShown ? extractAddresses(security.protectedHeaders?.from)[0] : undefined) ?? message.from.address;
     const senderName = message.from.displayName;
     const senderNameCheck = checkSenderName(senderName, senderAddress);
-    const showSenderAddress = !!senderName && (signatureShown || senderNameCheck.looksLikeAddress);
-    const senderLabel = showSenderAddress ? `${senderName} <${senderAddress}>` : senderName || senderAddress;
+    // Always `Name <address>` (or the bare address): a name alone hides who a message is really from.
+    const senderLabel = formatMailAddress({ displayName: senderName, address: senderAddress });
     // Offered only for a valid signature from a certificate nobody pinned for this sender - never to replace a pin.
     // A recorded signing-key conflict for this sender is resolved from the contact, never by trusting another key.
     const pendingConflict = senderUnpinned && senderKeyState?.conflict !== undefined;
@@ -668,7 +719,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                                     source: recordedConflict?.source,
                                 }, certificate: keyChanged.signerCertificate, canReject: recordedConflict !== undefined, canResolve: canUpdateMailbox, onResolved: (action) => refreshAfterKeyChange(action === "reject" ? KEPT_CURRENT_SIGNING_KEY_MESSAGE : null), onPinnedKeyChanged: () => refreshAfterKeyChange(KEY_CHANGE_STALE_MESSAGE) })] })), security?.state === "signature_failed" && !keyChanged && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: security.signatureFailureReason
                             ? SIGNATURE_FAILURE_MESSAGE[security.signatureFailureReason]
-                            : GENERIC_SIGNATURE_FAILURE_MESSAGE })), verifiedOrSealed && !security.protectedHeaders && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The signature covers this message\u2019s content and attachments only. Its Subject, To and Cc weren\u2019t signed, so they could have been changed after it was sent." })), security?.notAddressedToReader && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The recipients this message was signed or encrypted for don\u2019t include this mailbox - it may have been forwarded or re-sent to you unchanged, or you were Bcc\u2019d." })), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["From ", senderLabel, " \u00B7 ", new Date(message.receivedDate).toLocaleString()] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsxs("p", { className: "text-sm text-text-muted", children: ["To ", message.recipients.map((r) => r.displayName || r.address).join(", ")] }), _jsxs("div", { className: "flex flex-wrap gap-1 mt-3", children: [_jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true" }), label: "Reply", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply") }), _jsx(IconAction, { icon: _jsxs("span", { className: "inline-flex items-center", "aria-hidden": "true", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16 }), _jsx(HiOutlineArrowUturnLeft, { size: 16, className: "-ml-2.5" })] }), label: "Reply All", disabled: preparingCompose, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward") }), !inOutbox && message.folderUid !== draftsFolderUid && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", busy: archiving, disabled: archiving, onClick: handleArchive })), folders && folders.length > 0 && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", onClick: () => setMovePrompt(true) })), labels && labels.length > 0 && (_jsx(LabelMenuButton, { "aria-label": "Labels", label: "Labels", className: "border border-border py-1.5", labels: labels, mailboxUid: message.mailboxUid, onLabelCreated: onLabelCreated, applied: currentLabelsMessage.labelUids ?? [], onCommit: (labelUids) => void handleApplyLabels(labelUids), busy: savingLabels, note: "Ticked labels are applied to this message and unticked ones removed.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }))] }), archiveError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: archiveError }) })), labelsError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: labelsError }) })), labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", children: currentLabelsMessage
+                            : GENERIC_SIGNATURE_FAILURE_MESSAGE })), verifiedOrSealed && !security.protectedHeaders && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The signature covers this message\u2019s content and attachments only. Its Subject, To and Cc weren\u2019t signed, so they could have been changed after it was sent." })), security?.notAddressedToReader && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The recipients this message was signed or encrypted for don\u2019t include this mailbox - it may have been forwarded or re-sent to you unchanged, or you were Bcc\u2019d." })), _jsxs("p", { className: "text-sm text-text-muted mt-1 break-words", children: ["From ", _jsx("span", { className: "font-medium text-text", children: senderLabel }), " \u00B7", " ", new Date(message.receivedDate).toLocaleString()] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsx(RecipientLine, { label: "To", recipients: message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc") }), _jsx(RecipientLine, { label: "Cc", recipients: message.recipients.filter((r) => r.type === "cc") }), _jsx(RecipientLine, { label: "Bcc", recipients: message.recipients.filter((r) => r.type === "bcc") }), _jsxs("div", { className: "flex flex-wrap gap-1 mt-3", children: [_jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true" }), label: "Reply", shortcut: keyboard ? SHORTCUTS.mail.reply : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("reply") }), _jsx(IconAction, { icon: _jsxs("span", { className: "inline-flex items-center", "aria-hidden": "true", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16 }), _jsx(HiOutlineArrowUturnLeft, { size: 16, className: "-ml-2.5" })] }), label: "Reply All", shortcut: keyboard ? SHORTCUTS.mail.replyAll : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", shortcut: keyboard ? SHORTCUTS.mail.forward : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("forward") }), archivable && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", shortcut: keyboard ? SHORTCUTS.mail.archive : undefined, busy: archiving, disabled: archiving, onClick: handleArchive })), movable && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", shortcut: keyboard ? SHORTCUTS.mail.move : undefined, onClick: () => setMovePrompt(true) })), labels && labels.length > 0 && (_jsx(LabelMenuButton, { "aria-label": "Labels", label: "Labels", className: "border border-border py-1.5", labels: labels, mailboxUid: message.mailboxUid, onLabelCreated: onLabelCreated, applied: currentLabelsMessage.labelUids ?? [], onCommit: (labelUids) => void handleApplyLabels(labelUids), busy: savingLabels, note: "Ticked labels are applied to this message and unticked ones removed.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }))] }), archiveError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: archiveError }) })), labelsError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: labelsError }) })), labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", children: currentLabelsMessage
                             .labelUids.map((uid) => labels.find((l) => l.uid === uid))
                             .filter((l) => !!l)
                             .map((l) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt", children: [_jsx("span", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }, l.uid))) })), ["delivery", "read"]

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { NewMailNotice } from "../../mail/newMailNotifications.js";
+export interface NewMailToastsProps {
+    /** The pop-ups to show, oldest first. */
+    toasts: NewMailNotice[];
+    onDismiss: (uid: string) => void;
+    /** Show the "Turn on desktop notifications" offer in the first pop-up. */
+    offerDesktop: boolean;
+    onEnableDesktop: () => void;
+    onDeclineDesktop: () => void;
+}
+/**
+ * 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 }: NewMailToastsProps): React.JSX.Element;

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))) }));
+}