@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/compose/ComposeProvider.d.ts

@@ -0,0 +1,38 @@
+import type { ReplyMode } from "../../routing";
+/**
+ * What a composer opened on. The three ways to answer a message are the path
+ * segment `$mode` verbatim, so the address and the form say one word each
+ * rather than translating between two vocabularies.
+ */
+export type ComposeMode = ReplyMode | "new";
+/**
+ * A message on its way out outlives the composer that wrote it: the surface
+ * closes on Send and the outbox row is still queued. So the watch sits above
+ * every composer, and is the only thing here.
+ *
+ * Which draft is being written, and whether a composer is on screen at all, are
+ * the address's answers — `useComposeDraftId` and `useIsComposing`. A second
+ * copy here is what let a reply's draft turn up in the next new message.
+ */
+type InsertIntoReply = (text: string) => void;
+interface ComposeContextValue {
+    startSendPolling: (outboxMessageId: string) => void;
+    insertIntoOpenReply: (sourceMessageId: string, text: string) => boolean;
+    registerOpenReply: (sourceMessageId: string, insert: InsertIntoReply) => () => void;
+}
+/**
+ * A send that lands is filed and then forgotten: the worker APPENDs the message
+ * to Sent and drops the outbox row, so the row's absence is the settled state
+ * and the 404 is the confirmation.
+ *
+ * Only the 404 is this call site's to own. A 401 or a 403 here is a session that
+ * lapsed under a send, which the app owes the user an answer about.
+ */
+export declare const OUTBOX_ROW_META: {
+    softErrorStatuses: number[];
+};
+export declare const ComposeProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react").JSX.Element;
+export declare const useCompose: () => ComposeContextValue;
+export {};

