@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/mail/MessageListItem.d.ts

@@ -0,0 +1,32 @@
+/**
+ * MessageListItem — the mailbox list's adapter onto the shared `MessageRow`.
+ *
+ * It maps an API thread to the row's `ThreadRowData` shape and supplies the one
+ * thing only the mailbox list has: route-linking rows. Everything visual and
+ * interactive lives in `MessageRow`, which the brief and Flagged render too.
+ */
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { Density, SelectionModifiers, ThreadRowData } from "@remit/ui";
+interface MessageListItemProps {
+    thread: RemitImapThreadMessageResponse;
+    mailboxId: string;
+    isSelected: boolean;
+    isFocused?: boolean;
+    isTabStop?: boolean;
+    onFocusRow?: (messageId: string) => void;
+    isChecked: boolean;
+    onToggleCheck: (id: string) => void;
+    onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
+    messageCount?: number;
+    isMultiSelectMode?: boolean;
+    onLongPress?: (messageId: string) => void;
+    isDesktop?: boolean;
+    density?: Density;
+}
+/**
+ * Map a RemitImapThreadMessageResponse to the ThreadRowData shape the shared
+ * row renders.
+ */
+export declare const threadToRowData: (thread: RemitImapThreadMessageResponse, messageCount?: number) => ThreadRowData;
+export declare const MessageListItem: import("react").MemoExoticComponent<({ thread, mailboxId, isSelected, isFocused, isTabStop, onFocusRow, isChecked, onToggleCheck, onRowSelect, messageCount, isMultiSelectMode, onLongPress, isDesktop, density, }: MessageListItemProps) => import("react").JSX.Element>;
+export {};

package/dist/src/components/mail/MessageListItem.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { toDisplayCategory } from "../../lib/display-category";
+import { formatEmailDate } from "../../lib/format";
+import { rowSettlement } from "../../lib/row-settlement";
+import { MessageRow } from "./MessageRow";
+/**
+ * Map a RemitImapThreadMessageResponse to the ThreadRowData shape the shared
+ * row renders.
+ */
+export const threadToRowData = (thread, messageCount) => ({
+    id: thread.messageId,
+    accountId: thread.accountId,
+    mailboxId: thread.mailboxId,
+    threadId: thread.threadId,
+    fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
+    fromEmail: thread.fromEmail ?? "",
+    subject: thread.subject ?? "(No subject)",
+    snippet: thread.snippet ?? "",
+    timeLabel: formatEmailDate(thread.sentDate),
+    isRead: thread.isRead,
+    hasAttachment: thread.hasAttachment,
+    starred: thread.hasStars === true,
+    trust: thread.senderTrust,
+    category: toDisplayCategory(thread.category),
+    messageCount,
+    // The backend's DKIM-alignment verdict is authoritative: it already accounts
+    // for the multi-signature / alignment semantics a single string compare
+    // misses.
+    suspicious: thread.authenticity?.dkimMismatch === true,
+    labels: thread.labels,
+    ...rowSettlement(thread),
+});
+const MessageListItemComponent = ({ thread, mailboxId, isSelected, isFocused, isTabStop, onFocusRow, isChecked, onToggleCheck, onRowSelect, messageCount, isMultiSelectMode, onLongPress, isDesktop, density, }) => (_jsx(MessageRow, { thread: threadToRowData(thread, messageCount), link: { mailboxId, threadId: thread.threadId }, inListbox: true, active: isSelected, focused: isFocused, isTabStop: isTabStop, density: density, isDesktop: isDesktop, onFocusRow: onFocusRow, selection: {
+        isChecked,
+        onToggleCheck,
+        onRowSelect,
+        isMultiSelectMode,
+        onLongPress,
+    } }));
+export const MessageListItem = memo(MessageListItemComponent);

package/dist/src/components/mail/MessageRow.d.ts

