@rapidmx/web-client 0.5.0 → 0.7.0

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import LabelMenuButton from "./labelMenu.js";
+import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
+function actionClassName() {
+    return "px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
+}
+/**
+ * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
+ * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
+ * archive, move, report junk and delete.
+ *
+ * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
+ * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
+ * 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, }) {
+    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
+    // messages are still being fetched has nothing for an action to act on yet.
+    const none = selectedCount === 0 || selected.length === 0;
+    const allSelected = listedCount > 0 && selectedCount === listedCount;
+    const currentType = folders.find((folder) => folder.uid === currentFolderUid)?.type;
+    const moveTargets = folders.filter((folder) => MOVE_TARGET_TYPES.has(folder.type) && folder.uid !== currentFolderUid);
+    // The same prompt the reading pane's own Move to opens, so one list of destinations and one way to
+    // create a folder serve both.
+    const [movePrompt, setMovePrompt] = useState(false);
+    // None of the three needs its folder to exist first - the caller creates or lazily provisions it (see
+    // `resolveFolderOfType()` and `bulkArchive()` in `apps/www/index.tsx`) - so the only thing that disables
+    // them is already being in the folder they would move to.
+    const archiveReason = currentType === "archive" ? "These messages are already in Archive" : undefined;
+    const junkReason = currentType === "junk" ? "These messages are already in Junk" : undefined;
+    const deleteReason = currentType === "deleted_items" ? "These messages are already in Deleted Items" : undefined;
+    // A label every selected message already carries starts ticked; one only some of them carry starts
+    // 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
+                            ? "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 }) }))] }));
+}

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

@@ -0,0 +1,71 @@
+import React, { ReactNode } from "react";
+/** What every row has. `checked` turns it into a radio/checkbox item (the caller says which via `role`) and
+ * draws the checkmark column; without it the row is a plain command. */
+interface MenuItemBase {
+    key: string;
+    label: string;
+    /** A one-line explanation under the label, for an item whose effect isn't obvious from its name. */
+    description?: string;
+    role?: "menuitem" | "menuitemradio" | "menuitemcheckbox";
+    /** `"mixed"` is ARIA's third checkbox state - some of the things this row acts on have it and some
+     * don't, which is what a label applied to only part of a multi-message selection looks like. */
+    checked?: boolean | "mixed";
+    /** A colour swatch before the label - a label's own colour. */
+    swatchColor?: string;
+    disabled?: boolean;
+    /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
+     * before one command commits them all. */
+    keepOpen?: boolean;
+}
+/** A row that does something when chosen. */
+export interface MenuCommandSpec extends MenuItemBase {
+    onSelect: () => void;
+    submenu?: never;
+}
+/** A row that opens a submenu instead: choosing it replaces the menu's contents with these sections, under
+ * a Back row. One level deep, which is all any menu here needs - so it has nothing of its own to do. */
+export interface MenuSubmenuSpec extends MenuItemBase {
+    submenu: MenuSectionSpec[];
+    onSelect?: never;
+}
+export type MenuItemSpec = MenuCommandSpec | MenuSubmenuSpec;
+/** A labelled group of items. Groups after the first are drawn with a separator above them. */
+export interface MenuSectionSpec {
+    key: string;
+    label?: string;
+    /** A short note under the group's items - e.g. why some of them are unavailable right now. */
+    note?: string;
+    items: MenuItemSpec[];
+}
+/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
+export declare function menuHeight(sections: MenuSectionSpec[], width?: number): number;
+export interface MenuButtonProps {
+    /** The trigger's visible label. */
+    label: ReactNode;
+    /** The trigger's accessible name, which also names the menu itself - includes the current selection
+     * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
+    "aria-label": string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    title?: string;
+    sections: MenuSectionSpec[];
+    width?: number;
+    /** Extra classes for the trigger, on top of the shared toolbar-button styling. */
+    className?: string;
+    /** Told whenever the menu opens or closes - how a caller resets a draft it keeps for the menu's own
+     * multi-select rows (see `useLabelDraft()`). */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
+ * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
+ * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
+ *
+ * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
+ * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
+ * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
+ * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
+ * semantics, roving focus and keyboard handling are this component's own.
+ */
+export default function MenuButton({ label, icon, disabled, title, sections, width, className, "aria-label": ariaLabel, onOpenChange, }: MenuButtonProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { HiCheck, HiChevronDown, HiChevronLeft, HiChevronRight, HiMinus } from "react-icons/hi2";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+// `PopoverPortal` positions a fixed-size box (it has no auto-height mode), so the menu's height is
+// computed from its own contents rather than measured - from whichever level is *shown*, so a submenu
+// isn't left standing in the parent menu's taller box. These are the exact heights the classes below
+// render at, so the box is never short enough to clip its last row: an item is `h-9`, a group label
+// `h-6`, a note as many `leading-4` lines as it wraps to, a separator a 1px rule inside `my-1`, and the
+// list itself `py-1`.
+const ITEM_HEIGHT = 36;
+const ITEM_DESCRIPTION_HEIGHT = 16;
+const GROUP_LABEL_HEIGHT = 24;
+const NOTE_LINE_HEIGHT = 16;
+const NOTE_PADDING = 4;
+/** A note wraps, so its height depends on how much of it fits a line: `text-xs` averages a little over 6px
+ * a character, and the note sits inside the list's `px-3`. Rounded so the estimate is never *under* the
+ * lines the browser actually draws - a box a few pixels too tall shows blank space, one too short clips. */
+const NOTE_CHAR_WIDTH = 6.4;
+const NOTE_PADDING_X = 24;
+const SEPARATOR_HEIGHT = 9;
+const LIST_PADDING = 8;
+const MENU_MAX_HEIGHT = 460;
+const DEFAULT_MENU_WIDTH = 248;
+/** How tall `note` renders at `width`, wrapped. */
+function noteHeight(note, width) {
+    const charsPerLine = Math.max(1, Math.floor((width - NOTE_PADDING_X) / NOTE_CHAR_WIDTH));
+    return Math.ceil(note.length / charsPerLine) * NOTE_LINE_HEIGHT + NOTE_PADDING;
+}
+/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
+export function menuHeight(sections, width = DEFAULT_MENU_WIDTH) {
+    let height = LIST_PADDING;
+    sections.forEach((section, index) => {
+        if (index > 0) {
+            height += SEPARATOR_HEIGHT;
+        }
+        if (section.label) {
+            height += GROUP_LABEL_HEIGHT;
+        }
+        for (const item of section.items) {
+            height += ITEM_HEIGHT + (item.description ? ITEM_DESCRIPTION_HEIGHT : 0);
+        }
+        if (section.note) {
+            height += noteHeight(section.note, width);
+        }
+    });
+    return Math.min(height, MENU_MAX_HEIGHT);
+}
+/**
+ * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
+ * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
+ * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
+ *
+ * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
+ * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
+ * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
+ * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
+ * semantics, roving focus and keyboard handling are this component's own.
+ */
+export default function MenuButton({ label, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    // The key of the item whose submenu is showing, or `null` at the top level. Held as a key, not as the
+    // item itself, because `sections` is rebuilt on every render.
+    const [submenuKey, setSubmenuKey] = useState(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    // State, not a ref: `PopoverPortal` renders nothing at all until its own positioning effect has run, so
+    // the rows don't exist yet when this component's effects first fire. Keying the focus effect on the
+    // menu node itself makes it run again once they do.
+    const [menuNode, setMenuNode] = useState(null);
+    const openSubmenu = sections
+        .flatMap((section) => section.items)
+        .find((item) => item.key === submenuKey && !!item.submenu);
+    /** The row that leaves a submenu again - synthesized rather than asked of the caller, so every submenu
+     * has the same way back however it was built. */
+    const backItem = {
+        key: "__back",
+        label: `Back to ${ariaLabel}`,
+        keepOpen: true,
+        onSelect: () => leaveSubmenu(),
+    };
+    const shownSections = openSubmenu
+        ? [{ key: "__back", items: [backItem] }, ...openSubmenu.submenu]
+        : sections;
+    const items = shownSections.flatMap((section) => section.items);
+    const enabledIndexes = items.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
+    /** The row focus starts on: the current choice where there is one, else the first row that can take focus. */
+    function initialActiveIndex(within) {
+        const checked = within.findIndex((item) => item.checked === true && !item.disabled);
+        const enabled = within.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
+        return checked === -1 ? (enabled[0] ?? 0) : checked;
+    }
+    function openMenu() {
+        setSubmenuKey(null);
+        setActiveIndex(initialActiveIndex(sections.flatMap((section) => section.items)));
+        setOpen(true);
+        onOpenChange?.(true);
+    }
+    function closeMenu(returnFocus) {
+        setOpen(false);
+        setSubmenuKey(null);
+        onOpenChange?.(false);
+        if (returnFocus) {
+            triggerRef.current?.focus();
+        }
+    }
+    function enterSubmenu(item) {
+        setSubmenuKey(item.key);
+        // Past the Back row, onto the first row of the submenu itself.
+        setActiveIndex(1 + initialActiveIndex(item.submenu.flatMap((section) => section.items)));
+    }
+    function leaveSubmenu() {
+        // Back on the row the submenu was opened from.
+        const parentIndex = sections.flatMap((section) => section.items).findIndex((item) => item.key === submenuKey);
+        setSubmenuKey(null);
+        setActiveIndex(parentIndex);
+    }
+    /** What a row does when it is chosen: open its submenu, or run it and close unless it asked to stay. */
+    function selectItem(item) {
+        if (item.submenu) {
+            enterSubmenu(item);
+            return;
+        }
+        item.onSelect();
+        if (!item.keepOpen) {
+            closeMenu(true);
+        }
+    }
+    // Roving focus: only the active row is tabbable, and it takes DOM focus whenever it changes, so the
+    // arrow keys move the screen reader's cursor too rather than only a visual highlight.
+    useEffect(() => {
+        if (open && menuNode) {
+            // A disabled row can't take focus, so a menu with nothing enabled focuses its own container -
+            // otherwise the keys it handles would go to whatever had focus before it opened.
+            if (enabledIndexes.length === 0) {
+                menuNode.focus();
+            }
+            else {
+                itemRefs.current[activeIndex]?.focus();
+            }
+        }
+        // `submenuKey` too: drilling in or out can land on the same index in the other level's list, and
+        // the row that index *means* is a different button, which the effect must move focus to.
+    }, [open, activeIndex, submenuKey, menuNode]);
+    function moveActive(delta) {
+        if (enabledIndexes.length === 0) {
+            return;
+        }
+        const position = enabledIndexes.indexOf(activeIndex);
+        setActiveIndex(enabledIndexes[(position + delta + enabledIndexes.length) % enabledIndexes.length]);
+    }
+    function handleMenuKeyDown(e) {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            moveActive(1);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            moveActive(-1);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            setActiveIndex(enabledIndexes[0] ?? 0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? 0);
+        }
+        else if (e.key === "ArrowRight" && items[activeIndex]?.submenu) {
+            e.preventDefault();
+            enterSubmenu(items[activeIndex]);
+        }
+        else if ((e.key === "ArrowLeft" || e.key === "Escape") && openSubmenu) {
+            // ARIA's own submenu behaviour: Escape leaves the submenu for its parent menu rather than
+            // dismissing the whole thing.
+            e.preventDefault();
+            leaveSubmenu();
+        }
+        else if (e.key === "Escape" || e.key === "Tab") {
+            e.preventDefault();
+            closeMenu(true);
+        }
+    }
+    function handleTriggerKeyDown(e) {
+        if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault();
+            openMenu();
+        }
+    }
+    let itemIndex = -1;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, className: [
+                    // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
+                    // whatever sits beside it in the toolbar off the edge of a 384px list column.
+                    "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
+                    className,
+                ].join(" "), children: [icon, _jsx("span", { className: "truncate", children: label }), _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
+                                itemIndex += 1;
+                                const index = itemIndex;
+                                const role = item.role ?? "menuitem";
+                                return (_jsxs("button", { ref: (node) => {
+                                        itemRefs.current[index] = node;
+                                    }, type: "button", role: role, disabled: item.disabled, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
+                                        ? {}
+                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
+                            }), section.note && _jsx("p", { className: "px-3 py-1 text-xs leading-4 text-text-muted", children: section.note })] }, section.key))) }) }))] }));
+}

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

