@remit/web-client 0.0.325 → 0.0.326

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

@@ -0,0 +1,17 @@
+import { type RescueCandidate } from "@remit/ui";
+import { type ReactNode } from "react";
+interface SpamRescueProps {
+    accountId: string;
+    currentMailboxId: string;
+    candidates: RescueCandidate[];
+    onMove: (messageIds: string[], destinationId: string) => void;
+    children: ReactNode;
+}
+/**
+ * Wraps the Spam folder list with the Rescue-from-Spam call-to-action and flow.
+ * Renders the banner above the list and the review sheet over it; the kit flow
+ * stays presentational, this component supplies the real folders, destination
+ * and move. Only mount it on the Spam folder when candidates exist.
+ */
+export declare function SpamRescue({ accountId, currentMailboxId, candidates, onMove, children, }: SpamRescueProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { RescueBanner, RescueFromSpamFlow, } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useFolderAppointments, useInboxMailbox, } from "../../hooks/useArchiveMailbox";
+import { useFolderLabelTranslator } from "../../hooks/useFolderLabelTranslator";
+import { buildMoveOptions, folderDelimiter } from "../../lib/move-options";
+import { recordRescueCandidatesSurfaced, recordRescueCommitted, recordRescueFlowOpened, } from "../../lib/rescue-telemetry";
+import { useTelemetry } from "../../lib/telemetry-context";
+/**
+ * Wraps the Spam folder list with the Rescue-from-Spam call-to-action and flow.
+ * Renders the banner above the list and the review sheet over it; the kit flow
+ * stays presentational, this component supplies the real folders, destination
+ * and move. Only mount it on the Spam folder when candidates exist.
+ */
+export function SpamRescue({ accountId, currentMailboxId, candidates, onMove, children, }) {
+    const [open, setOpen] = useState(false);
+    const telemetry = useTelemetry();
+    const translator = useFolderLabelTranslator();
+    const { inboxMailboxId } = useInboxMailbox(accountId);
+    const folderAppointments = useFolderAppointments(accountId);
+    const { data: mailboxesResponse } = useQuery({
+        ...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+        staleTime: Infinity,
+    });
+    const folders = useMemo(() => buildMoveOptions({
+        mailboxes: mailboxesResponse?.items ?? [],
+        folderAppointments,
+        currentMailboxId,
+        translator,
+    }), [
+        mailboxesResponse?.items,
+        folderAppointments,
+        currentMailboxId,
+        translator,
+    ]);
+    const defaultDestinationId = useMemo(() => {
+        if (inboxMailboxId)
+            return inboxMailboxId;
+        const inbox = folders.find((f) => f.label.toLowerCase() === "inbox");
+        return inbox?.id ?? folders.find((f) => !f.isCurrent)?.id ?? "";
+    }, [inboxMailboxId, folders]);
+    const surfacedRef = useRef(false);
+    useEffect(() => {
+        if (surfacedRef.current)
+            return;
+        surfacedRef.current = true;
+        recordRescueCandidatesSurfaced(telemetry, candidates.length);
+    }, [telemetry, candidates.length]);
+    const handleReview = useCallback(() => {
+        recordRescueFlowOpened(telemetry, candidates.length);
+        setOpen(true);
+    }, [telemetry, candidates.length]);
+    const handleConfirmMove = useCallback((messageIds, destinationId) => {
+        recordRescueCommitted(telemetry, {
+            selected: messageIds.length,
+            total: candidates.length,
+            toInbox: destinationId === inboxMailboxId,
+        });
+        onMove(messageIds, destinationId);
+    }, [telemetry, candidates.length, inboxMailboxId, onMove]);
+    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 px-row-inset pt-2", children: _jsx(RescueBanner, { count: candidates.length, onReview: handleReview }) }), _jsx("div", { className: "min-h-0 flex-1", children: children }), _jsx(RescueFromSpamFlow, { open: open, candidates: candidates, defaultDestinationId: defaultDestinationId, availableFolders: folders, delimiter: folderDelimiter(mailboxesResponse?.items ?? []), onConfirmMove: handleConfirmMove, onCancel: () => setOpen(false) })] }));
+}

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