@@ -0,0 +1,57 @@
+import { type Density, type SelectionModifiers, type ThreadRowData } from "@remit/ui";
+import { type ReactNode } from "react";
+export interface MessageRowSelection {
+    isChecked: boolean;
+    onToggleCheck: (messageId: string) => void;
+    /**
+     * Desktop mouse selection. Returns true when selection consumed the click
+     * (the row must not open); false for a plain click.
+     */
+    onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
+    /** Checkbox stays visible — mobile multi-select mode. */
+    isMultiSelectMode?: boolean;
+    /** Long press enters selection mode (mobile only). */
+    onLongPress?: (messageId: string) => void;
+}
+export interface MessageRowProps {
+    thread: ThreadRowData;
+    /** The row is the open thread. */
+    active?: boolean;
+    /**
+     * Roving keyboard focus cursor (#429). Distinct from `active`: a
+     * focused-but-not-open row shows the left accent rail; the open row shows the
+     * full highlight. Both can be true.
+     */
+    focused?: boolean;
+    /**
+     * Whether this row holds the list's single tab stop (roving tabindex). Every
+     * other row is `tabIndex={-1}`, so Tab enters the list at the cursor and
+     * Shift+Tab leaves it rather than stepping through hundreds of rows.
+     */
+    isTabStop?: boolean;
+    density?: Density;
+    isDesktop?: boolean;
+    /** Extra chip after the category badge (e.g. the auto-moved indicator). */
+    badge?: ReactNode;
+    selection?: MessageRowSelection;
+    /**
+     * The row sits inside a container with `role="listbox"` (the mailbox list),
+     * so it carries `role="option"` and `aria-selected`. Off everywhere else:
+     * the brief and Flagged render their rows in ordinary containers, where an
+     * orphan `option` is invalid ARIA and costs the row its button semantics.
+     */
+    inListbox?: boolean;
+    /**
+     * The address the row links to: the folder being browsed and the conversation
+     * this row opens. Omit for callback-driven rows.
+     */
+    link?: {
+        mailboxId: string;
+        threadId: string;
+    };
+    /** Called when the row is opened by a plain click on a non-linking row. */
+    onClick?: () => void;
+    /** Called when the row takes DOM focus, so the roving cursor follows it. */
+    onFocusRow?: (messageId: string) => void;
+}
+export declare const MessageRow: import("react").MemoExoticComponent<({ thread, active, focused: focusedProp, isTabStop: isTabStopProp, density, isDesktop: isDesktopProp, badge, selection: selectionProp, inListbox, link, onClick, onFocusRow: onFocusRowProp, }: MessageRowProps) => import("react").JSX.Element>;