@@ -0,0 +1,101 @@
+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";
+/** The detail line under a `verified_at_first_open` badge. */
+export declare function verifiedAtFirstOpenMessage(result: MessageSecurityResult): string;
+export interface SenderNameCheck {
+    /** The display name contains an `@` or a look-alike - it reads as (part of) an address. */
+    looksLikeAddress: boolean;
+    /** It shows an address-shaped token that isn't `actualAddress` - e.g. `"ceo@corp.com" <x@corp-pay.com>`. */
+    misleading: boolean;
+}
+/** Whether a sender's display name poses as an address, and whether that address differs from the one actually sent
+ * from. Compatibility forms are folded first (NFKC turns the fullwidth and small @ into `@`), so a look-alike can't
+ * hide the token. */
+export declare function checkSenderName(displayName: string | undefined, actualAddress: string): SenderNameCheck;
+export declare const TRUST_SIGNER_CONFLICT_MESSAGE = "A different signing key is already trusted for this sender, so this one wasn't trusted. The sender's key may have changed; confirm with them before doing anything.";
+export declare const TRUST_SIGNER_INVALID_MESSAGE = "This certificate can't be trusted for this sender.";
+export declare const TRUST_SIGNER_FORBIDDEN_MESSAGE = "You don't have permission to trust signers for this mailbox.";
+export declare const TRUST_SIGNER_GENERIC_MESSAGE = "Couldn't trust this signer. Try again.";
+export declare const KEPT_CURRENT_SIGNING_KEY_MESSAGE = "You kept the current signing key for this sender. This message stays unverified.";
+/** The error text for a failed `trustSigner()`. */
+export declare function trustSignerErrorMessage(err: unknown): string;
+/** Groups a fingerprint into 4-character blocks (`AB12 CD34 ...`), ignoring any separators it came with, so it can be
+ * read out and compared with the sender over another channel. */
+export declare function formatFingerprint(fingerprint: string): string;
+/** Sanitizes a client-rendered body for `srcDoc` (DOMPurify plus every remote resource reference stripped - see
+ * react-shared's `messageBodySanitizer.ts`), with the CSP meta as its very first element. */
+export declare function buildSecureSrcDoc(html: string): string;
+export interface MessageDetailPaneProps {
+    message: Message | null;
+    attachments: Attachment[];
+    /** Present only on the mobile detail route — renders a "back to messages" link above the header. Absent
+     * on the desktop reading pane, which never navigates away (selecting a different message just swaps
+     * `message` in place). */
+    backHref?: string;
+    /** Whether `message` currently lives in Sent Items — the only folder recall is offered from, matching
+     * Outlook's own restriction (and `BaseMessageRoute.recall()`'s own server-side check). Each caller
+     * computes this from its own already-loaded folder list rather than this component fetching folders
+     * itself. */
+    isSentItems?: boolean;
+    /** Called with the server's updated copy (carrying `recallRequestedAt`) after a successful recall, so
+     * the caller can patch its own in-memory message/list state — mirrors `mailDetailHooks.ts`'s
+     * `useMarkMessageRead`'s identical `onUpdated` callback. */
+    onRecalled?: (updated: Message) => void;
+    /** Whether `message` currently lives in Outbox — the only folder a scheduled send can be canceled
+     * from. Each caller computes this the same way it computes `isSentItems`. */
+    isOutbox?: boolean;
+    /** The mailbox's Drafts folder uid — required when `isOutbox` is `true`, since canceling a
+     * scheduled send moves the message back into Drafts (see `cancelScheduledSend()`'s own doc comment
+     * on why clearing `scheduledSendTime` alone doesn't do that). */
+    draftsFolderUid?: string;
+    /** Called with the server's updated copy (now back in Drafts, `scheduledSendTime` cleared) after
+     * successfully canceling a scheduled send. */
+    onScheduledSendCanceled?: (updated: Message) => void;
+    /** Every folder of this message's own mailbox, for the Move to prompt's destination list. Absent or
+     * empty simply hides the control — there is nowhere to move to. Each caller already resolves this to
+     * work out `isSentItems`/`isOutbox`/`draftsFolderUid`, so nothing new is fetched for it. */
+    folders?: Folder[];
+    /** Called with the server's updated copy (now in the chosen folder) after a successful Move to. A move
+     * takes the message out of whichever folder is being listed, so callers remove it from their list
+     * rather than patching it — unlike `onClassified`, which this replaces. */
+    onMoved?: (updated: Message) => void;
+    /** A folder created from the Move to prompt, so the caller's own list and the folder sidebar pick it up
+     * without a page load. */
+    onFolderCreated?: (folder: Folder) => void;
+    /** Called with the server's updated copy after approving/declining a pending delivery/read receipt —
+     * mirrors `onRecalled`'s identical shape. No gating prop needed (unlike `isSentItems`/`isOutbox`):
+     * `deliveryReceiptPending`/`readReceiptPending` already live directly on `message` and are only ever
+     * `true` on a real delivered copy, so the banner below is self-gating. */
+    onReceiptHandled?: (updated: Message) => void;
+    /** Called with the server's updated copy (now filed under the mailbox's Archive folder) after a
+     * successful archive — mirrors `onRecalled`'s identical shape. Archiving itself is offered for any
+     * message except one currently in Drafts or Outbox (mirrors `BaseMessageRoute.archive()`'s own
+     * server-side 400 guard); Drafts is detected via `draftsFolderUid` (already passed by every caller
+     * for the Outbox-cancel flow) rather than a new prop. */
+    onArchived?: (updated: Message) => void;
+    /** Every label defined in this message's mailbox, for the label-assignment popover below — each
+     * caller fetches its own mailbox's labels the same way it already resolves `draftsFolderUid`
+     * (`listLabels()`). Absent/empty simply hides the Labels control - there's nothing to assign. */
+    labels?: Label[];
+    /** Called with the server's updated copy (carrying the new `labelUids`) after successfully toggling
+     * a label — always patches in place, never removes from a caller's list (unlike `onArchived`):
+     * changing labels never moves a message between folders. */
+    onLabelsChanged?: (updated: Message) => void;
+    /** Handed a label created from the Labels menu, for the caller to add to `labels`. Without it the menu
+     * offers no "New label" row, only the link to where labels are managed. */
+    onLabelCreated?: (label: Label) => void;
+    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: the
+     * subject becomes a heading under the thread's own, since a document has one `h1` and the thread's is
+     * the conversation. Everything else - the badges, the actions, the body - is identical. */
+    inThread?: boolean;
+}
+/**
+ * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
+ * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
+ * and the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
+ * a message row) — see each call site for how `message`/`attachments`/`isSentItems` are sourced. The
+ * desktop pane shows whichever message the list opened, including one opened from a conversation row.
+ */
+export default function MessageDetailPane(props: MessageDetailPaneProps): React.JSX.Element;