@remit/web-client 0.0.325 → 0.0.327

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Button, cn, ErrorState, FolderTreePicker, PopoverMenuPortal, useOverlayScope, } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { FolderInput } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Drawer } from "vaul";
+import { useFolderAppointments } from "../../hooks/useArchiveMailbox";
+import { useCreateMailbox } from "../../hooks/useCreateMailbox";
+import { useFolderLabelTranslator } from "../../hooks/useFolderLabelTranslator";
+import { useIsDesktop } from "../../hooks/useMediaQuery";
+import { buildMoveOptions, folderDelimiter } from "../../lib/move-options";
+const TRIGGER_BASE = "inline-flex items-center justify-center transition-colors";
+const ICON_TRIGGER = cn(TRIGGER_BASE, "min-h-11 min-w-11 rounded hover:bg-surface-raised");
+const COMPACT_TRIGGER = cn(TRIGGER_BASE, "min-h-11 gap-1.5 px-3 rounded text-sm font-medium hover:bg-surface-raised");
+export const MoveToTrigger = ({ accountId, currentMailboxId, onMove, disabled = false, disabledHint, variant = "icon-only", label, defaultOpen = false, }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [pickedId, setPickedId] = useState();
+    const isDesktop = useIsDesktop();
+    const containerRef = useRef(null);
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    const triggerLabel = label ?? "Move to folder";
+    const popoverId = useId();
+    const translator = useFolderLabelTranslator();
+    const { data: mailboxesResponse, isLoading, isError, error, refetch, } = useQuery({
+        ...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+        // Same staleTime as the sidebar query — mailboxes change rarely and
+        // invalidations are explicit, so we share the cache entry rather than
+        // triggering a fresh fetch every time the picker opens.
+        staleTime: Infinity,
+        enabled: isOpen,
+    });
+    const folderAppointments = useFolderAppointments(accountId);
+    const { createFolderIn } = useCreateMailbox(accountId);
+    const options = useMemo(() => buildMoveOptions({
+        mailboxes: mailboxesResponse?.items ?? [],
+        folderAppointments,
+        currentMailboxId,
+        translator,
+    }), [
+        mailboxesResponse?.items,
+        folderAppointments,
+        currentMailboxId,
+        translator,
+    ]);
+    const delimiter = folderDelimiter(mailboxesResponse?.items ?? []);
+    const picked = options.find((option) => option.id === pickedId);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setPickedId(undefined);
+        // The panel is about to unmount. Where the keyboard was inside it, hand
+        // focus back to the trigger rather than dropping it on the body; where it
+        // was elsewhere — a press that landed outside — leave it where it is.
+        const active = document.activeElement;
+        if (active && panelRef.current?.contains(active)) {
+            triggerRef.current?.focus();
+        }
+    }, []);
+    // Tapping a folder both picks it and opens it, so the move waits for a
+    // confirmation — otherwise the first tap would fire before the user could
+    // reach anything nested inside it.
+    const handleMove = useCallback(() => {
+        if (!picked)
+            return;
+        close();
+        onMove(picked.id);
+    }, [picked, close, onMove]);
+    // The picker owns Escape while it is open (#732): on the shared overlay stack,
+    // so the triage layer underneath never maps the same press to `back` and
+    // closes the conversation with it. A second Escape closes as usual. Both
+    // surfaces register — the phone's vaul drawer is a modal like any other, and
+    // a narrow window with a keyboard attached is an ordinary way to meet it.
+    useOverlayScope({ id: "move-to", open: isOpen, answers: { back: close } });
+    // Desktop popover: dismiss on outside click.
+    useEffect(() => {
+        if (!isOpen || !isDesktop)
+            return;
+        const handlePointer = (event) => {
+            const target = event.target;
+            if (containerRef.current?.contains(target))
+                return;
+            // The picker renders through a portal into document.body, so it
+            // sits outside the trigger's subtree — count presses on it as
+            // inside, or picking a folder would close the picker first.
+            if (panelRef.current?.contains(target))
+                return;
+            close();
+        };
+        document.addEventListener("mousedown", handlePointer);
+        return () => document.removeEventListener("mousedown", handlePointer);
+    }, [isOpen, isDesktop, close]);
+    const anchorRect = () => containerRef.current?.getBoundingClientRect() ?? null;
+    const isTriggerDisabled = disabled || !!disabledHint;
+    const TriggerButton = (_jsxs("button", { type: "button", ref: triggerRef, onClick: (event) => {
+            event.stopPropagation();
+            if (isTriggerDisabled)
+                return;
+            setIsOpen((prev) => !prev);
+        }, "aria-label": triggerLabel, "aria-haspopup": isDesktop ? "tree" : "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? popoverId : undefined, title: disabledHint, className: variant === "icon-only" ? ICON_TRIGGER : COMPACT_TRIGGER, children: [_jsx(FolderInput, { className: variant === "icon-only" ? "size-5" : "size-4" }), variant === "compact" && _jsx("span", { className: "hidden sm:inline", children: "Move" })] }));
+    const pickerBody = isLoading ? (_jsx("div", { className: "px-3 py-5 text-sm text-fg-muted", children: "Loading folders\u2026" })) : isError ? (_jsx("div", { className: "p-3", children: _jsx(ErrorState, { variant: "inline", title: "Couldn't load folders", error: error, onRetry: () => refetch() }) })) : (_jsx(FolderTreePicker, { folders: options, selectedId: pickedId, delimiter: delimiter, onSelect: setPickedId, onCreateFolder: createFolderIn, onCancel: close, 
+        // The desktop panel is portalled onto the body, so Tab from the
+        // trigger would otherwise walk on to the next toolbar button. The
+        // drawer runs its own focus and must not raise a phone keyboard.
+        autoFocusFilter: isDesktop, labels: {
+            filterPlaceholder: "Filter folders…",
+            filterAriaLabel: "Filter folders",
+        } }));
+    const confirmBar = picked && (_jsx("div", { className: "shrink-0 border-t border-line p-2", children: _jsx(Button, { variant: "primary", onClick: handleMove, className: "h-11 w-full font-semibold", children: `Move to ${picked.label}` }) }));
+    if (!isDesktop) {
+        return (_jsxs(_Fragment, { children: [TriggerButton, _jsx(Drawer.Root, { open: isOpen, onOpenChange: (next) => (next ? setIsOpen(true) : close()), children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Overlay, { className: "fixed inset-0 z-40 bg-black/40" }), _jsxs(Drawer.Content, { className: "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-lg bg-canvas pb-[env(safe-area-inset-bottom,0px)]", style: { maxHeight: "85dvh" }, id: popoverId, children: [_jsx(Drawer.Handle, { className: "mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-subtle/30" }), _jsx(Drawer.Title, { className: "px-4 py-2 text-base font-semibold border-b border-line", children: "Move to folder" }), _jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: pickerBody }), confirmBar] })] }) })] }));
+    }
+    return (_jsxs("div", { ref: containerRef, className: "relative inline-block", children: [TriggerButton, _jsx(PopoverMenuPortal, { open: isOpen, align: "end", panelRef: panelRef, getAnchor: anchorRect, children: _jsxs("div", { id: popoverId, ref: panelRef, className: cn("w-72 max-h-96 flex flex-col", "bg-surface border border-line rounded-md shadow-lg"), children: [pickerBody, confirmBar] }) })] }));
+};

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