@@ -0,0 +1,31 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { type Density, type SelectionModifiers, type ThreadRowData } from "@remit/ui";
+interface SwipeableMessageRowProps {
+    thread: RemitImapThreadMessageResponse;
+    mailboxId: string;
+    isSelected: boolean;
+    /** Roving keyboard focus cursor — renders the left accent rail (#429). */
+    isFocused?: boolean;
+    /** The one row in the tab order (roving tabindex). */
+    isTabStop?: boolean;
+    /** Called when the row takes DOM focus, so the cursor follows it. */
+    onFocusRow?: (messageId: string) => void;
+    isChecked: boolean;
+    onToggleCheck: (id: string) => void;
+    onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
+    isMultiSelectMode: boolean;
+    onLongPress: (messageId: string) => void;
+    isDesktop: boolean;
+    onDelete: (messageId: string) => void;
+    onToggleRead: (messageId: string, currentIsRead: boolean) => void;
+    density?: Density;
+}
+/**
+ * The mobile list builds its own row rather than delegating to
+ * `MessageListItem` (see the `isDesktop || isMultiSelectMode` branch below),
+ * so every row signal has to be repeated here. Exported so a test can hold it
+ * to the same answers as the desktop mapper.
+ */
+export declare const swipeableRowData: (thread: RemitImapThreadMessageResponse) => ThreadRowData;
+export declare const SwipeableMessageRow: ({ thread, mailboxId, isSelected, isFocused, isTabStop, onFocusRow, isChecked, onToggleCheck, onRowSelect, isMultiSelectMode, onLongPress, isDesktop, onDelete, onToggleRead, density, }: SwipeableMessageRowProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SwipeableRow, } from "@remit/ui";
+import { useCallback, useState } from "react";
+import { toDisplayCategory } from "../../lib/display-category";
+import { formatEmailDate } from "../../lib/format";
+import { rowSettlement } from "../../lib/row-settlement";
+import { useOpenThread } from "../../routing";
+import { MessageListItem } from "./MessageListItem";
+import { useModifierSelect } from "./useModifierSelect";
+/**
+ * The mobile list builds its own row rather than delegating to
+ * `MessageListItem` (see the `isDesktop || isMultiSelectMode` branch below),
+ * so every row signal has to be repeated here. Exported so a test can hold it
+ * to the same answers as the desktop mapper.
+ */
+export const swipeableRowData = (thread) => {
+    const suspicious = thread.authenticity?.dkimMismatch === true;
+    return {
+        id: thread.messageId,
+        accountId: thread.accountId,
+        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),
+        suspicious,
+        ...rowSettlement(thread),
+    };
+};
+export const SwipeableMessageRow = ({ thread, mailboxId, isSelected, isFocused, isTabStop, onFocusRow, isChecked, onToggleCheck, onRowSelect, isMultiSelectMode, onLongPress, isDesktop, onDelete, onToggleRead, density, }) => {
+    const [peek, setPeek] = useState("none");
+    const openThread = useOpenThread();
+    const handleAct = useCallback((side) => {
+        navigator.vibrate?.(10);
+        if (side === "trailing") {
+            onDelete(thread.messageId);
+        }
+        else {
+            onToggleRead(thread.messageId, thread.isRead);
+        }
+        setPeek("none");
+    }, [onDelete, onToggleRead, thread.messageId, thread.isRead]);
+    const handleLongPress = useCallback(() => {
+        onLongPress(thread.messageId);
+    }, [onLongPress, thread.messageId]);
+    const handleToggleCheck = useCallback(() => {
+        onToggleCheck(thread.messageId);
+    }, [onToggleCheck, thread.messageId]);
+    const handleOpen = useCallback(() => {
+        openThread({ threadId: thread.threadId, messageId: thread.messageId });
+    }, [openThread, thread.threadId, thread.messageId]);
+    const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
+    if (isDesktop || isMultiSelectMode) {
+        return (_jsx(MessageListItem, { thread: thread, mailboxId: mailboxId, isSelected: isSelected, isFocused: isFocused, isTabStop: isTabStop, onFocusRow: onFocusRow, isChecked: isChecked, onToggleCheck: onToggleCheck, onRowSelect: onRowSelect, isMultiSelectMode: isMultiSelectMode, onLongPress: onLongPress, isDesktop: isDesktop, density: density }));
+    }
+    // The swipe row reads the press as a pointer gesture, and it opens the message
+    // from the release — a `mousedown` handler on the row would already be behind
+    // it. Taking the modified press in the capture phase keeps it away from the
+    // gesture entirely, so a shift- or cmd-click selects instead of starting a
+    // swipe, a long press or an open.
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only intercepts mouse modifiers ahead of the row's own gesture; the row beneath keeps the button semantics and the whole keyboard path
+    _jsx("div", { role: "presentation", onPointerDownCapture: modifierSelect.onMouseDown, onClickCapture: modifierSelect.claimClick, onContextMenu: modifierSelect.onContextMenu, children: _jsx(SwipeableRow, { thread: swipeableRowData(thread), selectionMode: false, checked: false, active: isSelected, peek: peek, onPeek: setPeek, onToggleCheck: handleToggleCheck, onLongPress: handleLongPress, onOpen: handleOpen, onAct: handleAct }) }));
+};

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