package/dist/src/components/compose/ComposeProvider.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { outboxDetailOperationsGetOutboxMessageOptions, outboxOperationsListOutboxMessagesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { isNotFound, softErrorStatuses } from "../../lib/error-classifier";
+const ComposeContext = createContext(undefined);
+const POLL_INTERVAL_MS = 2000;
+const MAX_POLL_DURATION_MS = 60_000;
+/**
+ * `sent` is not one of these. It is the window between SMTP handing the message
+ * over and the APPEND either filing it — row deleted, 404 — or settling it
+ * `unfiled`, and the outbox list renders no `sent` row (`isOutboxListRow`). A
+ * watch that stopped there invalidated the list over a row nothing displays and
+ * never asked again, so the `unfiled` a beat later reached no screen: #824's
+ * message the sender can reach in no view, arrived at from the client's side.
+ * A row stranded at `sent` by a delete that failed polls to the cap below,
+ * which is what the cap is for.
+ */
+const isSettledStatus = (status) => status === "unfiled" || status === "failed" || status === "blocked";
+/**
+ * A send that lands is filed and then forgotten: the worker APPENDs the message
+ * to Sent and drops the outbox row, so the row's absence is the settled state
+ * and the 404 is the confirmation.
+ *
+ * Only the 404 is this call site's to own. A 401 or a 403 here is a session that
+ * lapsed under a send, which the app owes the user an answer about.
+ */
+export const OUTBOX_ROW_META = softErrorStatuses(404);
+/**
+ * The watch is over on a settled status and on any error the read comes back
+ * with. The 404 is the settled state itself; every other refusal has already
+ * escalated once through the query cache, and asking again every two seconds
+ * only repeats that escalation — a fresh fatal event per tick — until the cap.
+ */
+const isWatchOver = (status, error) => isSettledStatus(status) || error != null;
+export const ComposeProvider = ({ children, }) => {
+    const [pollingMessageId, setPollingMessageId] = useState();
+    const queryClient = useQueryClient();
+    const { data: polledMessage, error: pollError } = useQuery({
+        ...outboxDetailOperationsGetOutboxMessageOptions({
+            path: { outboxMessageId: pollingMessageId ?? "" },
+        }),
+        enabled: !!pollingMessageId,
+        meta: OUTBOX_ROW_META,
+        retry: (failureCount, error) => !isNotFound(error) && failureCount < 1,
+        refetchInterval: (query) => {
+            if (isWatchOver(query.state.data?.status, query.state.error))
+                return false;
+            return POLL_INTERVAL_MS;
+        },
+    });
+    const stopWatching = useCallback(() => {
+        setPollingMessageId(undefined);
+        queryClient.invalidateQueries({
+            queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+        });
+    }, [queryClient]);
+    useEffect(() => {
+        if (!pollingMessageId)
+            return;
+        if (!isWatchOver(polledMessage?.status, pollError))
+            return;
+        stopWatching();
+    }, [polledMessage, pollError, pollingMessageId, stopWatching]);
+    // The cap has to put the watch down rather than only stop the interval: a
+    // query left enabled comes back on the next window focus, minutes later, to
+    // poll a send nobody is waiting on any more.
+    useEffect(() => {
+        if (!pollingMessageId)
+            return;
+        const giveUp = setTimeout(stopWatching, MAX_POLL_DURATION_MS);
+        return () => clearTimeout(giveUp);
+    }, [pollingMessageId, stopWatching]);
+    const startSendPolling = useCallback((outboxMessageId) => {
+        setPollingMessageId(outboxMessageId);
+    }, []);
+    const openReplies = useRef(new Map());
+    const insertIntoOpenReply = useCallback((sourceMessageId, text) => {
+        const insert = openReplies.current.get(sourceMessageId);
+        if (!insert)
+            return false;
+        insert(text);
+        return true;
+    }, []);
+    const registerOpenReply = useCallback((sourceMessageId, insert) => {
+        openReplies.current.set(sourceMessageId, insert);
+        return () => {
+            if (openReplies.current.get(sourceMessageId) === insert)
+                openReplies.current.delete(sourceMessageId);
+        };
+    }, []);
+    const value = useMemo(() => ({ startSendPolling, insertIntoOpenReply, registerOpenReply }), [startSendPolling, insertIntoOpenReply, registerOpenReply]);
+    return (_jsx(ComposeContext.Provider, { value: value, children: children }));
+};
+export const useCompose = () => {
+    const context = useContext(ComposeContext);
+    if (!context) {
+        throw new Error("useCompose must be used within a ComposeProvider");
+    }
+    return context;
+};

package/dist/src/components/compose/ComposeSmtpMissingBanner.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from "react";
+interface ComposeSmtpMissingBannerProps {
+    accountId: string;
+    configureRef?: Ref<HTMLButtonElement>;
+}
+/** Sends "Configure SMTP" to the account's settings panel. */
+export declare const ComposeSmtpMissingBanner: ({ accountId, configureRef, }: ComposeSmtpMissingBannerProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/compose/ComposeSmtpMissingBanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComposeSmtpMissingBanner as Banner } from "@remit/ui";
+import { useConfigureAccountSmtp } from "../../routing";
+/** Sends "Configure SMTP" to the account's settings panel. */
+export const ComposeSmtpMissingBanner = ({ accountId, configureRef, }) => {
+    const configureSmtp = useConfigureAccountSmtp();
+    return (_jsx(Banner, { configureRef: configureRef, onConfigure: () => {
+            configureSmtp(accountId);
+        } }));
+};

package/dist/src/components/compose/ConversationCompose.d.ts

@@ -0,0 +1,17 @@
+import { type ReplyAddress } from "../../routing";
+/**
+ * The answer to a message, as the top block of the conversation it answers.
+ *
+ * It takes no height of its own: it is as tall as what has been written in it
+ * and pushes the thread down as that grows, so the pane keeps the one scrollbar
+ * it had before the reply opened. A height here would give the pane a second
+ * one, with the caret in the inner track.
+ *
+ * Mode, source and draft are all segments of the address, so the surface is on
+ * screen because the path says so and is writing to what the path names. The
+ * conversation renders it because it belongs inside the thread and because the
+ * phone has no reading `Outlet` for a route to fill.
+ */
+export declare const ConversationCompose: ({ surface }: {
+    surface: ReplyAddress;
+}) => import("react").JSX.Element;

package/dist/src/components/compose/ConversationCompose.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions, messageOperationsDescribeMessageOptions, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { useMailboxAccount } from "../../hooks/useMailboxAccount";
+import { useAdoptReplyDraft, useCloseReply, } from "../../routing";
+import { ComposeForm } from "./ComposeForm";
+import { useCompose } from "./ComposeProvider";
+/**
+ * The answer to a message, as the top block of the conversation it answers.
+ *
+ * It takes no height of its own: it is as tall as what has been written in it
+ * and pushes the thread down as that grows, so the pane keeps the one scrollbar
+ * it had before the reply opened. A height here would give the pane a second
+ * one, with the caret in the inner track.
+ *
+ * Mode, source and draft are all segments of the address, so the surface is on
+ * screen because the path says so and is writing to what the path names. The
+ * conversation renders it because it belongs inside the thread and because the
+ * phone has no reading `Outlet` for a route to fill.
+ */
+export const ConversationCompose = ({ surface }) => {
+    const adoptCreatedDraft = useAdoptReplyDraft();
+    const closeReply = useCloseReply();
+    const { registerOpenReply } = useCompose();
+    const [insertion, setInsertion] = useState();
+    const insert = useCallback((text) => setInsertion((prev) => ({ version: (prev?.version ?? 0) + 1, text })), []);
+    const answering = surface.sourceMessageId;
+    useEffect(() => registerOpenReply(answering, insert), [answering, insert, registerOpenReply]);
+    const { data: sourceMessage } = useQuery({
+        ...messageOperationsDescribeMessageOptions({
+            path: { messageId: surface.sourceMessageId },
+        }),
+    });
+    const { data: config } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        staleTime: Infinity,
+    });
+    // The answer leaves from the identity the message reached, so the account is
+    // the one owning the mailbox it was delivered to. Taking the head of the
+    // configured list answered every account's mail from the first identity, and
+    // left the reader's own address in the Cc of a Reply All (#819).
+    const { accountId: deliveredToAccountId } = useMailboxAccount(sourceMessage?.message.mailboxId);
+    const account = config?.accounts?.find((candidate) => candidate.accountId === deliveredToAccountId);
+    return (_jsx("div", { className: "border-b border-line bg-canvas", children: _jsx(ComposeForm, { layout: "flow", mode: surface.mode, account: account, sourceMessage: sourceMessage, outboxMessageId: surface.outboxMessageId, seed: surface.seed, insertion: insertion, onDraftCreated: adoptCreatedDraft, onClose: closeReply }, surface.sourceMessageId) }));
+};