package/dist/src/components/mail/MessageRow.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MessageRow — the one thread row every list in the app renders.
+ *
+ * The mailbox list, the daily brief and Flagged used to carry three
+ * near-identical rows (#149). They differ in two axes only, both props here:
+ *
+ * - `link` — set for the mailbox list, whose rows are real links so a plain
+ *   click routes and a middle click opens a tab. Omitted for the brief and
+ *   Flagged, whose rows report the tap through `onClick`.
+ * - `selection` — set where multi-select is available. Absent renders the
+ *   avatar alone with no checkbox, which is what "non-selectable mode" means.
+ */
+import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ComfortableRowBody, CompactRowBody, cn, comfortableRowClass, compactRowClass, mergeProps, modifiersOf, useLongPress, } from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { memo, useCallback } from "react";
+import { NavLink } from "../../routing";
+import { useThreadRowInteraction } from "./ThreadListInteraction";
+import { useModifierSelect } from "./useModifierSelect";
+const MessageRowComponent = ({ thread, active = false, focused: focusedProp, isTabStop: isTabStopProp, density = "comfortable", isDesktop: isDesktopProp, badge, selection: selectionProp, inListbox = false, link, onClick, onFocusRow: onFocusRowProp, }) => {
+    const queryClient = useQueryClient();
+    const messageId = thread.id;
+    // A list that renders its own rows (the brief, Flagged) supplies the cursor
+    // and selection through context; the mailbox list passes them as props.
+    const fromContext = useThreadRowInteraction(messageId);
+    const focused = focusedProp ?? fromContext?.focused ?? false;
+    const isTabStop = isTabStopProp ?? fromContext?.isTabStop ?? false;
+    const selection = selectionProp ?? fromContext?.selection;
+    const onFocusRow = onFocusRowProp ?? fromContext?.onFocusRow;
+    // The cursor and the row must agree on the device: the cursor's multi-select
+    // mode is derived from it, and the row's tap semantics branch on it.
+    const isDesktop = isDesktopProp ?? fromContext?.isDesktop ?? true;
+    const isChecked = selection?.isChecked ?? false;
+    const isMultiSelectMode = selection?.isMultiSelectMode ?? false;
+    const onToggleCheck = selection?.onToggleCheck;
+    const onRowSelect = selection?.onRowSelect;
+    const onLongPress = selection?.onLongPress;
+    const handleToggleCheck = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggleCheck?.(messageId);
+    }, [onToggleCheck, messageId]);
+    const modifierSelect = useModifierSelect(messageId, onRowSelect);
+    // A plain click falls through to the Link's navigation (or `onClick` on a
+    // non-linking row). A modified click belongs to selection and is consumed by
+    // `claimClick`, whichever of the press or the click the engine delivered.
+    //
+    // On mobile, once selection mode is active (#92) a plain tap toggles the row
+    // instead of opening it — the same tap-to-toggle contract every reference
+    // mail client uses once you're mid-selection.
+    const handleRowClick = useCallback((e) => {
+        if (modifierSelect.claimClick(e))
+            return;
+        if (!isDesktop) {
+            if (isMultiSelectMode) {
+                e.preventDefault();
+                e.stopPropagation();
+                onToggleCheck?.(messageId);
+                return;
+            }
+            onClick?.();
+            return;
+        }
+        // A plain desktop click collapses any multi-selection and re-anchors it
+        // before the row opens.
+        onRowSelect?.(messageId, modifiersOf(e));
+        onClick?.();
+    }, [
+        modifierSelect,
+        isDesktop,
+        isMultiSelectMode,
+        onToggleCheck,
+        onRowSelect,
+        onClick,
+        messageId,
+    ]);
+    const handleLongPress = useCallback(() => {
+        onLongPress?.(messageId);
+    }, [onLongPress, messageId]);
+    // Threshold comes from useLongPress' default so the plain row and the
+    // swipeable row can't drift apart on timing.
+    const { longPressProps } = useLongPress({
+        onLongPress: handleLongPress,
+        accessibilityDescription: isChecked ? "Deselect message" : "Select message",
+    });
+    // Intent-based prefetch: by the time the user clicks, the body is in
+    // React Query's cache and the detail pane renders without a spinner.
+    const prefetchMessage = useCallback(() => {
+        queryClient.prefetchQuery(messageOperationsDescribeMessageOptions({ path: { messageId } }));
+    }, [queryClient, messageId]);
+    const handleRowFocus = useCallback(() => {
+        prefetchMessage();
+        onFocusRow?.(messageId);
+    }, [prefetchMessage, onFocusRow, messageId]);
+    // Listbox semantics + roving tabindex, shared by both densities. Merged (not
+    // spread) with the mobile long-press props, so the gesture's pointer
+    // handlers chain with the row's own instead of replacing them.
+    const interactionProps = mergeProps({
+        "data-list-row": "",
+        "data-message-row": true,
+        "data-message-id": messageId,
+        ...(inListbox
+            ? { role: "option", "aria-selected": isChecked }
+            : {}),
+        tabIndex: isTabStop ? 0 : -1,
+        onClick: handleRowClick,
+        onMouseDown: modifierSelect.onMouseDown,
+        onContextMenu: modifierSelect.onContextMenu,
+        onMouseEnter: prefetchMessage,
+        onFocus: handleRowFocus,
+    }, isDesktop || !selection ? {} : longPressProps);
+    const className = cn(density === "compact"
+        ? compactRowClass({ active, focused })
+        : cn("group", comfortableRowClass({ active, focused })), "outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset", isChecked && "bg-accent-soft", 
+    // Long-press enters selection mode; without these, Android Chrome opens
+    // the link context menu / starts text selection and iOS Safari fires the
+    // callout, racing the app's handler. useLongPress suppresses the
+    // touch-fired contextmenu; the callout fires no cancelable event, so
+    // `select-none` / `-webkit-touch-callout: none` are the only lever left.
+    !isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]");
+    const body = density === "compact" ? (_jsx(CompactRowBody, { thread: thread })) : (_jsx(ComfortableRowBody, { thread: thread, badge: badge, selection: selection
+            ? {
+                checked: isChecked,
+                alwaysVisible: isMultiSelectMode,
+                onToggle: handleToggleCheck,
+            }
+            : undefined }));
+    if (link === undefined) {
+        return (_jsx("button", { type: "button", ...interactionProps, className: className, children: body }));
+    }
+    return (_jsx(NavLink, { to: "/mail/$mailboxId/$threadId/$messageId", params: { ...link, messageId }, search: (prev) => prev, variant: "row", ...interactionProps, className: className, children: body }));
+};
+// Wrapped in React.memo so virtualized rows don't re-render on every parent
+// state change. Props are primitives plus callbacks the parents keep stable, so
+// default shallow equality is appropriate.
+export const MessageRow = memo(MessageRowComponent);

