@rapidmx/web-client 0.16.0 → 0.17.2

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -3,14 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3, HiOutlinePencilSquare } from "react-icons/hi2";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
 import FloatingActionButton from "../../layout/FloatingActionButton.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
@@ -47,6 +47,8 @@ const MailShellContext = createContext({
     noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
     trackMessageChange: () => NO_TRACKER,
+    refreshFolderCounts: () => undefined,
+    folderCountOf: (folder) => ({ unread: folder.unreadCount, total: folder.totalCount }),
     mobileSearchSlot: null,
 });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
@@ -111,12 +113,10 @@ function MailShortcuts({ mailboxUid }) {
 /**
  * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
  * aggregate section) + content area, rendered inside the shared `AppShell` chrome (icon rail, header,
- * impersonation banner — see that component). There is no client-side router in this framework (see
- * `ReactRoute`'s file-convention resolver) — the selected mailbox/folder (or aggregate pseudo-folder) live
- * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read once on mount (never during
- * the initial render itself, matching every other query-param reader in this codebase — e.g.
- * `apps/admin/quarantine`'s `readMailboxUid()` — so the server-rendered and just-hydrated client markup
- * match).
+ * impersonation banner — see that component). The selected mailbox/folder (or aggregate pseudo-folder) live
+ * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read from the router's location
+ * (`@rapidrest/react`), which is the request's on the server and while hydrating and follows a shallow
+ * navigation (a folder link) without remounting the page.
  *
  * Every accessible mailbox's folder tree renders at once - there is no "switch mailbox" affordance
  * anymore (the mailbox `<select>` this shell used to have is gone) - so a single-mailbox user sees zero
@@ -125,8 +125,7 @@ function MailShortcuts({ mailboxUid }) {
  * of folders" requirement.
  *
  * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
- * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. Nothing is selected until the address
- * has been read. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
  * primary mailbox.
  */
 export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
@@ -139,40 +138,32 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     const { status, error, mailboxes, mailboxFolders, foldersLoading, onFolderCreated, noteFolderUids, live, folderCounts, outbox: outboxStatuses } = hosted ?? own;
     // The messages this tab is still handing to the server: the Outbox pill counts them at once.
     const pendingSends = usePendingSends();
-    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
-    const [requestedFolderUid, setRequestedFolderUid] = useState(null);
-    const [requestedAggregateType, setRequestedAggregateType] = useState(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    // Whether the URL has been read yet (see below): until then the selection is not known, and the sidebar sections have nothing to open for.
-    const [selectionRead, setSelectionRead] = useState(false);
-    // The selection lives in the URL, and the router (`AppRouter`) changes the URL without a page load when a folder link is
-    // clicked - so it is read from the router's location, which updates, rather than once from `window.location`. Still read
-    // in an effect, never during the first render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
-    useEffect(() => {
+    // The selection lives in the URL, and the router (`@rapidrest/react`) changes the URL without a page load when a folder link is
+    // clicked - a shallow navigation, which keeps this page and its state - so it is read from the router's location, which updates,
+    // rather than once from `window.location`. The location is the request's on the server and while hydrating (its `#fragment` is not
+    // sent, and no one here reads it), so the server render and the hydrating render agree and the selection is known from the first render.
+    const { search } = useLocation();
+    const { requestedMailboxUid, requestedFolderUid, requestedAggregateType } = useMemo(() => {
         const params = new URLSearchParams(search);
-        setRequestedMailboxUid(params.get("mailboxUid"));
-        setRequestedFolderUid(params.get("folderUid"));
-        setRequestedAggregateType(params.get("aggregate"));
-        setSelectionRead(true);
+        return { requestedMailboxUid: params.get("mailboxUid"), requestedFolderUid: params.get("folderUid"), requestedAggregateType: params.get("aggregate") };
     }, [search]);
     // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
     // with the page - is closed here.
     useEffect(() => {
         setDrawerOpen(false);
     }, [search]);
-    // What the address asks for. Nothing is selected until it has been read (the first render, before the effect above): choosing a
-    // default then would list a folder - the most expensive being every mailbox's - only to throw it away for the one the address names.
-    const requestedAggregate = selectionRead && isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
-    const requestedMailbox = selectionRead && requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
+    // What the address asks for.
+    const requestedAggregate = isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
+    const requestedMailbox = requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
     // The mailbox the caller has not chosen: their own, never a shared one that merely sorts first. It is what compose, the new-message
     // shortcut and everything else that needs a single mailbox use while an all-mailboxes view (which has none) is open.
     const defaultMailboxUid = primaryMailboxUid(mailboxes, userUid);
     // With several mailboxes the address that names nothing opens "All Mailboxes > Inbox", the merged Inbox; with one there is no such
     // section, so it opens that mailbox's own Inbox. A mailbox, a folder or an all-mailboxes view in the address wins over either.
-    const aggregateByDefault = selectionRead && !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
+    const aggregateByDefault = !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
     const aggregateFolderType = requestedAggregate ?? (aggregateByDefault ? "inbox" : undefined);
-    const mailboxUid = aggregateFolderType || !selectionRead ? undefined : (requestedMailbox ?? defaultMailboxUid);
+    const mailboxUid = aggregateFolderType ? undefined : (requestedMailbox ?? defaultMailboxUid);
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid = aggregateFolderType
         ? undefined
@@ -194,11 +185,13 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     const collapsible = mailboxes.length > 1;
     const counts = folderCounts.counts;
     const trackMessageChange = folderCounts.track;
+    const refreshFolderCounts = folderCounts.refresh;
+    const folderCountOf = useCallback((folder) => countOfFolder(folder, counts), [counts]);
     // `(3) Acme: Mail` in the tab strip while there is unread mail in an Inbox - kept by the frame when there is one.
     useUnreadTitle(inboxUnreadTotal(mailboxFolders, counts), { enabled: !hosted });
     // A state rather than a ref: the page reads it during its render, so it has to re-render once the row it names is in the document.
     const [mobileSearchSlot, setMobileSearchSlot] = useState(null);
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot]);
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
     // mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all. Checks
     // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
@@ -222,7 +215,7 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         // `idPrefix` keeps each section's folder list's id (which its heading's `aria-controls` names) unique between the two.
         const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: defaultMailboxUid }) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${ALL_MAILBOXES_SECTION}`, label: "All Mailboxes", collapsible: collapsible, expanded: sections.isExpanded(ALL_MAILBOXES_SECTION), onToggle: () => sections.toggle(ALL_MAILBOXES_SECTION), unread: unreadBadgeTotal(mailboxFolders.flatMap((mf) => mf.folders), counts), children: AGGREGATE_FOLDER_TYPES.map((type) => {
                                 const badge = aggregateBadge(mailboxFolders, type, counts);
-                                return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
+                                return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: [
                                         "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                         aggregateFolderType === type
                                             ? "bg-primary/10 text-primary-dark font-semibold"
@@ -237,7 +230,7 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
                                 }
                                 const folder = row.folder;
                                 const badge = badgeFor(folder.type, countOfFolder(folder, counts));
-                                return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
+                                return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: [
                                         "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                         folder.uid === folderUid
                                             ? "bg-primary/10 text-primary-dark font-semibold"

package/dist/apps/shared/components/mail/reading/MessageMoreMenu.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { MenuSectionSpec } from "../MenuButton.js";
+/** What each row of the menu does - the reading pane's own handlers. */
+export interface MessageMenuActions {
+    replyAll: () => void;
+    forward: () => void;
+    deleteMessage: () => void;
+    toggleRead: () => void;
+    toggleFlag: () => void;
+    reportJunk: () => void;
+    reportPhishing: () => void;
+    notJunk: () => void;
+    notJunkAndTrust: () => void;
+    blockSender: () => void;
+    neverBlockSender: () => void;
+    print: () => void;
+    viewSource: () => void;
+    viewDetails: () => void;
+    saveAsEml: () => void;
+    createRule: () => void;
+}
+export interface MessageMoreMenuProps {
+    actions: MessageMenuActions;
+    /** The sender's address the Block rows name. */
+    senderAddress: string;
+    read: boolean;
+    flagged: boolean;
+    /** The reader may change this mailbox's messages and filters (it is not a view-only share). */
+    writable: boolean;
+    /** Something is already being done to the message: its rows wait. */
+    busy: boolean;
+    inJunk: boolean;
+    /** The message is in Deleted Items: the Delete row reads "Delete permanently". */
+    inDeletedItems: boolean;
+    /** Mail the reader sent: it is not junk, and its sender is the reader. */
+    sent: boolean;
+    /** The sender is one of the reader's own addresses, which is not blocked. */
+    ownSender: boolean;
+    /** The reader may add a sender to this mailbox's Safe Senders: they have full access, or the server has not said which access they have (it then refuses, with its reason). */
+    canTrustSender: boolean;
+    /** Why the message cannot be printed right now (an encrypted one that is locked or still opening), or `undefined`. */
+    printReason: string | undefined;
+    /** The compose window is opening for a reply or forward: Reply all and Forward wait for it. */
+    composing: boolean;
+    /** The classes of the round "..." button - the reading pane's own icon-button look. */
+    triggerClassName: string;
+}
+/** The sections of the menu - Outlook's "More actions", cut to what this product really does. */
+export declare function buildMessageMenu(props: MessageMoreMenuProps): MenuSectionSpec[];
+/**
+ * The "..." at the end of a message card's icon row: Outlook's More actions menu, holding the actions there is no room for beside the
+ * message and the ones that are less often wanted. An ARIA menu (`MenuButton`): arrows, Home and End move, Right or Enter opens a submenu, Left or
+ * Escape leaves it (Escape at the top closes the menu and the focus goes back to this button), and a click outside closes it. A row that cannot be used right now
+ * is disabled and says why under its label.
+ */
+export default function MessageMoreMenu(props: MessageMoreMenuProps): React.JSX.Element;

package/dist/apps/shared/components/mail/reading/MessageMoreMenu.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HiOutlineArrowDownTray, HiOutlineArrowUturnLeft, HiOutlineArrowUturnRight, HiOutlineCodeBracket, HiOutlineCog6Tooth, HiOutlineDocumentText, HiOutlineEllipsisHorizontal, HiOutlineEnvelope, HiOutlineEnvelopeOpen, HiOutlineEye, HiOutlineFlag, HiOutlineFunnel, HiOutlineHandRaised, HiOutlineInboxArrowDown, HiOutlineInformationCircle, HiOutlineNoSymbol, HiOutlinePrinter, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineTrash, } from "react-icons/hi2";
+import MenuButton from "../MenuButton.js";
+const VIEW_ONLY = "View-only mailbox";
+/** A row, disabled with `reason` (shown under the label, where a keyboard or phone user sees it as well) when there is one. */
+function row(key, label, icon, onSelect, reason, extra = {}) {
+    return { key, label, icon, onSelect, disabled: reason !== undefined, description: reason, ...extra };
+}
+/** The sections of the menu - Outlook's "More actions", cut to what this product really does. */
+export function buildMessageMenu(props) {
+    const { actions, read, flagged, writable, busy, inJunk, inDeletedItems, sent, ownSender, printReason, composing } = props;
+    // The reason a row that changes the message is unavailable, if it is: the first that applies wins.
+    const changeReason = !writable ? VIEW_ONLY : undefined;
+    const junkReason = changeReason ?? (sent ? "Not available for mail you sent" : inJunk ? "Already in Junk Email" : undefined);
+    const blockReason = changeReason ?? (sent ? "Not available for mail you sent" : ownSender ? "This is your own address" : undefined);
+    const waiting = (reason) => reason ?? (busy ? "Working on this message" : undefined);
+    const trustLabel = `Not junk, and always trust ${props.senderAddress}`;
+    const blockLabel = `Block ${props.senderAddress}`;
+    const neverBlockLabel = `Never block ${props.senderAddress}`;
+    return [
+        {
+            key: "message",
+            items: [
+                {
+                    key: "reply-actions",
+                    label: "Other reply actions",
+                    icon: _jsx(HiOutlineArrowUturnLeft, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "reply-actions-items",
+                            items: [
+                                row("reply-all", "Reply all", _jsx(HiOutlineArrowUturnLeft, { size: 16 }), actions.replyAll, composing ? "Opening the compose window" : undefined),
+                                row("forward", "Forward", _jsx(HiOutlineArrowUturnRight, { size: 16 }), actions.forward, composing ? "Opening the compose window" : undefined),
+                            ],
+                        },
+                    ],
+                },
+                row("delete", 
+                // In Deleted Items there is nowhere further to move it to: Delete is the permanent one, and asks first.
+                inDeletedItems ? "Delete permanently" : "Delete", _jsx(HiOutlineTrash, { size: 16 }), actions.deleteMessage, waiting(changeReason)),
+                row("toggle-read", read ? "Mark as unread" : "Mark as read", read ? _jsx(HiOutlineEnvelope, { size: 16 }) : _jsx(HiOutlineEnvelopeOpen, { size: 16 }), actions.toggleRead, waiting(changeReason)),
+                row("toggle-flag", flagged ? "Unflag" : "Flag", _jsx(HiOutlineFlag, { size: 16 }), actions.toggleFlag, waiting(changeReason)),
+            ],
+        },
+        {
+            key: "sender",
+            items: [
+                {
+                    key: "report",
+                    label: "Report",
+                    icon: _jsx(HiOutlineNoSymbol, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "report-items",
+                            items: [
+                                row("report-junk", "Report junk", _jsx(HiOutlineNoSymbol, { size: 16 }), actions.reportJunk, waiting(junkReason)),
+                                row("report-phishing", "Report phishing", _jsx(HiOutlineShieldExclamation, { size: 16 }), actions.reportPhishing, waiting(junkReason)),
+                                // In Junk Email the way back: to the Inbox, telling the spam filter it was wrong - and, when the reader may, trusting the sender.
+                                ...(inJunk
+                                    ? [
+                                        row("not-junk", "Not junk", _jsx(HiOutlineInboxArrowDown, { size: 16 }), actions.notJunk, waiting(changeReason)),
+                                        ...(props.canTrustSender && !ownSender
+                                            ? [
+                                                row("not-junk-trust", trustLabel, _jsx(HiOutlineShieldCheck, { size: 16 }), actions.notJunkAndTrust, waiting(changeReason), {
+                                                    title: trustLabel,
+                                                }),
+                                            ]
+                                            : []),
+                                    ]
+                                    : []),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "block",
+                    label: "Block",
+                    icon: _jsx(HiOutlineHandRaised, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "block-items",
+                            items: [
+                                row("block-sender", blockLabel, _jsx(HiOutlineHandRaised, { size: 16 }), actions.blockSender, waiting(blockReason), { title: blockLabel }),
+                                row("never-block-sender", neverBlockLabel, _jsx(HiOutlineShieldCheck, { size: 16 }), actions.neverBlockSender, waiting(blockReason), { title: neverBlockLabel }),
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: "output",
+            items: [
+                row("print", "Print", _jsx(HiOutlinePrinter, { size: 16 }), actions.print, printReason),
+                {
+                    key: "view",
+                    label: "View",
+                    icon: _jsx(HiOutlineEye, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "view-items",
+                            items: [
+                                row("view-source", "View message source", _jsx(HiOutlineCodeBracket, { size: 16 }), actions.viewSource),
+                                row("view-details", "Message details", _jsx(HiOutlineInformationCircle, { size: 16 }), actions.viewDetails),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "save-as",
+                    label: "Save as",
+                    icon: _jsx(HiOutlineArrowDownTray, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "save-as-items",
+                            items: [
+                                row("save-eml", "Save as .eml", _jsx(HiOutlineEnvelope, { size: 16 }), actions.saveAsEml),
+                                row("save-pdf", "Save as PDF", _jsx(HiOutlineDocumentText, { size: 16 }), actions.print, printReason, {
+                                    description: printReason ?? "Opens the print dialog: choose Save as PDF",
+                                }),
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: "advanced",
+            items: [
+                {
+                    key: "advanced-actions",
+                    label: "Advanced actions",
+                    icon: _jsx(HiOutlineCog6Tooth, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "advanced-items",
+                            items: [row("create-rule", "Create rule", _jsx(HiOutlineFunnel, { size: 16 }), actions.createRule, changeReason)],
+                        },
+                    ],
+                },
+            ],
+        },
+    ];
+}
+/**
+ * The "..." at the end of a message card's icon row: Outlook's More actions menu, holding the actions there is no room for beside the
+ * message and the ones that are less often wanted. An ARIA menu (`MenuButton`): arrows, Home and End move, Right or Enter opens a submenu, Left or
+ * Escape leaves it (Escape at the top closes the menu and the focus goes back to this button), and a click outside closes it. A row that cannot be used right now
+ * is disabled and says why under its label.
+ */
+export default function MessageMoreMenu(props) {
+    return (_jsx(MenuButton, { iconOnly: true, label: "More actions", "aria-label": "More actions", title: "More actions", icon: _jsx(HiOutlineEllipsisHorizontal, { size: 16, "aria-hidden": "true" }), className: props.triggerClassName, sections: buildMessageMenu(props), width: 288 }));
+}

package/dist/apps/shared/components/mail/reading/MessageSourceDialog.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+/** What the dialog is showing a message's source for: the whole of it, or only its header lines ("Message details"). */
+export type SourceMode = "source" | "headers";
+/** What has been fetched of the raw message: on its way, here, or refused. */
+export type SourceState = {
+    status: "loading";
+} | {
+    status: "ready";
+    raw: string;
+} | {
+    status: "error";
+    message: string;
+};
+export interface MessageSourceDialogProps {
+    open: boolean;
+    onClose: () => void;
+    mode: SourceMode;
+    source: SourceState;
+    /** The message is end-to-end encrypted: what is shown is the ciphertext the server holds, and the dialog says so. */
+    encrypted: boolean;
+}
+/**
+ * A message's raw source (or just its headers) in a full-window dialog, in a monospace block that can be scrolled and selected, with a Copy
+ * button. It is the RFC 5322 text exactly as the server stores it - for an encrypted message that is the encrypted message, never a
+ * decrypted one, and the dialog says so. A very long source is cut for display (`MAX_SOURCE_DISPLAY_CHARS`); Copy has all of it.
+ */
+export default function MessageSourceDialog({ open, onClose, mode, source, encrypted }: MessageSourceDialogProps): React.JSX.Element;

package/dist/apps/shared/components/mail/reading/MessageSourceDialog.js

@@ -0,0 +1,27 @@
+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 { useMemo } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { MAX_SOURCE_DISPLAY_CHARS, headerText, sourceText } from "./messageExport.js";
+const TITLES = { source: "Message source", headers: "Message details" };
+/**
+ * A message's raw source (or just its headers) in a full-window dialog, in a monospace block that can be scrolled and selected, with a Copy
+ * button. It is the RFC 5322 text exactly as the server stores it - for an encrypted message that is the encrypted message, never a
+ * decrypted one, and the dialog says so. A very long source is cut for display (`MAX_SOURCE_DISPLAY_CHARS`); Copy has all of it.
+ */
+export default function MessageSourceDialog({ open, onClose, mode, source, encrypted }) {
+    const text = useMemo(() => {
+        if (source.status !== "ready") {
+            return "";
+        }
+        return mode === "headers" ? headerText(source.raw) : sourceText(source.raw);
+    }, [source, mode]);
+    const cut = text.length > MAX_SOURCE_DISPLAY_CHARS;
+    const title = TITLES[mode];
+    return (_jsx(Drawer, { open: open, onClose: onClose, title: title, fullScreen: true, children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [encrypted && (_jsx("p", { role: "note", className: "py-2 px-3 rounded-sm bg-surface-alt text-text", children: "This message is encrypted. This is the encrypted message exactly as the server stores it; it is not decrypted here." })), source.status === "loading" && (_jsx("p", { role: "status", className: "text-text-muted", children: "Loading the message\u2026" })), source.status === "error" && _jsx(Alert, { children: source.message }), source.status === "ready" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(CopyButton, { value: text, label: `Copy the ${mode === "headers" ? "message headers" : "message source"}` }), cut && (_jsxs("span", { className: "text-xs text-text-muted", children: ["Showing the first ", MAX_SOURCE_DISPLAY_CHARS.toLocaleString(), " of ", text.length.toLocaleString(), " characters. Copy and Save as .eml keep all of it."] }))] }), _jsx("pre", { tabIndex: 0, "aria-label": title, className: "m-0 max-h-[70vh] overflow-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs whitespace-pre-wrap break-all", children: cut ? text.slice(0, MAX_SOURCE_DISPLAY_CHARS) : text })] }))] }) }));
+}

package/dist/apps/shared/components/mail/reading/messageExport.d.ts

@@ -0,0 +1,19 @@
+/**
+ * What the reading pane does with a message's raw RFC 5322 source (`getMessageRawContent()`, a binary string): show it, save it as a
+ * file, and read the From header out of it. Nothing here interprets the message's content beyond its header block.
+ */
+/** How much of a message's source the "View message source" dialog draws: a message with attachments is mostly base64, and a
+ * megabyte of it in a `<pre>` helps nobody. Saving as .eml and Copy always have all of it. */
+export declare const MAX_SOURCE_DISPLAY_CHARS = 200000;
+/** The file name "Save as .eml" gives a message: its subject without what a file system refuses, or `message`. */
+export declare function emlFileName(subject: string | undefined): string;
+/** Hands `bytes` to the browser as a download called `fileName`. */
+export declare function downloadBytes(bytes: Uint8Array, fileName: string, type: string): void;
+/** Saves a raw message (a binary string, exactly as the server has it) as a `.eml` file, byte for byte. */
+export declare function saveAsEml(raw: string, subject: string | undefined): void;
+/** A raw message as text to read: its bytes decoded as UTF-8, an invalid byte shown as U+FFFD. */
+export declare function sourceText(raw: string): string;
+/** The header block of a raw message, as text to read. */
+export declare function headerText(raw: string): string;
+/** The address in a raw message's own From header (which is not always the envelope sender the server files the message under), lowercased. */
+export declare function headerFromAddress(raw: string): string | undefined;

package/dist/apps/shared/components/mail/reading/messageExport.js

@@ -0,0 +1,51 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { binaryStringToBytes, extractAddresses, parseMimeEntity } from "@rapidmx/react-shared/crypto/mime.js";
+/**
+ * What the reading pane does with a message's raw RFC 5322 source (`getMessageRawContent()`, a binary string): show it, save it as a
+ * file, and read the From header out of it. Nothing here interprets the message's content beyond its header block.
+ */
+/** How much of a message's source the "View message source" dialog draws: a message with attachments is mostly base64, and a
+ * megabyte of it in a `<pre>` helps nobody. Saving as .eml and Copy always have all of it. */
+export const MAX_SOURCE_DISPLAY_CHARS = 200000;
+/** The file name "Save as .eml" gives a message: its subject without what a file system refuses, or `message`. */
+export function emlFileName(subject) {
+    const cleaned = (subject ?? "")
+        .replace(/[\p{Cc}\\/:*?"<>|]+/gu, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 100)
+        .replace(/^\.+/, "")
+        .replace(/[. ]+$/, "");
+    return `${cleaned || "message"}.eml`;
+}
+/** Hands `bytes` to the browser as a download called `fileName`. */
+export function downloadBytes(bytes, fileName, type) {
+    const url = URL.createObjectURL(new Blob([bytes], { type }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Some browsers are still reading the blob after `click()` returns.
+    setTimeout(() => URL.revokeObjectURL(url), 60000);
+}
+/** Saves a raw message (a binary string, exactly as the server has it) as a `.eml` file, byte for byte. */
+export function saveAsEml(raw, subject) {
+    downloadBytes(binaryStringToBytes(raw), emlFileName(subject), "message/rfc822");
+}
+/** A raw message as text to read: its bytes decoded as UTF-8, an invalid byte shown as U+FFFD. */
+export function sourceText(raw) {
+    return new TextDecoder("utf-8").decode(binaryStringToBytes(raw));
+}
+/** The header block of a raw message, as text to read. */
+export function headerText(raw) {
+    return sourceText(parseMimeEntity(raw).rawHeaderBlock);
+}
+/** The address in a raw message's own From header (which is not always the envelope sender the server files the message under), lowercased. */
+export function headerFromAddress(raw) {
+    return extractAddresses(parseMimeEntity(raw).headers.from)[0];
+}

package/dist/apps/shared/components/mail/reading/printMessage.d.ts

@@ -0,0 +1,30 @@
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MimeAttachment } from "@rapidmx/react-shared/crypto/mime.js";
+import { BodyContent } from "./bodyContent.js";
+/**
+ * Printing one message: a document of its own - the message's header lines, and under them the same sanitized body the reading pane draws -
+ * shown in a frame that nobody sees and printed from there, so the print is the message and not the app around it.
+ *
+ * The frame is as isolated as the reading pane's own (`frameDocument.ts`): the body has been through `prepareBodyHtml()`, the document
+ * carries the same Content-Security-Policy (no script, nothing fetched from anywhere but this server's own attachment URLs), and the
+ * sandbox runs no code. `allow-same-origin` only lets the app call `print()` on it, and `allow-modals` is what a browser asks of a
+ * sandboxed document for the print dialog to open at all. Paper is white, so the message is drawn as its author wrote it.
+ */
+export interface PrintableMessage {
+    subject: string;
+    /** The header lines above the body - `From`, `To`, `Cc`, `Date` - in the order shown; a line with no value is left out. */
+    headers: {
+        name: string;
+        value: string;
+    }[];
+    content: BodyContent;
+    attachments?: Attachment[];
+    inlineParts?: MimeAttachment[];
+}
+export declare function escapeHtml(text: string): string;
+/**
+ * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
+ */
+export declare function buildPrintDocument(message: PrintableMessage): string | undefined;
+/** Prints `html` (from `buildPrintDocument()`) from a frame nobody sees, and removes the frame when the print is over. */
+export declare function printDocument(html: string): void;

package/dist/apps/shared/components/mail/reading/printMessage.js

@@ -0,0 +1,70 @@
+import { attachmentSource, makeCidResolver } from "./bodyContent.js";
+import { prepareBodyHtml } from "./bodyHtml.js";
+import { frameCsp } from "./frameDocument.js";
+const PRINT_CSS = `
+html{font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;background:#fff}
+body{margin:0;padding:24px}
+h1{font-size:20px;margin:0 0 12px}
+dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px}
+dt{font-weight:600;color:#444}
+dd{margin:0;overflow-wrap:anywhere}
+hr{border:0;border-top:1px solid #999;margin:0 0 16px}
+#rr-body{overflow-wrap:break-word}
+#rr-body img{max-width:100%;height:auto}
+#rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
+`;
+export function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/**
+ * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
+ */
+export function buildPrintDocument(message) {
+    let body;
+    let imageSource;
+    if (message.content.kind === "html") {
+        const prepared = prepareBodyHtml(message.content.html, { resolveCid: makeCidResolver(message.attachments, message.inlineParts) });
+        if (prepared.status === "too_large") {
+            return undefined;
+        }
+        const source = prepared.inlineImages > 0 ? attachmentSource() : undefined;
+        imageSource = source && prepared.html.includes(source) ? source : undefined;
+        body = `<div id="rr-body">${prepared.html}</div>`;
+    }
+    else {
+        body = `<pre class="rr-text">${escapeHtml(message.content.text)}</pre>`;
+    }
+    const lines = message.headers
+        .filter((header) => header.value !== "")
+        .map((header) => `<dt>${escapeHtml(header.name)}</dt><dd>${escapeHtml(header.value)}</dd>`)
+        .join("");
+    return [
+        "<!doctype html>",
+        '<html lang="en"><head><meta charset="utf-8">',
+        `<meta http-equiv="Content-Security-Policy" content="${frameCsp(imageSource)}">`,
+        `<title>${escapeHtml(message.subject)}</title>`,
+        `<style>${PRINT_CSS}</style></head>`,
+        `<body><h1>${escapeHtml(message.subject)}</h1><dl>${lines}</dl><hr>${body}</body></html>`,
+    ].join("");
+}
+/** How long a print frame is kept when the browser never says it has finished with it (`afterprint`). */
+const FRAME_LIFETIME_MS = 60000;
+/** Prints `html` (from `buildPrintDocument()`) from a frame nobody sees, and removes the frame when the print is over. */
+export function printDocument(html) {
+    const frame = document.createElement("iframe");
+    frame.setAttribute("sandbox", "allow-same-origin allow-modals");
+    frame.setAttribute("aria-hidden", "true");
+    frame.tabIndex = -1;
+    frame.title = "Message to print";
+    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden";
+    const cleanup = () => frame.remove();
+    frame.addEventListener("load", () => {
+        const view = frame.contentWindow;
+        view.addEventListener("afterprint", cleanup);
+        view.focus();
+        view.print();
+        setTimeout(cleanup, FRAME_LIFETIME_MS);
+    });
+    frame.srcdoc = html;
+    document.body.appendChild(frame);
+}