package/dist/src/components/compose/FromSelector.d.ts

@@ -0,0 +1,7 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+interface FromSelectorProps {
+    selectedAccountId?: string;
+    onSelect: (account: RemitImapAccountResponse) => void;
+}
+export declare const FromSelector: ({ selectedAccountId, onSelect, }: FromSelectorProps) => import("react").JSX.Element | null;
+export {};

package/dist/src/components/compose/FromSelector.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+export const FromSelector = ({ selectedAccountId, onSelect, }) => {
+    const { data: config } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        staleTime: Infinity,
+    });
+    const accounts = config?.accounts ?? [];
+    // Auto-select the only account when none is selected
+    useEffect(() => {
+        if (!selectedAccountId && accounts.length === 1 && accounts[0]) {
+            onSelect(accounts[0]);
+        }
+    }, [selectedAccountId, accounts, onSelect]);
+    if (accounts.length <= 1) {
+        const account = accounts[0];
+        if (!account)
+            return null;
+        return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("label", { className: "text-sm text-fg-muted shrink-0 w-12 pt-1.5", children: "From:" }), _jsx("div", { className: "text-sm py-1.5", children: account.email })] }));
+    }
+    const resolved = accounts.some((a) => a.accountId === selectedAccountId);
+    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("label", { htmlFor: "from-account-selector", className: "text-sm text-fg-muted shrink-0 w-12 pt-1.5", children: "From:" }), _jsxs("select", { id: "from-account-selector", value: resolved ? selectedAccountId : "", onChange: (e) => {
+                    const account = accounts.find((a) => a.accountId === e.target.value);
+                    if (account)
+                        onSelect(account);
+                }, className: "flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm", children: [!resolved && (_jsx("option", { value: "", disabled: true, children: "Choose an account" })), accounts.map((account) => (_jsx("option", { value: account.accountId, children: account.email }, account.accountId)))] })] }));
+};

package/dist/src/components/compose/FullCompose.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The compose surface, mounted by the compose route and by nothing else. It is
+ * on screen because the address says so, and writing to the draft the address
+ * names — so there is no flag to consult and nothing to be out of step with.
+ */
+export declare const FullCompose: () => import("react").JSX.Element;