@@ -0,0 +1,106 @@
+/**
+ * ThreadListInteraction — the keyboard cursor and multi-selection for a list
+ * that renders its own rows.
+ *
+ * `MessageList` (the mailbox) owns a virtualizer and threads this state through
+ * row props. The brief and Flagged render rows through the kit's section
+ * components, which pass only the thread and its click handler, so the state
+ * reaches the row through context instead. Both drive the same `useListCursor`
+ * and publish the same `MessageListCommands`, so there is one definition of
+ * what j/k, x, shift-arrow and ⌘A do (#149).
+ *
+ * The cursor walks the rows that are actually on screen, read from the DOM. The
+ * brief's sections cap themselves at ten rows behind "Show N more", apply their
+ * own attribute chips, and collapse from their headers — none of which the data
+ * the consumer passed describes. A cursor walking that data steps onto rows that
+ * are not rendered: focus stops moving, the highlight disappears, and the next
+ * verb acts on a message the user cannot see.
+ */
+import { type ThreadRowData, type Verb } from "@remit/ui";
+import { type ReactNode, type RefObject } from "react";
+import type { TriageContextUpdate } from "../../hooks/useTriageLayer";
+import type { MessageListCommands } from "./MessageList";
+import type { MessageRowSelection } from "./MessageRow";
+interface ThreadRowInteraction {
+    focused: boolean;
+    isTabStop: boolean;
+    isDesktop: boolean;
+    selection: MessageRowSelection;
+    onFocusRow: (messageId: string) => void;
+}
+interface ThreadListInteractionValue {
+    rowInteraction: (messageId: string) => ThreadRowInteraction;
+    selectedIds: Set<string>;
+    selectedCount: number;
+    exitSelection: () => void;
+    /**
+     * Runs a verb over the current selection by opening the wizard on it — the
+     * one route every selection action takes, whether the bar or the keyboard
+     * asked for it.
+     */
+    startSelectionVerb: (verb: Verb) => void;
+    /** Rendered rows in display order — the same order a shift-range spans. */
+    orderedIds: string[];
+    /** Whether every rendered row is selected, for a select-all control. */
+    allSelected: boolean;
+    /** Select every rendered row, or clear when they already all are. */
+    toggleAllLoaded: () => void;
+}
+/**
+ * Per-row cursor/selection state, or null outside a provider — the mailbox list
+ * passes the same state as explicit row props.
+ */
+export declare const useThreadRowInteraction: (messageId: string) => ThreadRowInteraction | null;
+/** The list's current selection, for a selection toolbar mounted alongside. */
+export declare const useThreadListSelection: () => Omit<ThreadListInteractionValue, "rowInteraction">;
+/**
+ * How a row was opened. `replace: true` marks a reading-pane preview the cursor
+ * produced rather than a navigation the user asked for, so Back still leaves the
+ * list instead of walking the cursor's path back up it.
+ */
+export interface OpenMessageOptions {
+    replace?: boolean;
+}
+interface ThreadListInteractionProps {
+    selectedMessageId: string | undefined;
+    /**
+     * The rows this list is showing. Read only to name the folder a row is
+     * filed in, which is what decides whether deleting it moves it to Trash or
+     * expunges it — this list spans mailboxes and accounts, so the answer is per
+     * row and there is no route mailbox to take it from (#855).
+     */
+    rows: readonly ThreadRowData[];
+    /** Opens a row — the same navigation a click performs. */
+    onOpen: (messageId: string, options?: OpenMessageOptions) => void;
+    /** Deletes a set of messages. Absent disables the delete key for this list. */
+    onDeleteMessages: (messageIds: string[]) => void;
+    /**
+     * Runs a verb over the selection — which means opening the wizard on it, the
+     * one place a bulk action is reviewed before it reaches the mail server
+     * (#477 1.4). The provider never runs one itself, so no surface can grow a
+     * second unreviewed route to the same verb.
+     */
+    onSelectionVerb: (verb: Verb) => void;
+    isDeleting?: boolean;
+    commandsRef?: RefObject<MessageListCommands | null>;
+    onTriageContextChange?: (context: TriageContextUpdate) => void;
+    children?: ReactNode;
+}
+export declare function ThreadListInteraction({ selectedMessageId, rows, onOpen, onDeleteMessages, onSelectionVerb, isDeleting, commandsRef, onTriageContextChange, children, }: ThreadListInteractionProps): import("react").JSX.Element;
+interface ThreadListSelectionBarProps {
+    /** The view's own name, used until the enclosing header supplies one. */
+    title: string;
+    isDeleting?: boolean;
+}
+/**
+ * The starred list's header, which is also its selection bar — the same
+ * surface the mailbox list and the brief raise, with the same rule: every verb
+ * on it opens the wizard, and the review screen there is what names the action
+ * before it reaches the mail server (#477 1.4).
+ *
+ * Move is not offered here: starred mail spans accounts and mailboxes, and a
+ * move picker needs one account and one source folder to be honest about where
+ * the messages go. Delete and mark-read carry no such scope.
+ */
+export declare function ThreadListSelectionBar({ title, isDeleting, }: ThreadListSelectionBarProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,319 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThreadListInteraction — the keyboard cursor and multi-selection for a list
+ * that renders its own rows.
+ *
+ * `MessageList` (the mailbox) owns a virtualizer and threads this state through
+ * row props. The brief and Flagged render rows through the kit's section
+ * components, which pass only the thread and its click handler, so the state
+ * reaches the row through context instead. Both drive the same `useListCursor`
+ * and publish the same `MessageListCommands`, so there is one definition of
+ * what j/k, x, shift-arrow and ⌘A do (#149).
+ *
+ * The cursor walks the rows that are actually on screen, read from the DOM. The
+ * brief's sections cap themselves at ten rows behind "Show N more", apply their
+ * own attribute chips, and collapse from their headers — none of which the data
+ * the consumer passed describes. A cursor walking that data steps onto rows that
+ * are not rendered: focus stops moving, the highlight disappears, and the next
+ * verb acts on a message the user cannot see.
+ */
+import { SelectionTopBar, useListCursor, } from "@remit/ui";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { useDeleteOutcome } from "../../hooks/useDeleteOutcome";
+import { useFollowFocusOpen } from "../../hooks/useFollowFocusOpen";
+import { useIsDesktop } from "../../hooks/useMediaQuery";
+import { tabStopId } from "../../lib/list-focus";
+import { useListHeaderChrome } from "../../lib/list-header-chrome";
+import { useErrorBanners } from "../ui/ErrorBannerProvider";
+import { DeleteConfirmDialog } from "./DeleteConfirmDialog";
+/** Nothing pending, as a stable identity so the outcome memo does not churn. */
+const NO_TARGETS = [];
+const ThreadListInteractionCtx = createContext(null);
+/**
+ * Per-row cursor/selection state, or null outside a provider — the mailbox list
+ * passes the same state as explicit row props.
+ */
+export const useThreadRowInteraction = (messageId) => {
+    const ctx = useContext(ThreadListInteractionCtx);
+    return ctx ? ctx.rowInteraction(messageId) : null;
+};
+/** The list's current selection, for a selection toolbar mounted alongside. */
+export const useThreadListSelection = () => {
+    const ctx = useContext(ThreadListInteractionCtx);
+    if (!ctx) {
+        throw new Error("useThreadListSelection must be used inside <ThreadListInteraction>");
+    }
+    return ctx;
+};
+const ROW_SELECTOR = "[data-message-id]";
+const readRowIds = (container) => Array.from(container.querySelectorAll(ROW_SELECTOR))
+    .map((row) => row.dataset.messageId)
+    .filter((id) => id !== undefined);
+const sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+/**
+ * The ids of the rows currently in the DOM, in document order, kept in step
+ * with the rendered list. Sections expand, collapse and cap themselves without
+ * the consumer's data changing, so a render pass is not enough of a signal — a
+ * MutationObserver is.
+ */
+const useRenderedRowIds = (containerRef) => {
+    const [rowIds, setRowIds] = useState([]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const sync = () => {
+            const next = readRowIds(container);
+            setRowIds((prev) => (sameIds(prev, next) ? prev : next));
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(container, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [containerRef]);
+    return rowIds;
+};
+export function ThreadListInteraction({ selectedMessageId, rows, onOpen, onDeleteMessages, onSelectionVerb, isDeleting = false, commandsRef, onTriageContextChange, children, }) {
+    const isDesktop = useIsDesktop();
+    const { pushError } = useErrorBanners();
+    const containerRef = useRef(null);
+    const orderedIds = useRenderedRowIds(containerRef);
+    const cursor = useListCursor({
+        orderedIds,
+        isDesktop,
+        initialFocusedId: selectedMessageId,
+    });
+    const { focusedMessageId, setFocusedMessageId, pendingDomFocusRef, cursorMovedByPointerRef, selection, isMultiSelectMode, exitSelection, handleRowSelect, } = cursor;
+    const { selectedIds, selectedCount, isSelected, toggle, select, toggleAll } = selection;
+    const allSelected = orderedIds.length > 0 && orderedIds.every((id) => selectedIds.has(id));
+    const toggleAllLoaded = useCallback(() => {
+        if (orderedIds.length > 0)
+            toggleAll(orderedIds);
+    }, [orderedIds, toggleAll]);
+    // A row that leaves the list — a chip filter, a collapsed section, a
+    // completed delete — cannot stay selected. Survivors keep their selection.
+    const { intersectWith } = selection;
+    useEffect(() => {
+        intersectWith(orderedIds);
+    }, [intersectWith, orderedIds]);
+    // Real browser focus follows the cursor, so Tab, Shift+Tab and the focus ring
+    // agree with what the list highlights.
+    useEffect(() => {
+        const pending = pendingDomFocusRef.current;
+        if (pending === null)
+            return;
+        pendingDomFocusRef.current = null;
+        containerRef.current
+            ?.querySelector(`[data-message-id="${pending}"]`)
+            ?.focus();
+    });
+    const handleFocusRow = useCallback((messageId) => {
+        cursorMovedByPointerRef.current = true;
+        setFocusedMessageId(messageId);
+    }, [cursorMovedByPointerRef, setFocusedMessageId]);
+    const handleLongPress = useCallback((messageId) => {
+        if (!isDesktop)
+            select(messageId);
+    }, [isDesktop, select]);
+    const openFocused = useCallback(() => {
+        if (focusedMessageId)
+            onOpen(focusedMessageId);
+    }, [focusedMessageId, onOpen]);
+    // The reading pane follows the cursor on desktop. Suspended while rows are
+    // selected: the cursor is then picking out a set, and the selection bar — not
+    // a message — is what the user is looking at.
+    const followOpen = useCallback((messageId) => onOpen(messageId, { replace: true }), [onOpen]);
+    useFollowFocusOpen({
+        keyboardFocusedMessageId: cursor.keyboardFocusedMessageId,
+        openMessageId: selectedMessageId,
+        enabled: isDesktop && selectedCount === 0,
+        open: followOpen,
+    });
+    // Pending delete for the row under the cursor, awaiting confirmation. Both
+    // the id and the folder it is filed in are snapshotted at request time, so
+    // neither a cursor move nor a background refresh behind the dialog can
+    // retarget it or change the question it is asking. A delete over a selection
+    // is a bulk action and walks the wizard instead — the same contract the
+    // mailbox list's delete has.
+    const [pendingDelete, setPendingDelete] = useState(null);
+    const { outcome: deleteOutcome, staleFolderLabel, guessedMailboxId, } = useDeleteOutcome(pendingDelete?.targets ?? NO_TARGETS);
+    // A verb, routed the same way the bar routes its own (#477 1.4, #508). Over a
+    // selection every verb opens the wizard, so the keyboard cannot reach a bulk
+    // action the bar would have reviewed. Over a bare cursor only Delete is this
+    // list's, and it keeps its confirmation.
+    const requestVerb = useCallback((verb) => {
+        // The confirmation is already asking about a delete: the keypress belongs
+        // to it. Claiming the press here is what stops a second Delete from
+        // reaching an unconfirmed delete.
+        if (pendingDelete !== null)
+            return true;
+        if (selectedCount > 0) {
+            onSelectionVerb(verb);
+            return true;
+        }
+        if (verb !== "delete" || !focusedMessageId)
+            return false;
+        // A row this list cannot place is a row whose delete cannot be worded,
+        // and a confirmation nobody can answer is worse than no confirmation.
+        // The press is still claimed — handing it back runs the pane's own
+        // unconfirmed delete — and the refusal is said out loud, with the one
+        // control that can actually change the answer.
+        const pending = rows.find((row) => row.id === focusedMessageId);
+        if (!pending?.mailboxId || !pending.accountId) {
+            pushError({
+                title: "Couldn't delete this message",
+                detail: "This list has lost track of which account and folder it is in, so reader can't tell whether deleting it would move it to Trash or erase it. Nothing was deleted.",
+                action: { label: "Reload the list", href: window.location.href },
+            });
+            return true;
+        }
+        setPendingDelete({
+            ids: [focusedMessageId],
+            targets: [
+                { accountId: pending.accountId, mailboxId: pending.mailboxId },
+            ],
+        });
+        return true;
+    }, [
+        pendingDelete,
+        selectedCount,
+        onSelectionVerb,
+        focusedMessageId,
+        rows,
+        pushError,
+    ]);
+    const confirmDelete = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        onDeleteMessages(ids);
+        setPendingDelete(null);
+        exitSelection();
+    }, [onDeleteMessages, exitSelection]);
+    const cancelDelete = useCallback(() => setPendingDelete(null), []);
+    const clearSelectionCommand = useCallback(() => {
+        if (selectedCount === 0)
+            return false;
+        exitSelection();
+        return true;
+    }, [selectedCount, exitSelection]);
+    const hasList = orderedIds.length > 0;
+    useEffect(() => {
+        if (!commandsRef)
+            return;
+        if (!hasList) {
+            commandsRef.current = null;
+            return;
+        }
+        commandsRef.current = {
+            focusNext: cursor.focusNext,
+            focusPrevious: cursor.focusPrevious,
+            focusFirst: cursor.focusFirst,
+            focusLast: cursor.focusLast,
+            openFocused,
+            toggleSelect: cursor.toggleFocusedSelection,
+            extendSelectDown: cursor.extendRangeDown,
+            extendSelectUp: cursor.extendRangeUp,
+            selectAll: cursor.selectAllLoaded,
+            clearSelection: clearSelectionCommand,
+            requestVerb,
+            // The brief and Flagged have no density switch; the key stays inert here
+            // rather than moving a control these views do not offer.
+            toggleDensity: () => undefined,
+        };
+        return () => {
+            commandsRef.current = null;
+        };
+    }, [
+        commandsRef,
+        hasList,
+        cursor.focusNext,
+        cursor.focusPrevious,
+        cursor.focusFirst,
+        cursor.focusLast,
+        cursor.toggleFocusedSelection,
+        cursor.extendRangeDown,
+        cursor.extendRangeUp,
+        cursor.selectAllLoaded,
+        openFocused,
+        clearSelectionCommand,
+        requestVerb,
+    ]);
+    const selectedIdList = useMemo(() => Array.from(selectedIds), [selectedIds]);
+    const confirmOpen = pendingDelete !== null;
+    useEffect(() => {
+        onTriageContextChange?.({
+            focusedMessageId,
+            selectedIds: selectedIdList,
+            orderedIds,
+            hasList,
+        });
+    }, [
+        onTriageContextChange,
+        focusedMessageId,
+        selectedIdList,
+        orderedIds,
+        hasList,
+    ]);
+    const tabStop = tabStopId(orderedIds, focusedMessageId);
+    const value = useMemo(() => ({
+        selectedIds,
+        selectedCount,
+        exitSelection,
+        startSelectionVerb: onSelectionVerb,
+        orderedIds,
+        allSelected,
+        toggleAllLoaded,
+        rowInteraction: (messageId) => ({
+            focused: messageId === focusedMessageId,
+            isTabStop: messageId === tabStop,
+            isDesktop,
+            onFocusRow: handleFocusRow,
+            selection: {
+                isChecked: isSelected(messageId),
+                onToggleCheck: toggle,
+                onRowSelect: handleRowSelect,
+                isMultiSelectMode,
+                onLongPress: handleLongPress,
+            },
+        }),
+    }), [
+        selectedIds,
+        selectedCount,
+        exitSelection,
+        onSelectionVerb,
+        orderedIds,
+        allSelected,
+        toggleAllLoaded,
+        focusedMessageId,
+        tabStop,
+        isDesktop,
+        handleFocusRow,
+        isSelected,
+        toggle,
+        handleRowSelect,
+        isMultiSelectMode,
+        handleLongPress,
+    ]);
+    return (_jsxs(ThreadListInteractionCtx.Provider, { value: value, children: [_jsx("div", { ref: containerRef, className: "contents", children: children }), _jsx(DeleteConfirmDialog, { isOpen: confirmOpen, messageIds: pendingDelete?.ids ?? [], outcome: deleteOutcome, accountId: pendingDelete?.targets[0]?.accountId, staleFolderLabel: staleFolderLabel, guessedMailboxId: guessedMailboxId, isDeleting: isDeleting, onConfirm: confirmDelete, onCancel: cancelDelete })] }));
+}
+/**
+ * The starred list's header, which is also its selection bar — the same
+ * surface the mailbox list and the brief raise, with the same rule: every verb
+ * on it opens the wizard, and the review screen there is what names the action
+ * before it reaches the mail server (#477 1.4).
+ *
+ * Move is not offered here: starred mail spans accounts and mailboxes, and a
+ * move picker needs one account and one source folder to be honest about where
+ * the messages go. Delete and mark-read carry no such scope.
+ */
+export function ThreadListSelectionBar({ title, isDeleting, }) {
+    const chrome = useListHeaderChrome();
+    const { selectedCount, exitSelection, startSelectionVerb, orderedIds, allSelected, toggleAllLoaded, } = useThreadListSelection();
+    return (_jsx(SelectionTopBar, { title: chrome.title || title, navSlot: chrome.navSlot, titleMeta: chrome.titleMeta, searchSlot: chrome.searchSlot, searchField: chrome.searchField, idleSlot: chrome.makeFilterSlot, count: selectedCount, onCancel: exitSelection, onDelete: () => startSelectionVerb("delete"), onMarkRead: () => startSelectionVerb("markRead"), isBusy: isDeleting, selectAll: orderedIds.length > 0
+            ? {
+                checked: allSelected,
+                indeterminate: selectedCount > 0 && !allSelected,
+                onChange: toggleAllLoaded,
+            }
+            : undefined }));
+}

package/dist/src/components/mail/bulk-run-state.d.ts

@@ -0,0 +1,37 @@
+import type { RunState } from "@remit/ui";
+import type { BulkRunOutcome } from "../../lib/bulk-actions";
+/** What the run screen knows about a chunked bulk run it is reporting on. */
+export interface BulkRunReading {
+    /** The count the run was started against. */
+    matched: number;
+    /** Set once the run has ended, for any reason. */
+    outcome: BulkRunOutcome | undefined;
+    /**
+     * Why the commit never started, when the reason is one the same commit cannot
+     * get past (#522).
+     */
+    failureReason: string | undefined;
+    /** Ids covered so far, read off the progress bar while the run is going. */
+    progressDone: number;
+}
+export interface BulkRunReport {
+    state: RunState;
+    matched: number;
+    applied: number;
+    failed: number;
+    /** Ids the run leaves unconfirmed; the screen resolves them to rows. */
+    failedIds: readonly string[];
+    failureReason?: string;
+}
+/**
+ * What the run screen says a bulk run did.
+ *
+ * Stopping is read before counting, because a stop is not a failure however
+ * little it reached (#113). Pressing Stop during the first batch — the only
+ * batch a selection of 100 or fewer has — leaves `done` at zero while the
+ * server has most likely applied all of them, and answering that with
+ * "Couldn't start deleting / Nothing has changed" is both alarming and wrong.
+ * Only a run that errored before anything landed has nothing to report but the
+ * failure.
+ */
+export declare const bulkRunReport: ({ matched, outcome, failureReason, progressDone, }: BulkRunReading) => BulkRunReport;