package/dist/src/components/mail/MessageSettlementAlert.d.ts

@@ -0,0 +1,27 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+/**
+ * States, on the open message, that Remit gave up on a mutation (issue #1002) —
+ * the failure the list can only chip — and offers the way out for THAT
+ * mutation, never a different one (issue #1229).
+ *
+ * A delete retries through the ordinary delete endpoint: giving up put `status`
+ * back to `active`, so `settledPlacement` passes the row through and
+ * `POST /messages/delete` re-drives it against the folder the server actually
+ * holds it in. A move cannot retry that way — the destination the give-up
+ * discarded is on no row — so its retry is the same folder picker every other
+ * move goes through, which asks for one. Every other give-up gets no treatment;
+ * `abandonedMutationOf` says which and why.
+ *
+ * The picker needs an account to scope its folder list to, and the caller's
+ * `accountId` is absent on every row that came from a per-mailbox endpoint and
+ * for as long as the conversation's own lookup is in flight. It is resolved
+ * from the row's mailbox here rather than left out, because a notice that names
+ * a failure and offers no way to undo it is the same defect as one that offers
+ * the wrong way (#1229) — the resolver is the one `MessageActionMenu` already
+ * uses for exactly this.
+ */
+export declare function MessageSettlementAlert({ threadMessage, accountId, className, }: {
+    threadMessage: RemitImapThreadMessageResponse;
+    accountId: string | undefined;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/src/components/mail/MessageSettlementAlert.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { abandonedMutationOf } from "@remit/data-ports/message-settlement";
+import { MessageMutation } from "@remit/domain-enums";
+import { MessageSettlementNotice, messageSettlementCopy } from "@remit/ui";
+import { useCallback, useMemo } from "react";
+import { useDeleteMessages } from "../../hooks/useDeleteMessages";
+import { useMailboxAccount } from "../../hooks/useMailboxAccount";
+import { useMoveMessages } from "../../hooks/useMoveMessages";
+import { buildBugReportContext, buildGitHubIssueUrl, } from "../../lib/bug-report";
+import { MoveToTrigger } from "./MoveToTrigger";
+/**
+ * States, on the open message, that Remit gave up on a mutation (issue #1002) —
+ * the failure the list can only chip — and offers the way out for THAT
+ * mutation, never a different one (issue #1229).
+ *
+ * A delete retries through the ordinary delete endpoint: giving up put `status`
+ * back to `active`, so `settledPlacement` passes the row through and
+ * `POST /messages/delete` re-drives it against the folder the server actually
+ * holds it in. A move cannot retry that way — the destination the give-up
+ * discarded is on no row — so its retry is the same folder picker every other
+ * move goes through, which asks for one. Every other give-up gets no treatment;
+ * `abandonedMutationOf` says which and why.
+ *
+ * The picker needs an account to scope its folder list to, and the caller's
+ * `accountId` is absent on every row that came from a per-mailbox endpoint and
+ * for as long as the conversation's own lookup is in flight. It is resolved
+ * from the row's mailbox here rather than left out, because a notice that names
+ * a failure and offers no way to undo it is the same defect as one that offers
+ * the wrong way (#1229) — the resolver is the one `MessageActionMenu` already
+ * uses for exactly this.
+ */
+export function MessageSettlementAlert({ threadMessage, accountId, className, }) {
+    const abandoned = abandonedMutationOf(threadMessage);
+    const settlement = abandoned === MessageMutation.delete
+        ? "delete_failed"
+        : abandoned === MessageMutation.move
+            ? "move_failed"
+            : undefined;
+    // Only a move that gave up, and only where the caller has no account of its
+    // own, has anything to resolve — so every other row subscribes to nothing.
+    // Asking unconditionally would pull `/config` and every account's mailbox
+    // list into each expanded message, for a case almost none of them are.
+    const { accountId: mailboxAccountId } = useMailboxAccount(settlement === "move_failed" && !accountId
+        ? threadMessage.mailboxId
+        : undefined);
+    const scopedAccountId = accountId ?? mailboxAccountId;
+    const { deleteMessages, isPending: isDeleting } = useDeleteMessages({
+        mailboxId: threadMessage.mailboxId,
+        threadId: threadMessage.threadId,
+        accountId: scopedAccountId,
+        messages: [threadMessage],
+    });
+    const { moveMessages, isPending: isMoving } = useMoveMessages({
+        mailboxId: threadMessage.mailboxId,
+        threadId: threadMessage.threadId,
+        accountId: scopedAccountId,
+    });
+    const onDeleteAgain = useCallback(() => {
+        deleteMessages([threadMessage.messageId]);
+    }, [deleteMessages, threadMessage.messageId]);
+    const onMoveAgain = useCallback((destinationMailboxId) => {
+        moveMessages([threadMessage.messageId], destinationMailboxId);
+    }, [moveMessages, threadMessage.messageId]);
+    const reportHref = useMemo(() => settlement
+        ? buildGitHubIssueUrl(buildBugReportContext({
+            title: messageSettlementCopy[settlement].title,
+            errorMessage: `Message ${threadMessage.messageId}: status=${threadMessage.status} syncStatus=${threadMessage.syncStatus} abandonedMutation=${threadMessage.abandonedMutation}`,
+        }))
+        : undefined, [
+        settlement,
+        threadMessage.messageId,
+        threadMessage.status,
+        threadMessage.syncStatus,
+        threadMessage.abandonedMutation,
+    ]);
+    if (!settlement)
+        return null;
+    return (_jsx(MessageSettlementNotice, { settlement: settlement, onRetry: settlement === "delete_failed" ? onDeleteAgain : undefined, action: settlement === "move_failed" && scopedAccountId ? (_jsx(MoveToTrigger, { accountId: scopedAccountId, currentMailboxId: threadMessage.mailboxId, onMove: onMoveAgain, disabled: isMoving, variant: "compact", label: messageSettlementCopy.move_failed.retryLabel })) : undefined, retryPending: settlement === "delete_failed" ? isDeleting : isMoving, reportHref: reportHref, className: className }));
+}

package/dist/src/components/mail/MessageToolbar.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Message action toolbar on the pane-header datum (40px, the shared
+ * `--spacing-pane-header`). Everything here acts on the open message: reply /
+ * reply-all / forward, then delete / move / flag — Apple-Mail-style ghost icon
+ * buttons — and the intelligence toggle (#422).
+ *
+ * Search, compose, bug report and the account menu are not message context;
+ * they live in the app top bar above every pane (`MailTopBar`, #49).
+ *
+ * The control set is fixed: every button occupies the same slot on every view
+ * and in every selection state (#52). The mail verbs stay pressable with no
+ * thread open — a press is a no-op that surfaces a one-line inline explanation
+ * (`doc/rules/ux.md`). The intelligence toggle greys out instead, because it
+ * has nothing to explain: it opens a rail, and there is no rail to open.
+ */
+export interface MessageToolbarProps {
+    hasThread: boolean;
+    /**
+     * The message the verbs act on, as the address states it. The inline notice
+     * a press leaves behind belongs to that message and to nothing after it, so
+     * opening another one takes the sentence down (#818).
+     */
+    messageId?: string;
+    intelligenceOpen: boolean;
+    /**
+     * Whether pressing the intelligence toggle would open anything: the view has
+     * an intelligence surface at this width — the rail, or the drawer where the
+     * rail does not fit — and a thread is selected. The button renders either
+     * way, disabled when false, never absent (#52).
+     */
+    canToggleIntelligence: boolean;
+    onToggleIntelligence: () => void;
+    onReply?: () => void;
+    onReplyAll?: () => void;
+    onForward?: () => void;
+    /** Delete all messages in the open thread. */
+    onDelete?: () => void;
+    /** Toggle the star on the most-recent message in the thread. */
+    onToggleStar?: () => void;
+    /** Whether the most-recent message is starred. */
+    isStarred?: boolean;
+    /**
+     * Move-to-mailbox trigger context. When present the FolderInput button
+     * is replaced by the full `MoveToTrigger` popover.
+     */
+    moveContext?: {
+        accountId: string;
+        currentMailboxId: string;
+        onMove: (destinationMailboxId: string) => void;
+    };
+    /**
+     * Whether the lookup behind `moveContext` is still in flight. Absent context
+     * is either a read that has not landed or one that settled holding nothing,
+     * and the two owe the reader different sentences (#818).
+     */
+    moveContextLoading?: boolean;
+}
+export declare const MessageToolbar: ({ hasThread, messageId, intelligenceOpen, canToggleIntelligence, onToggleIntelligence, onReply, onReplyAll, onForward, onDelete, onToggleStar, isStarred, moveContext, moveContextLoading, }: MessageToolbarProps) => import("react").JSX.Element;

package/dist/src/components/mail/MessageToolbar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IntelligenceToggle, MailActionToolbar, tooltipForAction, } from "@remit/ui";
+import { useState } from "react";
+import { MoveToTrigger } from "./MoveToTrigger";
+const OPEN_FIRST = "Open a message first";
+/**
+ * A thread is open and the verb still has nothing to act on — the conversation
+ * has not said which turn answers for it yet. A press has to say so: the
+ * shared toolbar only explains itself when there is no thread at all, so an
+ * unwired handler under an open one would be swallowed in silence (#803).
+ */
+const NOT_LOADED_YET = "This conversation hasn't loaded yet";
+/**
+ * Move alone waits on a second read — the account owning this mailbox, found by
+ * fanning out over every account's mailbox list. With the message on screen and
+ * that fan-out still in flight, "open a message first" is simply false (#818).
+ */
+const MAILBOXES_LOADING = "The mailbox list hasn't loaded yet";
+/** The same read, settled and holding no account for this mailbox: it errored,
+ *  or no account lists the folder. Waiting will not fix either one. */
+const MAILBOXES_MISSING = "Couldn't find this mailbox's account — reload to try again";
+/** The accessible name of each verb's button, for the sentence that invites a
+ *  press to be repeated once what it waited for arrives. */
+const LABELS = {
+    reply: "Reply",
+    replyAll: "Reply all",
+    forward: "Forward",
+    delete: "Move to Trash",
+    move: "Move to mailbox",
+    flag: "Star",
+};
+export const MessageToolbar = ({ hasThread, messageId, intelligenceOpen, canToggleIntelligence, onToggleIntelligence, onReply, onReplyAll, onForward, onDelete, onToggleStar, isStarred, moveContext, moveContextLoading, }) => {
+    const [press, setPress] = useState(null);
+    const actingOn = messageId ?? null;
+    // The one place availability is decided. It agrees with `MailActionToolbar`
+    // by construction — a null reason implies both a thread and a handler, which
+    // is exactly what the shared bar requires before it calls one — so no press
+    // can fall between the two and end in silence.
+    const whyUnavailable = (action) => {
+        if (!hasThread)
+            return OPEN_FIRST;
+        if (action === "move") {
+            if (moveContext)
+                return null;
+            return moveContextLoading ? MAILBOXES_LOADING : MAILBOXES_MISSING;
+        }
+        const handler = {
+            reply: onReply,
+            replyAll: onReplyAll,
+            forward: onForward,
+            delete: onDelete,
+            flag: onToggleStar,
+        }[action];
+        return handler ? null : NOT_LOADED_YET;
+    };
+    // Derived rather than stored: the sentence is re-read from the press on every
+    // render, so it leaves the moment its reason does. What it leaves behind is
+    // an invitation, not nothing — the press was made and never acted on.
+    const pressed = press && press.messageId === actingOn ? press : null;
+    const reason = pressed ? whyUnavailable(pressed.action) : null;
+    // Move is the exception: its press is carried into the picker below, which
+    // mounts already open, so there is nothing left to ask for.
+    const carriedMove = pressed?.action === "move" && pressed.overThread && Boolean(moveContext);
+    const hint = reason ??
+        (pressed && !carriedMove
+            ? `${LABELS[pressed.action]} is ready — press it again`
+            : null);
+    const record = (action) => setPress({ action, messageId: actingOn, overThread: hasThread });
+    const explain = (action) => () => record(action);
+    // Every verb the bar renders answers a press, wired or not — and a press
+    // that acts takes down whatever an earlier one left behind, so a stale
+    // complaint never reads as this verb's failure.
+    const wired = (action, handler) => handler
+        ? () => {
+            setPress(null);
+            handler();
+        }
+        : explain(action);
+    return (_jsx(MailActionToolbar, { hasThread: hasThread, isStarred: isStarred, onUnavailable: record, unavailableHint: hint, replyTitle: `Reply ${tooltipForAction("reply")}`, replyAllTitle: `Reply all ${tooltipForAction("replyAll")}`, forwardTitle: `Forward ${tooltipForAction("forward")}`, deleteTitle: `Move to Trash ${tooltipForAction("delete")}`, flagTitle: `Star ${tooltipForAction("toggleStar")}`, onReply: wired("reply", onReply), onReplyAll: wired("replyAll", onReplyAll), onForward: wired("forward", onForward), onDelete: wired("delete", onDelete), onToggleStar: wired("flag", onToggleStar), onMove: explain("move"), moveSlot: moveContext ? (_jsx(MoveToTrigger, { accountId: moveContext.accountId, currentMailboxId: moveContext.currentMailboxId, onMove: moveContext.onMove, label: "Move to mailbox", defaultOpen: carriedMove })) : undefined, children: _jsx(IntelligenceToggle, { open: intelligenceOpen, enabled: canToggleIntelligence, onToggle: onToggleIntelligence }) }));
+};

package/dist/src/components/mail/MobileMessageBar.d.ts

@@ -0,0 +1,25 @@
+interface MobileMessageBarProps {
+    messageId: string;
+    threadId: string;
+    mailboxId: string;
+    accountId?: string;
+    isRead: boolean;
+    isStarred: boolean;
+    onToggleStar: () => void;
+    /** From-address id; enables the "Trusted sender" overflow item. */
+    fromAddressId?: string;
+    isTrusted: boolean;
+    showRaw: boolean;
+    onToggleRaw?: () => void;
+    onReply?: () => void;
+    onReplyAll?: () => void;
+    onForward?: () => void;
+}
+/**
+ * The live per-message action bar for the mobile single-pane reading view.
+ * Wraps the kit `MobileMessageActionBar` and owns this message's mutations:
+ * star (host), move-to-folder, delete, mark read/unread, plus the trusted /
+ * raw toggles in the overflow. Reply verbs come from the conversation.
+ */
+export declare const MobileMessageBar: ({ messageId, threadId, mailboxId, accountId, isRead, isStarred, onToggleStar, fromAddressId, isTrusted, showRaw, onToggleRaw, onReply, onReplyAll, onForward, }: MobileMessageBarProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MobileMessageBar.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { messageBulkOperationsUpdateFlagsMutation, threadDetailOperationsListThreadMessagesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { MobileMessageActionBar } from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { BadgeCheck, Check, Code } from "lucide-react";
+import { useCallback } from "react";
+import { useDeleteMessages } from "../../hooks/useDeleteMessages";
+import { useMoveMessages } from "../../hooks/useMoveMessages";
+import { useToggleTrusted } from "../../hooks/useToggleTrusted";
+import { invalidateThreadListQueries, threadListCacheKeys, } from "../../lib/thread-list-cache";
+import { MoveToTrigger } from "./MoveToTrigger";
+/**
+ * The live per-message action bar for the mobile single-pane reading view.
+ * Wraps the kit `MobileMessageActionBar` and owns this message's mutations:
+ * star (host), move-to-folder, delete, mark read/unread, plus the trusted /
+ * raw toggles in the overflow. Reply verbs come from the conversation.
+ */
+export const MobileMessageBar = ({ messageId, threadId, mailboxId, accountId, isRead, isStarred, onToggleStar, fromAddressId, isTrusted, showRaw, onToggleRaw, onReply, onReplyAll, onForward, }) => {
+    const queryClient = useQueryClient();
+    const { deleteMessages } = useDeleteMessages({ mailboxId, threadId });
+    const { moveMessages } = useMoveMessages({ mailboxId, threadId, accountId });
+    const { toggleTrusted } = useToggleTrusted({ messageId });
+    const { mutate: updateFlags } = useMutation({
+        ...messageBulkOperationsUpdateFlagsMutation(),
+        onSettled: () => {
+            queryClient.invalidateQueries({
+                queryKey: threadDetailOperationsListThreadMessagesQueryKey({
+                    path: { threadId },
+                }),
+            });
+            invalidateThreadListQueries(queryClient, threadListCacheKeys([mailboxId]));
+        },
+    });
+    const handleMove = useCallback((destinationMailboxId) => {
+        moveMessages([messageId], destinationMailboxId);
+    }, [moveMessages, messageId]);
+    const handleDelete = useCallback(() => {
+        deleteMessages([messageId]);
+    }, [deleteMessages, messageId]);
+    const handleToggleRead = useCallback(() => {
+        updateFlags({ body: { messageIds: [messageId], isRead: !isRead } });
+    }, [updateFlags, messageId, isRead]);
+    const overflowItems = [];
+    if (fromAddressId) {
+        overflowItems.push({
+            key: "trusted",
+            label: isTrusted ? "Trusted sender" : "Mark sender trusted",
+            icon: isTrusted ? (_jsx(BadgeCheck, { className: "size-4 text-positive" })) : (_jsx(Check, { className: "size-4" })),
+            onSelect: () => toggleTrusted(fromAddressId, isTrusted),
+        });
+    }
+    if (onToggleRaw) {
+        overflowItems.push({
+            key: "raw",
+            label: showRaw ? "Show formatted" : "Show raw email",
+            icon: _jsx(Code, { className: "size-4" }),
+            onSelect: onToggleRaw,
+        });
+    }
+    return (_jsx(MobileMessageActionBar, { hasThread: true, onReply: onReply, onReplyAll: onReplyAll, onForward: onForward, isStarred: isStarred, onToggleStar: onToggleStar, onDelete: handleDelete, isRead: isRead, onToggleRead: handleToggleRead, overflowItems: overflowItems, moveSlot: accountId ? (_jsx(MoveToTrigger, { accountId: accountId, currentMailboxId: mailboxId, onMove: handleMove, label: "Move this message" })) : undefined }));
+};

package/dist/src/components/mail/MoveToTrigger.d.ts

@@ -0,0 +1,30 @@
+interface MoveToTriggerProps {
+    accountId: string;
+    currentMailboxId: string;
+    onMove: (destinationMailboxId: string) => void;
+    disabled?: boolean;
+    /**
+     * When set, replaces the default `Move to folder` label with a hint and
+     * disables the trigger. Used by the bulk-action toolbar to surface the
+     * cross-account selection guard inline.
+     */
+    disabledHint?: string;
+    /**
+     * Render style for the trigger. `icon-only` renders a 44px icon button
+     * (mobile selection top bar / per-message overflow), `compact` renders
+     * a small label+icon button (desktop bulk toolbar).
+     */
+    variant?: "icon-only" | "compact";
+    /**
+     * Optional accessible label override for the trigger button.
+     */
+    label?: string;
+    /**
+     * Mount with the picker already open. Carries a Move pressed before the
+     * account behind the mailbox had resolved through to the picker it asked
+     * for, rather than dropping the press once the button appears (#818).
+     */
+    defaultOpen?: boolean;
+}
+export declare const MoveToTrigger: ({ accountId, currentMailboxId, onMove, disabled, disabledHint, variant, label, defaultOpen, }: MoveToTriggerProps) => import("react").JSX.Element;
+export {};