package/dist/src/components/compose/FullCompose.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ErrorState } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { X } from "lucide-react";
+import { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
+import { useIsDesktop } from "../../hooks/useMediaQuery";
+import { useAdoptComposeDraft, useCloseCompose, useComposeDraftId, } from "../../routing";
+import { ComposeForm } from "./ComposeForm";
+import { composeSurfaceTitle } from "./compose-title";
+import { MobileComposeSheet } from "./MobileComposeSheet";
+/**
+ * The compose surface, mounted by the compose route and by nothing else. It is
+ * on screen because the address says so, and writing to the draft the address
+ * names — so there is no flag to consult and nothing to be out of step with.
+ */
+export const FullCompose = () => {
+    const outboxMessageId = useComposeDraftId();
+    const adoptCreatedDraft = useAdoptComposeDraft();
+    const closeCompose = useCloseCompose();
+    const isDesktop = useIsDesktop();
+    const { isError: isConfigError, error: configError, refetch: refetchConfig, } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        staleTime: Infinity,
+    });
+    useKeyboardNavigation({
+        bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
+    });
+    if (!isDesktop)
+        return _jsx(MobileComposeSheet, {});
+    const header = (_jsxs("header", { className: "flex items-center justify-between gap-2 px-4 py-3 border-b border-line shrink-0", children: [_jsx("div", { className: "flex items-center gap-2 min-w-0", children: _jsx("h2", { className: "text-lg font-semibold truncate", children: composeSurfaceTitle(outboxMessageId) }) }), _jsx("button", { type: "button", onClick: closeCompose, className: "p-2 rounded-md hover:bg-surface-raised transition-colors min-h-11 min-w-11 inline-flex items-center justify-center", "aria-label": "Close", children: _jsx(X, { className: "size-5" }) })] }));
+    if (isConfigError) {
+        return (_jsxs("div", { className: "h-full flex flex-col bg-canvas", children: [header, _jsx("div", { className: "flex-1 flex items-center justify-center p-4", children: _jsx(ErrorState, { title: "Couldn't load compose", error: configError, onRetry: () => {
+                            refetchConfig();
+                        } }) })] }));
+    }
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-canvas", children: [header, _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(ComposeForm, { mode: "new", outboxMessageId: outboxMessageId, onDraftCreated: adoptCreatedDraft, onClose: closeCompose }) })] }));
+};

package/dist/src/components/compose/MobileComposeSheet.d.ts

@@ -0,0 +1 @@
+export declare const MobileComposeSheet: () => import("react").JSX.Element;

package/dist/src/components/compose/MobileComposeSheet.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ConfirmDialog, ErrorState, useOverlayScope } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useRef, useState } from "react";
+import { Drawer } from "vaul";
+import { useAdoptComposeDraft, useCloseCompose, useComposeDraftId, } from "../../routing";
+import { ComposeForm } from "./ComposeForm";
+import { composeSurfaceTitle } from "./compose-title";
+/**
+ * Returns true when the draft has meaningful content (subject or body
+ * typed by the user). Used to gate drag-to-dismiss with a confirmation.
+ */
+const useIsDraftDirty = () => {
+    const dirtyRef = useRef(false);
+    // We peek at the DOM: if subject has text or the editor has non-empty
+    // text content, the draft is dirty. This avoids threading form state
+    // back up — ComposeForm owns the source of truth.
+    const check = useCallback(() => {
+        const subject = document.querySelector("[data-subject-field]")?.value ??
+            "";
+        const editorEl = document.querySelector('[data-testid="compose-body"]');
+        const bodyText = editorEl?.textContent ?? "";
+        // Strip signature separator "-- " to avoid false positives
+        const cleaned = bodyText.replace(/--\s*/g, "").trim();
+        dirtyRef.current = subject.trim().length > 0 || cleaned.length > 0;
+        return dirtyRef.current;
+    }, []);
+    return check;
+};
+export const MobileComposeSheet = () => {
+    const outboxMessageId = useComposeDraftId();
+    const adoptCreatedDraft = useAdoptComposeDraft();
+    const closeCompose = useCloseCompose();
+    const isDraftDirty = useIsDraftDirty();
+    const [showConfirm, setShowConfirm] = useState(false);
+    const { isError: isConfigError, error: configError, refetch: refetchConfig, } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        staleTime: Infinity,
+    });
+    const handleOpenChange = useCallback((open) => {
+        if (open)
+            return;
+        // User is trying to dismiss
+        if (isDraftDirty()) {
+            setShowConfirm(true);
+        }
+        else {
+            closeCompose();
+        }
+    }, [closeCompose, isDraftDirty]);
+    const handleConfirmDiscard = useCallback(() => {
+        setShowConfirm(false);
+        closeCompose();
+    }, [closeCompose]);
+    const handleCancelDiscard = useCallback(() => {
+        setShowConfirm(false);
+    }, []);
+    // vaul answers Escape itself; declaring the scope is what keeps the rest of
+    // the keyboard off the list behind the sheet.
+    useOverlayScope({ id: "mobile-compose", open: true });
+    return (_jsxs(Drawer.Root, { open: true, onOpenChange: handleOpenChange, 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: { height: "95dvh" }, children: [_jsx(Drawer.Handle, { className: "mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" }), _jsx(Drawer.Title, { className: "px-4 py-2 text-base font-semibold border-b border-line", children: composeSurfaceTitle(outboxMessageId) }), isConfigError ? (_jsx("div", { className: "flex-1 flex items-center justify-center p-4", children: _jsx(ErrorState, { title: "Couldn't load compose", error: configError, onRetry: () => {
+                                        refetchConfig();
+                                    } }) })) : (_jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(ComposeForm, { mode: "new", outboxMessageId: outboxMessageId, onDraftCreated: adoptCreatedDraft, onClose: closeCompose }) }))] })] }), _jsx(ConfirmDialog, { isOpen: showConfirm, title: "Discard draft?", description: "Your message has unsaved content. Are you sure you want to discard it?", confirmLabel: "Discard", cancelLabel: "Keep editing", destructive: true, onConfirm: handleConfirmDiscard, onCancel: handleCancelDiscard })] }));
+};