@@ -0,0 +1 @@
+export declare function NavMenuButton(): import("react").JSX.Element | null;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NavMenuButton — the hamburger that opens the nav slide-over.
+ *
+ * The brief and inboxes get this from the shared `MailHeader`; the outbox and
+ * drafts render their own pane headers, so they mount this to keep the mobile
+ * nav reachable. It only appears when the nav is a slide-over (narrow widths);
+ * where the nav is a persistent pane, there is nothing to open.
+ */
+import { Button, useAppShellLayout } from "@remit/ui";
+import { Menu } from "lucide-react";
+export function NavMenuButton() {
+    const layout = useAppShellLayout();
+    if (!layout || layout.showNavPane)
+        return null;
+    return (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(Menu, { className: "size-4" }), onClick: layout.openNav, "aria-label": "Open folders", className: "-ml-1 shrink-0" }));
+}

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

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+interface OutboxPaneProps {
+    /** The open message, as the address states it. */
+    outboxMessageId: string | undefined;
+    children: ReactNode;
+}
+declare function OutboxPaneProvider({ outboxMessageId: selectedMessageId, children, }: OutboxPaneProps): import("react").JSX.Element;
+/**
+ * Outbox list with datum bar header. Mount in the `list` slot of `AppShellSlotted`.
+ */
+declare function OutboxList(): import("react").JSX.Element;
+/**
+ * Outbox reading pane. Mount in the `reading` slot of `AppShellSlotted`.
+ * Only rendered ≥ 1024px.
+ */
+declare function OutboxReading(): import("react").JSX.Element;
+/**
+ * Phone view: detail when a message is selected, or the list.
+ * Mount in the `list` slot of `AppShellSlotted` on single-pane tiers.
+ */
+declare function OutboxPhone(): import("react").JSX.Element;
+declare const OutboxPane: typeof OutboxPaneProvider & {
+    List: typeof OutboxList;
+    Reading: typeof OutboxReading;
+    Phone: typeof OutboxPhone;
+};
+export { OutboxPane };

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

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OutboxPane — compound component for the outbox view (/mail/outbox route).
+ *
+ * Usage in the list layout route:
+ *
+ *   <OutboxPane outboxMessageId={useOutboxDraftId()}>
+ *     <MailShell
+ *       list={<OutboxPane.List />}
+ *       reading={<Outlet />}
+ *     />
+ *   </OutboxPane>
+ *
+ * On phone/tablet, use `<OutboxPane.Phone />` instead of the slot sub-views.
+ */
+import { outboxDetailOperationsDeleteOutboxMessageMutation, outboxDetailOperationsSendOutboxMessageMutation, outboxOperationsListOutboxMessagesOptions, outboxOperationsListOutboxMessagesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { cn, LIST_ROW_SELECTOR, OutboxRow, PaneHeader, ReadingPaneEmpty, useRovingFocus, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertCircle, AlertTriangle, ArrowLeft, CheckCircle, Clock, Loader2, Send, } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo, useRef, } from "react";
+import { useSearchTokenContext } from "../../hooks/useSearchTokenContext";
+import { formatDate as formatLocaleDate, toDate } from "../../lib/format";
+import { useMailContext } from "../../lib/mail-context";
+import { matchesOutboxSearch, outboxQueryIsUnsupported, } from "../../lib/outbox-search";
+import { isOutboxListRow, showsLastError } from "../../lib/outbox-status";
+import { normalizeSearchQuery } from "../../lib/search-query";
+import { parseSearchTokens } from "../../lib/search-tokens";
+import { useCloseOutboxDraft, useEditDraft, useOpenOutboxDraft, } from "../../routing";
+import { useErrorBanners } from "../ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "../ui/error-banners";
+import { MessageBody } from "./MessageBody";
+import { NavMenuButton } from "./NavMenuButton";
+/* ------------------------------------------------------------------ */
+/* Helpers (shared between List, Reading, Phone sub-views)             */
+/* ------------------------------------------------------------------ */
+const STATUS_CONFIG = {
+    queued: {
+        icon: Clock,
+        label: "Queued",
+        className: "text-warning",
+    },
+    sending: {
+        icon: Loader2,
+        label: "Sending…",
+        className: "text-accent-2",
+    },
+    sent: {
+        icon: CheckCircle,
+        label: "Sent",
+        className: "text-positive",
+    },
+    unfiled: {
+        icon: AlertTriangle,
+        label: "Sent, not filed",
+        className: "text-warning",
+    },
+    failed: {
+        icon: AlertCircle,
+        label: "Failed",
+        className: "text-danger",
+    },
+    blocked: {
+        icon: AlertTriangle,
+        label: "Blocked",
+        className: "text-warning",
+    },
+};
+const formatDate = (timestamp) => {
+    const date = toDate(timestamp);
+    const isToday = date.toDateString() === new Date().toDateString();
+    return isToday
+        ? formatLocaleDate(timestamp, { hour: "numeric", minute: "2-digit" })
+        : formatLocaleDate(timestamp, { month: "short", day: "numeric" });
+};
+const formatDateFull = (timestamp) => formatLocaleDate(timestamp, { dateStyle: "medium", timeStyle: "short" });
+const formatRecipients = (message) => {
+    const recipients = message.toAddresses ?? [];
+    if (recipients.length === 0)
+        return "No recipients";
+    if (recipients.length === 1)
+        return recipients[0];
+    return `${recipients[0]} +${recipients.length - 1}`;
+};
+/**
+ * What an empty outbox list says. A query that filtered everything out reads
+ * differently from an empty outbox, and a query the outbox cannot serve at all
+ * has to say so rather than look like a search that found nothing.
+ */
+const outboxEmptyMessage = (hasQuery, unsupportedQuery) => {
+    if (unsupportedQuery)
+        return "The outbox cannot filter on those terms";
+    if (hasQuery)
+        return "No matching outbox messages";
+    return "No outbox messages";
+};
+const OutboxPaneCtx = createContext(null);
+function useOutboxPane() {
+    const ctx = useContext(OutboxPaneCtx);
+    if (!ctx)
+        throw new Error("OutboxPane.* must be used inside <OutboxPane>");
+    return ctx;
+}
+function OutboxPaneProvider({ outboxMessageId: selectedMessageId, children, }) {
+    const openDraft = useOpenOutboxDraft();
+    const closeDraft = useCloseOutboxDraft();
+    const { data: outboxResponse, isLoading } = useQuery(outboxOperationsListOutboxMessagesOptions());
+    // The top bar's field scopes to this view (`in:outbox`), so a query typed
+    // here narrows these rows. The list is small and already fully loaded, so
+    // the narrowing is a filter over what is in hand — see lib/outbox-search.ts
+    // for which fields it matches and why the filter tokens are not honored.
+    // The query is parsed the same way every other engine parses it, and only
+    // the free text is used: `Q3 from:billing` still matches on "Q3" rather
+    // than searching the rows for the literal string "from:billing".
+    const { searchQuery } = useMailContext();
+    const tokenContext = useSearchTokenContext();
+    const normalizedQuery = normalizeSearchQuery(searchQuery);
+    const parsedQuery = parseSearchTokens(normalizedQuery, tokenContext);
+    const hasQuery = normalizedQuery.length > 0;
+    const unsupportedQuery = outboxQueryIsUnsupported(parsedQuery);
+    // Outbox surfaces in-flight + actionable rows only. `draft` lives in the
+    // Drafts view; `sent` rows are deleted by the IMAP append handler once
+    // the message lands in Sent (issue #178), but we filter defensively so a
+    // successfully-sent row never lingers in the Outbox list even if APPEND
+    // has not completed yet (issue #193).
+    const messages = useMemo(() => unsupportedQuery
+        ? []
+        : (outboxResponse?.items ?? [])
+            .filter((item) => isOutboxListRow(item.status))
+            .filter((item) => matchesOutboxSearch(item, parsedQuery.freeText)), [outboxResponse, parsedQuery.freeText, unsupportedQuery]);
+    const selectedMessage = useMemo(() => messages.find((m) => m.outboxMessageId === selectedMessageId), [messages, selectedMessageId]);
+    const ctx = {
+        messages,
+        hasQuery,
+        unsupportedQuery,
+        isLoading,
+        selectedMessageId,
+        selectedMessage,
+        onOpenMessage: openDraft,
+        onCloseMessage: closeDraft,
+    };
+    return (_jsx(OutboxPaneCtx.Provider, { value: ctx, children: children }));
+}
+function OutboxMessageRow({ message, isSelected, onSelect, }) {
+    const queryClient = useQueryClient();
+    const editDraft = useEditDraft();
+    const { pushError } = useErrorBanners();
+    const invalidateOutbox = useCallback(() => {
+        queryClient.invalidateQueries({
+            queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+        });
+    }, [queryClient]);
+    const retryMutation = useMutation({
+        ...outboxDetailOperationsSendOutboxMessageMutation(),
+        onSuccess: invalidateOutbox,
+        onError: (error) => {
+            // A failed retry must not look successful — surface it. A fatal 5xx
+            // also escalates through the global MutationCache.onError sink.
+            pushError(buildMutationErrorBanner("Couldn't resend message", "The message wasn't sent.", error));
+        },
+    });
+    const deleteMutation = useMutation({
+        ...outboxDetailOperationsDeleteOutboxMessageMutation(),
+        onSuccess: invalidateOutbox,
+        onError: (error) => {
+            pushError(buildMutationErrorBanner("Couldn't delete message", "The message wasn't deleted.", error));
+        },
+    });
+    const status = message.status;
+    if (!STATUS_CONFIG[status])
+        return null;
+    const showError = showsLastError(message.status);
+    return (_jsx(OutboxRow, { recipients: formatRecipients(message), subject: message.subject || "", time: formatDate(message.sentAt ?? message.updatedAt), status: status, error: showError ? (message.lastError ?? undefined) : undefined, selected: isSelected, onSelect: onSelect, onRetry: status === "failed"
+            ? () => retryMutation.mutate({
+                path: { outboxMessageId: message.outboxMessageId },
+            })
+            : undefined, retrying: retryMutation.isPending, onEdit: () => editDraft(message.outboxMessageId), onDelete: () => deleteMutation.mutate({
+            path: { outboxMessageId: message.outboxMessageId },
+        }), deleting: deleteMutation.isPending }));
+}
+function OutboxMessageDetail({ message, onBack }) {
+    const status = message.status;
+    const config = STATUS_CONFIG[status];
+    const StatusIcon = config?.icon ?? Send;
+    const sentLabel = message.sentAt
+        ? formatDateFull(message.sentAt)
+        : formatDateFull(message.updatedAt);
+    return (_jsxs("div", { className: "h-full overflow-y-auto bg-canvas", children: [_jsxs("div", { className: "border-b border-line p-4", children: [onBack && (_jsxs("button", { type: "button", onClick: onBack, className: "mb-3 inline-flex items-center gap-1 text-sm text-fg-muted hover:text-fg", children: [_jsx(ArrowLeft, { className: "size-4" }), _jsx("span", { children: "Back" })] })), _jsx("h1", { className: "text-xl font-semibold mb-3", children: message.subject || "(No subject)" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-fg-muted shrink-0 w-12", children: "From:" }), _jsx("span", { className: "text-fg", children: message.fromName
+                                            ? `${message.fromName} <${message.fromAddress}>`
+                                            : message.fromAddress })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-fg-muted shrink-0 w-12", children: "To:" }), _jsx("span", { className: "text-fg", children: (message.toAddresses ?? []).join(", ") })] }), message.ccAddresses && message.ccAddresses.length > 0 && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-fg-muted shrink-0 w-12", children: "Cc:" }), _jsx("span", { className: "text-fg", children: message.ccAddresses.join(", ") })] })), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-fg-muted shrink-0 w-12", children: "Date:" }), _jsx("span", { className: "text-fg", children: sentLabel })] }), config && (_jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(StatusIcon, { className: cn("size-4", config.className, status === "sending" && "animate-spin") }), _jsx("span", { className: cn("text-xs font-medium", config.className), children: config.label }), showsLastError(message.status) && message.lastError && (_jsxs("span", { className: "text-xs text-fg-muted", children: ["\u2014 ", message.lastError] }))] }))] })] }), _jsx("div", { className: "p-4", children: _jsx(MessageBody, { html: message.htmlBody, text: message.textBody }) })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Sub-views                                                            */
+/* ------------------------------------------------------------------ */
+/**
+ * Outbox list with datum bar header. Mount in the `list` slot of `AppShellSlotted`.
+ */
+function OutboxList() {
+    const { messages, hasQuery, unsupportedQuery, isLoading, selectedMessageId, onOpenMessage, } = useOutboxPane();
+    const listRef = useRef(null);
+    useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center bg-canvas", children: _jsx("span", { className: "text-fg-muted", children: "Loading..." }) }));
+    }
+    if (messages.length === 0) {
+        return (_jsx("div", { className: "flex h-full bg-surface", children: _jsx(ReadingPaneEmpty, { message: outboxEmptyMessage(hasQuery, unsupportedQuery), showHints: false }) }));
+    }
+    return (_jsxs("div", { className: "h-full flex flex-col bg-canvas", children: [_jsx(OutboxListHeader, { count: messages.length }), _jsx("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: messages.map((message) => (_jsx(OutboxMessageRow, { message: message, isSelected: selectedMessageId === message.outboxMessageId, onSelect: () => onOpenMessage(message.outboxMessageId) }, message.outboxMessageId))) })] }));
+}
+function OutboxListHeader({ count }) {
+    return (_jsx(PaneHeader, { title: "Outbox", leading: _jsx(NavMenuButton, {}), children: _jsxs("span", { className: "shrink-0 text-2xs text-fg-subtle", children: [count, " ", count === 1 ? "message" : "messages"] }) }));
+}
+/**
+ * Outbox reading pane. Mount in the `reading` slot of `AppShellSlotted`.
+ * Only rendered ≥ 1024px.
+ */
+function OutboxReading() {
+    const { selectedMessage } = useOutboxPane();
+    return (_jsxs("section", { className: "flex h-full w-full min-w-0 flex-col bg-canvas", children: [_jsx(PaneHeader, {}), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: selectedMessage ? (_jsx(OutboxMessageDetail, { message: selectedMessage })) : (_jsx(ReadingPaneEmpty, { message: "Select a message to read", showHints: false })) })] }));
+}
+/**
+ * Phone view: detail when a message is selected, or the list.
+ * Mount in the `list` slot of `AppShellSlotted` on single-pane tiers.
+ */
+function OutboxPhone() {
+    const { messages, hasQuery, unsupportedQuery, isLoading, selectedMessageId, selectedMessage, onOpenMessage, onCloseMessage, } = useOutboxPane();
+    const listRef = useRef(null);
+    useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center bg-canvas", children: _jsx("span", { className: "text-fg-muted", children: "Loading..." }) }));
+    }
+    if (selectedMessage) {
+        return (_jsx(OutboxMessageDetail, { message: selectedMessage, onBack: onCloseMessage }));
+    }
+    if (messages.length === 0) {
+        return (_jsx("div", { className: "flex h-full bg-surface", children: _jsx(ReadingPaneEmpty, { message: outboxEmptyMessage(hasQuery, unsupportedQuery), showHints: false }) }));
+    }
+    return (_jsxs("div", { className: "h-full flex flex-col bg-canvas", children: [_jsx(OutboxListHeader, { count: messages.length }), _jsx("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: messages.map((message) => (_jsx(OutboxMessageRow, { message: message, isSelected: selectedMessageId === message.outboxMessageId, onSelect: () => onOpenMessage(message.outboxMessageId) }, message.outboxMessageId))) })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Compound component assembly                                          */
+/* ------------------------------------------------------------------ */
+const OutboxPane = Object.assign(OutboxPaneProvider, {
+    List: OutboxList,
+    Reading: OutboxReading,
+    Phone: OutboxPhone,
+});
+export { OutboxPane };

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

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+interface PullToRefreshProps {
+    accountId: string;
+    children: ReactElement;
+}
+/**
+ * Binds the kit pull-to-refresh gesture to a mailbox sync for the active
+ * account: a pull triggers the sync and the in-flight state suspends the
+ * gesture until it settles.
+ */
+export declare const PullToRefresh: ({ accountId, children }: PullToRefreshProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PullToRefresh as KitPullToRefresh } from "@remit/ui";
+import { useTriggerSync } from "../../hooks/useTriggerSync";
+/**
+ * Binds the kit pull-to-refresh gesture to a mailbox sync for the active
+ * account: a pull triggers the sync and the in-flight state suspends the
+ * gesture until it settles.
+ */
+export const PullToRefresh = ({ accountId, children }) => {
+    const { triggerAsync, isPending } = useTriggerSync(accountId);
+    return (_jsx(KitPullToRefresh, { onRefresh: triggerAsync, isRefreshing: isPending, children: children }));
+};

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

@@ -0,0 +1,18 @@
+interface RawMessageViewProps {
+    /** The message whose raw RFC822/MIME source to fetch and display. */
+    messageId: string;
+    /**
+     * Only fetch when the raw view is actually visible. The expanded card
+     * mounts this lazily, but gating on `enabled` keeps the request from
+     * firing if a parent ever renders it ahead of time.
+     */
+    enabled?: boolean;
+}
+/**
+ * Render the raw RFC822/MIME source (headers + body) of a message in a
+ * scrollable monospace block. Distinguishes loading / failed / loaded so an
+ * empty raw body is never confused with a fetch failure
+ * (memory: feedback_never_hide_failure).
+ */
+export declare const RawMessageView: ({ messageId, enabled, }: RawMessageViewProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { messageOperationsGetRawMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ErrorState } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+const LoadingSkeleton = () => (
+// biome-ignore lint/a11y/useSemanticElements: <div> with role="status" preserves block layout; <output> is inline
+_jsxs("div", { className: "animate-pulse space-y-2", role: "status", "aria-label": "Loading raw email", children: [_jsx("div", { className: "h-4 bg-surface-sunken rounded w-full" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-11/12" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-5/6" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-3/4" })] }));
+/**
+ * Render the raw RFC822/MIME source (headers + body) of a message in a
+ * scrollable monospace block. Distinguishes loading / failed / loaded so an
+ * empty raw body is never confused with a fetch failure
+ * (memory: feedback_never_hide_failure).
+ */
+export const RawMessageView = ({ messageId, enabled = true, }) => {
+    const { data, isLoading, isError, error, refetch } = useQuery({
+        ...messageOperationsGetRawMessageOptions({ path: { messageId } }),
+        enabled,
+    });
+    if (isLoading) {
+        return (_jsx("div", { className: "message-body", children: _jsx(LoadingSkeleton, {}) }));
+    }
+    if (isError) {
+        return (_jsx("div", { className: "message-body", children: _jsx(ErrorState, { variant: "inline", title: "Couldn't load the raw email", error: error, onRetry: () => refetch() }) }));
+    }
+    const raw = data?.raw ?? "";
+    if (raw === "") {
+        return (_jsx("div", { className: "message-body", children: _jsx("p", { className: "text-fg-muted text-sm italic", children: "No raw source available for this message." }) }));
+    }
+    return (_jsx("div", { className: "message-body", children: _jsx("pre", { className: "email-text whitespace-pre-wrap break-words text-sm leading-relaxed bg-surface-sunken rounded-md p-3 max-h-[32rem] overflow-auto", children: raw }) }));
+};

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

@@ -0,0 +1,39 @@
+import type { RemitImapCanonicalMailboxRole } from "@remit/api-http-client/types.gen.ts";
+import { type PromptAction, type PromptReason } from "@remit/ui";
+import { type ReactNode } from "react";
+export interface AppointmentRequest {
+    accountId: string;
+    role: RemitImapCanonicalMailboxRole;
+    /** From the refusal that opened this, never re-derived from live state. */
+    reason: PromptReason;
+    action: PromptAction;
+    /** `unconfirmed`: the folder reader guessed. Filled from `/config` if absent. */
+    trashFolderLabel?: string;
+    /** `stale`: the folder that vanished. Filled from `/config` if absent. */
+    staleFolderLabel?: string;
+    guessedMailboxId?: string;
+    /**
+     * Re-issues the caller's own action once the folder is appointed. The caller
+     * owns it so its optimistic and cache machinery is not duplicated here — and
+     * so a chunked run replays the whole original selection, not the chunk the
+     * server happened to refuse.
+     */
+    onAppointed: () => Promise<void>;
+}
+interface RoleAppointmentPromptContextValue {
+    requestAppointment: (request: AppointmentRequest) => void;
+}
+/**
+ * The appointment ceremony, mounted once and reached from either entry path.
+ * It owns both writes' order (D16 item 1): appoint, wait for the 200,
+ * invalidate and await `/config`, then re-issue the action that was refused.
+ */
+export declare const RoleAppointmentPromptProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+/**
+ * Opens the appointment ceremony for a refused action. The caller keeps the
+ * replay, so the action that was stopped is the action that runs.
+ */
+export declare const useRoleAppointmentPrompt: () => RoleAppointmentPromptContextValue;
+export {};