package/dist/src/components/compose/compose-spellcheck.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The checker the composer writes against. The engine runs in a worker, opened
+ * once per language and taken down with the surface, and the module holding it
+ * is loaded on demand so the worker chunk stays out of every other screen.
+ *
+ * A language with no dictionary is not a failure: the provider answers null,
+ * the editor leaves the browser's own checking switched on, and the writer
+ * still gets underlines. A checker that was supposed to come up and did not is
+ * a failure, and it says so — an editor that has quietly stopped marking
+ * anything reads exactly like text with nothing wrong in it.
+ */
+import type { ProviderStatus, SpellcheckOptions } from "@remit/ui/rich-text";
+import type { PushErrorInput } from "../ui/error-banners.js";
+export declare const spellcheckFailure: (status: Extract<ProviderStatus, {
+    state: "failed";
+}>) => PushErrorInput;
+export declare const composeSpellcheck: (report: (input: PushErrorInput) => void) => SpellcheckOptions;

package/dist/src/components/compose/compose-spellcheck.js

@@ -0,0 +1,43 @@
+/**
+ * The checker the composer writes against. The engine runs in a worker, opened
+ * once per language and taken down with the surface, and the module holding it
+ * is loaded on demand so the worker chunk stays out of every other screen.
+ *
+ * A language with no dictionary is not a failure: the provider answers null,
+ * the editor leaves the browser's own checking switched on, and the writer
+ * still gets underlines. A checker that was supposed to come up and did not is
+ * a failure, and it says so — an editor that has quietly stopped marking
+ * anything reads exactly like text with nothing wrong in it.
+ */
+import { buildBugReportContext, buildGitHubIssueUrl, } from "../../lib/bug-report";
+const WHAT_FAILED = {
+    download: "its dictionary could not be downloaded",
+    engine: "the checker could not start",
+    worker: "the checker stopped running",
+};
+export const spellcheckFailure = (status) => {
+    const summary = `Spellcheck for ${status.language} is off: ${WHAT_FAILED[status.reason]}.`;
+    return {
+        severity: "warning",
+        title: "Spellcheck stopped",
+        detail: `${summary} Your browser is checking this message instead. ${status.detail}`,
+        action: {
+            label: "Report this",
+            href: buildGitHubIssueUrl(buildBugReportContext({
+                title: `Spellcheck stopped: ${status.reason} (${status.language})`,
+                errorMessage: `${summary} ${status.detail}`,
+            })),
+        },
+    };
+};
+export const composeSpellcheck = (report) => ({
+    provider: async (language) => {
+        const { openSpellcheckWorker } = await import("@remit/ui/spellcheck-worker");
+        return openSpellcheckWorker(language);
+    },
+    onStatus: (status) => {
+        if (status.state !== "failed")
+            return;
+        report(spellcheckFailure(status));
+    },
+});

package/dist/src/components/compose/compose-title.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What the compose surface calls itself.
+ *
+ * The address says which message is being written, so the heading says the same
+ * thing: a message with nothing saved behind it yet is a new one, and one the
+ * autosave has written is the draft it wrote. The heading changing as the first
+ * save lands is the same moment the action bar says "Draft saved".
+ */
+export declare const composeSurfaceTitle: (outboxMessageId: string | undefined) => "Draft" | "New Message";

package/dist/src/components/compose/compose-title.js

@@ -0,0 +1,9 @@
+/**
+ * What the compose surface calls itself.
+ *
+ * The address says which message is being written, so the heading says the same
+ * thing: a message with nothing saved behind it yet is a new one, and one the
+ * autosave has written is the draft it wrote. The heading changing as the first
+ * save lands is the same moment the action bar says "Draft saved".
+ */
+export const composeSurfaceTitle = (outboxMessageId) => outboxMessageId ? "Draft" : "New Message";

package/dist/src/components/compose/mail-sync-off-refusal.d.ts

@@ -0,0 +1 @@
+export declare const mailSyncOffReason: (error: unknown) => string | undefined;

package/dist/src/components/compose/mail-sync-off-refusal.js

@@ -0,0 +1,7 @@
+import { codedApiErrorBody } from "../../lib/api";
+import { formatErrorDetail } from "../ui/error-banners.js";
+export const mailSyncOffReason = (error) => {
+    if (codedApiErrorBody(error)?.code !== "mail_sync_off")
+        return undefined;
+    return formatErrorDetail(error);
+};

package/dist/src/components/compose/quoted-message.d.ts

@@ -0,0 +1,59 @@
+import type { RemitImapDescribeMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { type RichTextValue } from "@remit/ui";
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
+type Envelope = RemitImapDescribeMessageResponse["envelope"];
+/** Whether the original is being answered or passed on. */
+export type QuoteKind = "reply" | "forward";
+/** The message being quoted, in both the representations a send carries. */
+export interface QuotedBlock {
+    text: string;
+    html: string;
+}
+/**
+ * The original's body as the content route hands it over: one part, either
+ * HTML or plain text, never both. The other representation is derived here,
+ * because a message goes out with both and HTML markup dropped into the
+ * `text/plain` part arrives as visible tags.
+ */
+export type QuotedSourceBody = {
+    kind: "text";
+    content: string;
+} | {
+    kind: "html";
+    content: string;
+};
+export declare const escapeHtml: (text: string) => string;
+export declare const textToHtml: (text: string) => string;
+/**
+ * The original, as the message being written will carry it. One value, so what
+ * the composer shows under the editor is the same block that leaves for the
+ * API rather than a second rendering of the same source (#845.5).
+ *
+ * A reply indents the original behind an attribution line; a forward passes it
+ * on whole under the header block, because a forward is the original message
+ * rather than a passage cited from it.
+ */
+export declare const buildQuotedBlock: (kind: QuoteKind, envelope: Envelope, body: QuotedSourceBody) => QuotedBlock;
+/**
+ * What the two body columns carry for this mode.
+ *
+ * Plain mode writes the empty string rather than omitting `htmlBody`: absent
+ * means "leave alone" at every layer below, so a plain draft that omitted it
+ * would send the HTML it was written as before the switch. The empty string is
+ * defined, so the repository's update guard clears the column, and nodemailer
+ * branches on the value being truthy — an empty one builds no HTML alternative
+ * and the message leaves as a single `text/plain` part. It is also why the
+ * quote reaches a plain message through `textBody` alone: putting its markup in
+ * `htmlBody` would reopen the draft as rich and send the recipient an HTML
+ * alternative of a message written as plain text.
+ *
+ * Rich mode leaves `htmlBody` alone while it has nothing to say, so the moments
+ * before the lazily-loaded editor reports its document cannot write a draft
+ * back as plain. A quote is something to say, so a send pressed in those
+ * moments still carries the message it quotes.
+ */
+export declare const outgoingBody: (bodyMode: ComposeBodyMode, body: RichTextValue, language: string, quoted: QuotedBlock | undefined) => {
+    textBody: string | undefined;
+    htmlBody: string | undefined;
+};
+export {};