@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/config-import/config-import.fixtures.js

@@ -0,0 +1,167 @@
+/**
+ * One exported configuration from a Dutch household setup — a personal domain
+ * over IMAP, a work account on Microsoft 365, and a consultancy address —
+ * carried into a second instance. Realistic enough that the dry-run report has
+ * something to say in every verdict, and shaped exactly as
+ * `POST /config/import` answers, so the stories render what the app renders.
+ */
+export const CONFIG_FILE_NAME = "reader-config.example.json";
+const item = (section, key, verdict, reason) => ({ section, key, verdict, reason });
+export const mixedItems = [
+    item("accounts", "reader@example.com", "created"),
+    item("accounts", "m.vanhenten@gemeente-amstelveen.nl", "created"),
+    item("accounts", "post@vanhenten-advies.nl", "updated"),
+    item("accounts", "reader@example.net", "skipped", "An account with this address already exists here and its server settings differ. Remove it first, or edit it by hand — importing will not overwrite a working account."),
+    item("labels", "Facturen", "created"),
+    item("labels", "Raadsstukken", "unchanged"),
+    item("filters", "Bonnetjes", "created"),
+    item("filters", "Nieuwsbrieven dempen", "created"),
+    item("filters", "Waternet", "skipped", "The folder this rule files into is not here yet. The rule is imported switched off and turns itself on once Projecten/Waternet appears."),
+    item("filters", "Raadsstukken markeren", "updated"),
+    item("filters", "Oude spamregel", "rejected", "This rule uses an action this version does not have (moveToServerRule). Nothing was imported for it. Rebuild the rule in Settings › Filters."),
+    item("addressFlags", "anouk@waternet.nl", "created"),
+    item("addressFlags", "nieuwsbrief@bol.com", "created"),
+    item("addressFlags", "no-reply@promo.example", "unchanged"),
+    item("settings", "Density", "updated"),
+    item("settings", "Theme", "unchanged"),
+    item("settings", "PinnedFolders", "created"),
+    item("settings", "FolderRoleAppointment#Archive", "created"),
+];
+/** A fresh install: nothing here to skip, nothing to reject. */
+export const cleanItems = mixedItems
+    .filter((entry) => entry.verdict !== "rejected")
+    .map((entry) => ({
+    section: entry.section,
+    key: entry.key,
+    verdict: "created",
+}));
+const warning = (code, message, details) => ({ code, message, details });
+export const folderWarnings = [
+    warning("folder_not_found_yet", 'Filter "Waternet" files mail into "Projecten/Waternet", which this account does not hold yet. It is bound once the folder list has been read.', { filter: "Waternet", folderPath: "Projecten/Waternet" }),
+    warning("folder_not_found_yet", 'Filter "Aangifte bewaren" files mail into "Archief/Belasting 2025", which this account does not hold yet. It is bound once the folder list has been read.', { filter: "Aangifte bewaren", folderPath: "Archief/Belasting 2025" }),
+    warning("folder_not_found_yet", '"Raadsstukken" is not a folder this account holds yet. It is bound once the folder list has been read.', { folderPath: "Raadsstukken", accountId: "acct-amstelveen" }),
+];
+const report = (overrides) => ({
+    valid: true,
+    schemaVersion: 1,
+    applied: false,
+    items: mixedItems,
+    errors: [],
+    warnings: [],
+    accountsNeedingCredentials: [],
+    ...overrides,
+});
+export const dryRunReport = report({ warnings: folderWarnings });
+export const cleanRunReport = report({ items: cleanItems });
+export const rejectedReports = {
+    wrongKind: report({
+        valid: false,
+        schemaVersion: 0,
+        items: [],
+        errors: [
+            {
+                code: "WrongKind",
+                message: 'Not a reader configuration document: expected kind "reader.config", found "photo-album".',
+            },
+        ],
+    }),
+    newerSchema: report({
+        valid: false,
+        schemaVersion: 5,
+        items: [],
+        errors: [
+            {
+                code: "UnsupportedVersion",
+                message: "Document schemaVersion 5 was written by a newer reader; this one reads up to 1. Upgrade before importing.",
+            },
+        ],
+    }),
+    unknownKey: report({
+        valid: false,
+        items: [],
+        errors: [
+            {
+                code: "UnknownKeys",
+                message: "Unknown keys at filters[3]: serverSideCopy, retentionDays. A document this reader does not fully understand is refused rather than partly applied.",
+            },
+        ],
+    }),
+    credentialField: report({
+        valid: false,
+        items: [],
+        errors: [
+            {
+                code: "CredentialPresent",
+                message: "Credential field at accounts[1]: imapPassword. A configuration document declares which credential an account needs; it never carries one.",
+            },
+        ],
+    }),
+};
+export const partialImportReport = report({
+    applied: true,
+    items: [
+        ...mixedItems.filter((entry) => entry.section === "accounts" || entry.section === "labels"),
+        item("filters", "Bonnetjes", "rejected", "the filter store refused the write"),
+    ],
+    errors: [
+        {
+            code: "import_write_failed",
+            message: "the filter store refused the write The items above it were written and remain; import the same file again with merge to finish.",
+            details: { section: "filters", key: "Bonnetjes" },
+        },
+    ],
+    warnings: folderWarnings,
+});
+/**
+ * The same stop with no section written: the first write was the one that
+ * failed, so the report carries no landed item and `applied` is false.
+ */
+export const nothingLandedImportReport = report({
+    applied: false,
+    items: [
+        item("accounts", "reader@example.com", "rejected", "the account store refused the write"),
+    ],
+    errors: [
+        {
+            code: "import_write_failed",
+            message: "the account store refused the write The items above it were written and remain; import the same file again with merge to finish.",
+            details: { section: "accounts", key: "reader@example.com" },
+        },
+    ],
+    warnings: [],
+});
+export const importedAccounts = [
+    {
+        accountId: "acct-example",
+        address: "reader@example.com",
+        displayName: "Reader Example",
+        connector: "imap",
+        server: "imap.example.com:993",
+        state: "entered",
+    },
+    {
+        accountId: "acct-advies",
+        address: "post@vanhenten-advies.nl",
+        displayName: "Van Henten Advies",
+        connector: "imap",
+        server: "mail.antagonist.nl:993",
+        state: "needed",
+    },
+    {
+        accountId: "acct-amstelveen",
+        address: "m.vanhenten@gemeente-amstelveen.nl",
+        displayName: "M. van Henten (Gemeente Amstelveen)",
+        connector: "microsoft",
+        server: "outlook.office365.com",
+        state: "needed",
+    },
+];
+export const accountsAllPending = importedAccounts.map((account) => ({ ...account, state: "needed" }));
+export const accountsAllConnected = importedAccounts.map((account) => ({ ...account, state: "entered" }));
+export const accountsOneFailed = importedAccounts.map((account) => account.accountId === "acct-advies"
+    ? {
+        ...account,
+        state: "failed",
+        failure: "535 5.7.8 Authentication credentials invalid — Antagonist wants the mailbox password, not your control-panel login.",
+    }
+    : account);

package/dist/src/components/config-import/steps.d.ts

@@ -0,0 +1,100 @@
+/**
+ * The config import screens, one component per surface (#1021 stage 5).
+ *
+ * Every one of these is a pure function of props: the wizard around them owns
+ * the file, the network and the step. That is what lets Storybook render each
+ * state — including the ones that only exist when a server refuses something —
+ * against the same components the app runs.
+ */
+import { type FailureCopy, type PendingFolder, type ReportSection, type SectionResult } from "../../lib/config-import";
+export declare const IMPORT_STEPS: string[];
+interface StepNav {
+    onBack?: () => void;
+    onNext?: () => void;
+}
+export declare function RawError({ children }: {
+    children: string;
+}): import("react").JSX.Element;
+export interface ChosenFile {
+    name: string;
+    size: number;
+}
+/**
+ * Where the file has got to. `reading` is the browser pulling it off disk;
+ * `checking` is the dry run in flight at the server. They are different waits
+ * with different failures, and a control that cannot tell them apart lands the
+ * reader on a button that looks ready before there is anything to send.
+ */
+export type ChooseFileState = "idle" | "dragging" | "reading" | "checking";
+export declare function StepChooseFile({ state, file, ready, failure, onChoose, onDragStateChange, onNext, }: {
+    state?: ChooseFileState;
+    file?: ChosenFile;
+    /**
+     * A document has parsed and is there to send. Without it "Check the file"
+     * would offer to send what the browser has not finished reading, or what
+     * turned out not to be a configuration at all.
+     */
+    ready?: boolean;
+    /** A file that could not even be read as a configuration document. */
+    failure?: FailureCopy;
+    onChoose?: (file: File) => void;
+    onDragStateChange?: (dragging: boolean) => void;
+} & StepNav): import("react").JSX.Element;
+export declare function StepDryRunReport({ sections, fileName, warnings, applying, onBack, onNext, }: {
+    sections: ReportSection[];
+    fileName: string;
+    /** Non-blocking notes worth reading before the write, e.g. a missing folder. */
+    warnings?: string[];
+    applying?: boolean;
+} & StepNav): import("react").JSX.Element;
+export declare function StepInstanceAlreadyConfigured({ choice, held, onChoose, onBack, onNext, }: {
+    choice?: "abort" | "merge";
+    /** What the instance already holds, as the 409 counted it. */
+    held: string;
+    onChoose?: (choice: "abort" | "merge") => void;
+} & StepNav): import("react").JSX.Element;
+export type CredentialState = "needed" | "entered" | "failed";
+export interface ImportedAccount {
+    accountId: string;
+    address: string;
+    displayName: string;
+    connector: "imap" | "microsoft";
+    server: string;
+    state: CredentialState;
+    /** What went wrong on the last attempt, and the likely fix. */
+    failure?: string;
+}
+export declare function AccountCredentialsList({ accounts, busyAccountId, onOpen, }: {
+    accounts: ImportedAccount[];
+    /** The account whose OAuth redirect is in flight. */
+    busyAccountId?: string;
+    onOpen?: (account: ImportedAccount) => void;
+}): import("react").JSX.Element;
+export declare function StepCredentialsOverview({ accounts, busyAccountId, error, onOpen, onNext, }: {
+    accounts: ImportedAccount[];
+    busyAccountId?: string;
+    error?: string;
+    onOpen?: (account: ImportedAccount) => void;
+} & StepNav): import("react").JSX.Element;
+export declare function StepAccountReconnectMicrosoft({ account, position, total, error, busy, onBack, onNext, }: {
+    account: ImportedAccount;
+    position: number;
+    total: number;
+    error?: string;
+    busy?: boolean;
+} & StepNav): import("react").JSX.Element;
+export declare function StepPendingFolders({ folders, onNext, }: {
+    folders: PendingFolder[];
+} & StepNav): import("react").JSX.Element;
+export declare function StepFileRejected({ failure, onBack, }: {
+    failure: FailureCopy;
+} & StepNav): import("react").JSX.Element;
+export declare function StepPartialImport({ results, message, raw, nothingLanded, onBack, onNext, }: {
+    results: SectionResult[];
+    /** The server's own account of what survived, which only it knows. */
+    message: string;
+    raw: string;
+    /** No section of the file was written — not that the instance is unchanged. */
+    nothingLanded: boolean;
+} & StepNav): import("react").JSX.Element;
+export {};

package/dist/src/components/config-import/steps.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The config import screens, one component per surface (#1021 stage 5).
+ *
+ * Every one of these is a pure function of props: the wizard around them owns
+ * the file, the network and the step. That is what lets Storybook render each
+ * state — including the ones that only exist when a server refuses something —
+ * against the same components the app runs.
+ */
+import { Badge, Banner, Button, CheckRow, ConnectorTile, WizardShell, } from "@remit/ui";
+import { FileJson, FolderClock, Inbox, KeyRound, Loader2, Merge, Upload, X, } from "lucide-react";
+import { useId, useRef } from "react";
+import { countVerdicts, formatFileSize, verdictTone, } from "../../lib/config-import";
+export const IMPORT_STEPS = ["File", "Review", "Credentials", "Folders"];
+export function RawError({ children }) {
+    return (_jsx("code", { className: "block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted", children: children }));
+}
+export function StepChooseFile({ state = "idle", file, ready = false, failure, onChoose, onDragStateChange, onNext, }) {
+    const inputId = useId();
+    const inputRef = useRef(null);
+    const dragging = state === "dragging";
+    const reading = state === "reading";
+    const checking = state === "checking";
+    const busy = reading || checking;
+    const handleDrop = (event) => {
+        event.preventDefault();
+        onDragStateChange?.(false);
+        const dropped = event.dataTransfer.files.item(0);
+        if (dropped)
+            onChoose?.(dropped);
+    };
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 0, title: "Import a config file", subtitle: "Accounts, folder roles, rules, senders and appearance \u2014 everything except passwords.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "Nothing is written until you have seen what will change." }), _jsx(Button, { variant: "primary", disabled: busy || !ready, icon: busy ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : undefined, onClick: onNext, children: reading ? "Reading…" : checking ? "Checking…" : "Check the file" })] }), children: _jsxs("div", { className: "space-y-4", children: [failure && (_jsxs("div", { className: "space-y-2", children: [_jsx(Banner, { tone: "danger", children: failure.title }), _jsx("p", { className: "text-sm text-fg", children: failure.explanation }), _jsx("p", { className: "text-sm text-fg-muted", children: failure.fix }), _jsx(RawError, { children: failure.raw })] })), _jsxs("div", { onDragOver: (event) => {
+                        event.preventDefault();
+                        onDragStateChange?.(true);
+                    }, onDragLeave: () => onDragStateChange?.(false), onDrop: handleDrop, className: dragging
+                        ? "flex flex-col items-center gap-3 rounded-sm border-2 border-dashed border-accent bg-accent-soft px-4 py-9 text-center"
+                        : "flex flex-col items-center gap-3 rounded-sm border-2 border-dashed border-line px-4 py-9 text-center", children: [_jsx("span", { className: "flex size-11 items-center justify-center rounded-md bg-surface-sunken", children: _jsx(Upload, { className: "size-5 text-fg-muted" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-fg", children: dragging
+                                        ? "Drop it here"
+                                        : "Drop a config file here, or choose one" }), _jsx("p", { className: "mt-1 text-xs text-fg-subtle", children: "A .json file written by Reader \u2014 up to 2 MB." })] }), _jsx("input", { ref: inputRef, id: inputId, type: "file", accept: "application/json,.json", className: "sr-only", onChange: (event) => {
+                                const picked = event.target.files?.item(0);
+                                if (picked)
+                                    onChoose?.(picked);
+                            } }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => inputRef.current?.click(), children: "Choose file" })] }), file && (_jsxs("div", { className: "flex items-start gap-3 rounded-sm border border-line px-3 py-2.5", children: [_jsx(FileJson, { className: "mt-0.5 size-4 shrink-0 text-fg-muted" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm text-fg", children: file.name }), _jsxs("p", { className: "mt-0.5 text-xs text-fg-subtle", children: [formatFileSize(file.size), " \u00B7", " ", reading
+                                            ? "reading it from disk"
+                                            : checking
+                                                ? "checking it against this instance"
+                                                : ready
+                                                    ? "ready to check — nothing has been sent yet"
+                                                    : "not a configuration this instance can read"] })] })] })), _jsxs("p", { className: "text-2xs text-fg-subtle", children: ["Export one from Settings \u2192 Advanced on the instance you are moving from, or run", " ", _jsx("code", { className: "rounded bg-surface-sunken px-1 py-0.5", children: "remit config save" }), " ", "on its host."] })] }) }));
+}
+function VerdictSummary({ sections }) {
+    const counts = countVerdicts(sections.flatMap((section) => section.entries.map((entry) => ({
+        section: section.id,
+        key: entry.label,
+        verdict: entry.verdict,
+    }))));
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: ["created", "updated", "unchanged", "skipped", "rejected"]
+            .filter((verdict) => counts[verdict] > 0)
+            .map((verdict) => (_jsxs(Badge, { tone: verdictTone[verdict], dot: true, children: [counts[verdict], " ", verdict] }, verdict))) }));
+}
+function SectionReport({ section }) {
+    return (_jsxs("section", { children: [_jsx("h2", { className: "text-sm font-semibold text-fg", children: section.title }), _jsx("ul", { className: "mt-1.5 divide-y divide-line", children: section.entries.map((entry) => (_jsxs("li", { className: "flex items-start gap-3 py-2", children: [_jsx(Badge, { tone: verdictTone[entry.verdict], className: "mt-0.5 shrink-0", children: entry.verdict }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm text-fg", children: entry.label }), entry.reason && (_jsx("p", { className: entry.verdict === "rejected"
+                                        ? "mt-1 text-xs text-danger"
+                                        : "mt-1 text-xs text-warning", children: entry.reason }))] })] }, entry.id))) })] }));
+}
+export function StepDryRunReport({ sections, fileName, warnings = [], applying = false, onBack, onNext, }) {
+    const counts = countVerdicts(sections.flatMap((section) => section.entries.map((entry) => ({
+        section: section.id,
+        key: entry.label,
+        verdict: entry.verdict,
+    }))));
+    const willWrite = counts.created + counts.updated;
+    const held = counts.skipped + counts.rejected;
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 1, title: "What this file will change", subtitle: `${fileName} · nothing has been written yet.`, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Choose another file" }), _jsx(Button, { variant: "primary", disabled: applying, icon: applying ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : undefined, onClick: onNext, children: applying ? "Importing…" : `Import ${willWrite} changes` })] }), children: _jsxs("div", { className: "space-y-5", children: [_jsx(VerdictSummary, { sections: sections }), held > 0 && (_jsxs(Banner, { tone: "warning", children: [held, " entries will not be imported. Each says why below \u2014 read them before you continue, because nothing here retries on its own."] })), warnings.length > 0 && (_jsx("ul", { className: "space-y-1 text-xs text-warning", children: warnings.map((warning) => (_jsx("li", { children: warning }, warning))) })), sections.map((section) => (_jsx(SectionReport, { section: section }, section.id)))] }) }));
+}
+export function StepInstanceAlreadyConfigured({ choice, held, onChoose, onBack, onNext, }) {
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 1, title: "This instance already has configuration", subtitle: held, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Choose another file" }), _jsx(Button, { variant: "primary", disabled: !choice, onClick: onNext, children: choice === "merge" ? "Continue with merge" : "Continue" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Banner, { tone: "warning", children: "An import into a configured instance can only add and update \u2014 it never deletes what is here. Pick how the two should meet." }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(ConnectorTile, { name: "Stop, keep this instance", description: "Nothing is written. Use this if you meant to import into a fresh instance.", icon: _jsx(X, { className: "size-5" }), selected: choice === "abort", onSelect: () => onChoose?.("abort") }), _jsx(ConnectorTile, { name: "Merge the file in", description: "Adds what is missing and updates what differs. Existing accounts keep their server settings.", icon: _jsx(Merge, { className: "size-5" }), selected: choice === "merge", onSelect: () => onChoose?.("merge") })] }), choice === "merge" && (_jsx("p", { className: "text-xs text-fg-muted", children: "The next screen lists every add and update before anything is written." }))] }) }));
+}
+function credentialBadge(state) {
+    if (state === "entered")
+        return _jsx(Badge, { tone: "positive", children: "ready" });
+    if (state === "failed")
+        return _jsx(Badge, { tone: "danger", children: "sign-in failed" });
+    return _jsx(Badge, { tone: "danger", children: "credentials needed" });
+}
+export function AccountCredentialsList({ accounts, busyAccountId, onOpen, }) {
+    return (_jsx("ul", { className: "divide-y divide-line", children: accounts.map((account) => (_jsxs("li", { className: account.state === "entered"
+                ? "flex flex-wrap items-start justify-between gap-3 py-3"
+                : "flex flex-wrap items-start justify-between gap-3 border-l-2 border-danger bg-danger-soft py-3 pl-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: account.address }), credentialBadge(account.state)] }), _jsxs("p", { className: "mt-0.5 text-xs text-fg-subtle", children: [account.displayName, " \u00B7", " ", account.connector === "microsoft"
+                                    ? "Microsoft 365"
+                                    : "IMAP / SMTP", " ", "\u00B7 ", account.server] }), account.state !== "entered" && (_jsx("p", { className: "mt-1 text-xs text-danger", children: account.failure ??
+                                (account.connector === "microsoft"
+                                    ? "Config files never carry OAuth tokens. Reconnect with Microsoft to start syncing this account."
+                                    : "Config files never carry passwords. Enter this mailbox's password to start syncing.") }))] }), account.state !== "entered" && (_jsx(Button, { variant: "primary", size: "sm", disabled: busyAccountId === account.accountId, icon: busyAccountId === account.accountId ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : account.connector === "microsoft" ? (_jsx(Inbox, { className: "size-3.5" })) : (_jsx(KeyRound, { className: "size-3.5" })), onClick: () => onOpen?.(account), children: busyAccountId === account.accountId
+                        ? "Redirecting…"
+                        : account.connector === "microsoft"
+                            ? "Reconnect"
+                            : account.state === "failed"
+                                ? "Try again"
+                                : "Enter password" }))] }, account.accountId))) }));
+}
+export function StepCredentialsOverview({ accounts, busyAccountId, error, onOpen, onNext, }) {
+    const outstanding = accounts.filter((account) => account.state !== "entered").length;
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 2, title: "These accounts need credentials", subtitle: "The config file carries servers and settings. Passwords and Microsoft sign-ins it deliberately leaves out.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: outstanding > 0
+                        ? "Settings › Accounts keeps asking until every account is signed in."
+                        : "Every account can sync." }), _jsx(Button, { variant: "primary", onClick: onNext, children: outstanding > 0 ? "Finish later" : "All accounts connected" })] }), children: _jsxs("div", { className: "space-y-4", children: [error && _jsx(Banner, { tone: "danger", children: error }), outstanding > 0 && (_jsxs(Banner, { tone: "danger", children: [outstanding, " of ", accounts.length, " accounts cannot sync yet. They stay listed in Settings, marked like this, until you sign in \u2014 no mail arrives for them in the meantime."] })), _jsx(AccountCredentialsList, { accounts: accounts, busyAccountId: busyAccountId, onOpen: onOpen })] }) }));
+}
+export function StepAccountReconnectMicrosoft({ account, position, total, error, busy = false, onBack, onNext, }) {
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 2, title: `Reconnect ${account.address}`, subtitle: `Account ${position} of ${total} · Microsoft 365`, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Back" }), _jsx(Button, { variant: "primary", disabled: busy, icon: busy ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : undefined, onClick: onNext, children: busy ? "Redirecting…" : "Sign in with Microsoft" })] }), children: _jsxs("div", { className: "space-y-4", children: [error && _jsx(Banner, { tone: "danger", children: error }), _jsx(Banner, { tone: "info", children: "A config file never carries an OAuth token \u2014 one only works for the instance it was granted to. Signing in here mints a fresh one for this instance." }), _jsxs("div", { className: "rounded-sm border border-line px-3 py-2.5", children: [_jsx("p", { className: "text-sm text-fg", children: account.displayName }), _jsxs("p", { className: "mt-0.5 text-xs text-fg-subtle", children: [account.address, " \u00B7 ", account.server] })] }), _jsx("p", { className: "text-2xs text-fg-subtle", children: "You will be sent to Microsoft and returned here. If your organisation requires admin approval, the sign-in stops there and this account keeps waiting." })] }) }));
+}
+export function StepPendingFolders({ folders, onNext, }) {
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 3, title: folders.length > 0 ? "Creating folders" : "Import finished", subtitle: folders.length > 0
+            ? "The config names folders this account does not have yet. Reader creates them on the mail server."
+            : "Everything in the file landed, and every folder it named resolved.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "Folder discovery runs with every sync." }), _jsx(Button, { variant: "primary", onClick: onNext, children: "Go to inbox" })] }), children: _jsx("div", { className: "space-y-4", children: folders.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Banner, { tone: "warning", children: [folders.length, " settings are imported but switched off. Reader creates each missing folder on the mail server the next time the account syncs, and turns the setting on once the server confirms it. A rule whose folder cannot be created stays off, and Settings \u2192 Filters says why."] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-fg-muted", children: [_jsx(FolderClock, { className: "size-4" }), "Folder discovery runs with every sync of the account."] }), _jsx("div", { className: "divide-y divide-line", children: folders.map((folder) => (_jsx(CheckRow, { label: folder.path, detail: folder.waitingFor, state: "pending" }, `${folder.accountId ?? ""}-${folder.path}-${folder.waitingFor}`))) })] })) : (_jsx(Banner, { tone: "success", children: "Every account, rule, label and sender in the file is live on this instance." })) }) }));
+}
+export function StepFileRejected({ failure, onBack, }) {
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 0, title: failure.title, subtitle: "Nothing was imported.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "This instance is unchanged." }), _jsx(Button, { variant: "primary", onClick: onBack, children: "Choose another file" })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Banner, { tone: "danger", children: failure.explanation }), _jsx("p", { className: "text-sm text-fg", children: failure.fix }), _jsx(RawError, { children: failure.raw })] }) }));
+}
+/**
+ * A section nobody can vouch for reads as failed, never as pending: it is
+ * finished, and an outcome the reader has to go and check for themselves is
+ * not a quiet empty row. Pending is the empty row — nothing from the file went
+ * into this section, whether the import never reached it or reached it and
+ * wrote none of it — and it is the state that carries no tick.
+ */
+function resultState(state) {
+    if (state === "landed")
+        return "ok";
+    if (state === "failed" || state === "unknown")
+        return "failed";
+    return "pending";
+}
+export function StepPartialImport({ results, message, raw, nothingLanded, onBack, onNext, }) {
+    const landed = results.filter((result) => result.state === "landed").length;
+    const unknown = results.some((result) => result.state === "unknown");
+    return (_jsx(WizardShell, { steps: IMPORT_STEPS, activeStep: 1, title: nothingLanded
+            ? "The import stopped, and nothing landed"
+            : "The import stopped part-way", subtitle: nothingLanded
+            ? "No section of the file was written."
+            : unknown
+                ? "It did not say how far it got, so check Settings before importing again."
+                : `${landed} of ${results.length} sections landed.`, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Choose another file" }), _jsx(Button, { variant: "primary", onClick: onNext, children: nothingLanded ? "Try the import again" : "Retry the rest" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Banner, { tone: "danger", children: message }), _jsx("p", { className: "text-sm text-fg-muted", children: "Retrying is safe: an import folds into what is already here rather than replacing it, so what landed is recognised and left alone." }), _jsx("div", { className: "divide-y divide-line", children: results.map((result) => (_jsx(CheckRow, { label: result.title, detail: result.detail, state: resultState(result.state) }, result.section))) }), _jsx(RawError, { children: raw })] }) }));
+}

package/dist/src/components/layout/AppShellSkeleton.d.ts

@@ -0,0 +1,9 @@
+/**
+ * AppShellSkeleton — structural placeholder shown on cold load.
+ *
+ * Renders the inbox chrome (nav rail + list rows) immediately, before the
+ * auth session hydrates and the config query resolves, so the user sees the
+ * shape of the app instead of a blank screen or a "Loading..." string. The
+ * real list components swap in once their own data arrives.
+ */
+export declare const AppShellSkeleton: () => import("react").JSX.Element;

package/dist/src/components/layout/AppShellSkeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppShellSkeleton — structural placeholder shown on cold load.
+ *
+ * Renders the inbox chrome (nav rail + list rows) immediately, before the
+ * auth session hydrates and the config query resolves, so the user sees the
+ * shape of the app instead of a blank screen or a "Loading..." string. The
+ * real list components swap in once their own data arrives.
+ */
+const NavRailSkeleton = () => (_jsxs("div", { className: "hidden h-full w-[17%] min-w-40 max-w-64 shrink-0 flex-col gap-1 border-r border-line p-3 md:flex", children: [_jsx("div", { className: "mb-3 h-6 w-24 rounded bg-surface-sunken" }), Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2 py-1.5", children: [_jsx("div", { className: "size-5 shrink-0 rounded bg-surface-sunken" }), _jsx("div", { className: "h-3.5 flex-1 rounded bg-surface-sunken" })] }, i)))] }));
+const ListRowsSkeleton = () => (_jsx("div", { className: "min-w-0 flex-1", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "flex items-start gap-3 border-b border-line py-2 pl-5 pr-4", children: [_jsx("div", { className: "mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("div", { className: "h-3.5 w-28 rounded bg-surface-sunken" }), _jsx("div", { className: "h-3 w-12 rounded bg-surface-sunken" })] }), _jsx("div", { className: "h-3.5 w-48 rounded bg-surface-sunken" }), _jsx("div", { className: "h-3 w-full rounded bg-surface-sunken" })] })] }, i))) }));
+export const AppShellSkeleton = () => (_jsxs("div", { className: "flex h-full animate-pulse bg-canvas", "aria-hidden": "true", children: [_jsx(NavRailSkeleton, {}), _jsx(ListRowsSkeleton, {})] }));

package/dist/src/components/layout/ComposeFab.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Floating Action Button for composing a new message. Mobile-only.
+ *
+ * Layout follows Material 3: 56×56 surface, 16px from the right and
+ * bottom edges (plus the iOS safe-area inset). Hidden when either:
+ *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
+ *     `/mail` shell also stops mounting the FAB above that width; the
+ *     `lg:hidden` class covers the pre-hydration frame.
+ *   - The single pane has something open — a conversation, or compose itself.
+ *     Every list says so in its path.
+ */
+export declare const ComposeFab: () => import("react").JSX.Element | null;

package/dist/src/components/layout/ComposeFab.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComposeFab as ComposeFabButton } from "@remit/ui";
+import { useOpenCompose, useOpensDetail } from "../../routing";
+/**
+ * Floating Action Button for composing a new message. Mobile-only.
+ *
+ * Layout follows Material 3: 56×56 surface, 16px from the right and
+ * bottom edges (plus the iOS safe-area inset). Hidden when either:
+ *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
+ *     `/mail` shell also stops mounting the FAB above that width; the
+ *     `lg:hidden` class covers the pre-hydration frame.
+ *   - The single pane has something open — a conversation, or compose itself.
+ *     Every list says so in its path.
+ */
+export const ComposeFab = () => {
+    const compose = useOpenCompose();
+    const opensDetail = useOpensDetail();
+    if (opensDetail)
+        return null;
+    return _jsx(ComposeFabButton, { onCompose: compose });
+};

package/dist/src/components/layout/Drawer.d.ts

@@ -0,0 +1,28 @@
+import { type OverlayAnswers } from "@remit/ui";
+import { type ReactNode } from "react";
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    ariaLabel?: string;
+    side?: "left" | "right";
+    widthClassName?: string;
+    /**
+     * Shortcuts the drawer keeps serving while it is up, beyond Escape. The key
+     * that opened it is the one that has to reach it — `i` closes the
+     * intelligence drawer it opened — and everything left undeclared is
+     * contained, so no verb acts on the list behind the scrim.
+     */
+    answers?: OverlayAnswers;
+}
+/**
+ * Modal navigation drawer. Slides in from the side with a scrim behind.
+ * Dismissed by scrim tap, escape key, or the close button. Focus moves into
+ * the drawer on open and returns to the previously focused element on close.
+ *
+ * Visibility is `isOpen` alone, at every width: the drawer is the intelligence
+ * surface wherever the rail has no room, which includes the two-pane desktop
+ * band between 1024 and 1280px.
+ */
+export declare const Drawer: ({ isOpen, onClose, children, ariaLabel, side, widthClassName, answers, }: DrawerProps) => import("react").JSX.Element | null;
+export {};

package/dist/src/components/layout/Drawer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, useModalFocus, useOverlayScope, } from "@remit/ui";
+import { X } from "lucide-react";
+import { useEffect, useRef } from "react";
+/**
+ * Modal navigation drawer. Slides in from the side with a scrim behind.
+ * Dismissed by scrim tap, escape key, or the close button. Focus moves into
+ * the drawer on open and returns to the previously focused element on close.
+ *
+ * Visibility is `isOpen` alone, at every width: the drawer is the intelligence
+ * surface wherever the rail has no room, which includes the two-pane desktop
+ * band between 1024 and 1280px.
+ */
+export const Drawer = ({ isOpen, onClose, children, ariaLabel = "Navigation", side = "left", widthClassName = "w-[80vw] max-w-[320px]", answers, }) => {
+    const drawerRef = useRef(null);
+    useOverlayScope({
+        id: "drawer",
+        open: isOpen,
+        answers: { back: onClose, ...answers },
+    });
+    useModalFocus(drawerRef, isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const sideClasses = side === "left"
+        ? "left-0 border-r animate-in slide-in-from-left duration-150"
+        : "right-0 border-l animate-in slide-in-from-right duration-150";
+    return (_jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, children: [_jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "absolute inset-0 bg-black/40 animate-in fade-in duration-150 cursor-default" }), _jsxs("div", { ref: drawerRef, tabIndex: -1, className: cn("safe-area-frame absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col", widthClassName, sideClasses), children: [_jsx("div", { className: "flex items-center justify-end h-12 px-2 border-b border-line shrink-0", children: _jsx("button", { type: "button", onClick: onClose, 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 menu", children: _jsx(X, { className: "size-5" }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: children })] })] }));
+};

package/dist/src/components/layout/MailShell.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+/**
+ * The chrome every list shares, published by the `/mail` layout and consumed by
+ * the list route that mounts the shell.
+ *
+ * It lives outside the route files for the same reason
+ * `lib/mail-context.ts` does: the generated route tree imports route files
+ * relatively, so a context declared inside one of them can resolve to a second
+ * module instance and hand the consumer an empty default.
+ */
+export interface MailShellChrome {
+    /**
+     * Below the reading boundary (phone AND tablet) the shell shows one pane, so
+     * the list route mounts its phone view instead of the slotted panes.
+     */
+    isSinglePane: boolean;
+    isLoading: boolean;
+    intelligenceOpen: boolean;
+    nav: ReactNode;
+    topBar: ReactNode;
+    overlay: ReactNode;
+    navOpen: boolean;
+    onOpenNav: () => void;
+    onCloseNav: () => void;
+}
+export declare const MailShellProvider: ({ chrome, children, }: {
+    chrome: MailShellChrome;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export interface MailShellProps {
+    /** The single pane, list and open thread both, below the reading boundary. */
+    phone: ReactNode;
+    list: ReactNode;
+    reading: ReactNode;
+    intelligence?: ReactNode;
+    /** Whether the reading pane has a thread — the intelligence rail needs one. */
+    hasThread?: boolean;
+}
+/**
+ * The shell a list route mounts around its own panes.
+ *
+ * Below the reading boundary the shell is one pane and takes `phone`, which
+ * swaps between the list and whatever is open in place. Above it the panes sit
+ * side by side and the reading and intelligence slots are filled.
+ *
+ * Compose is the one surface the single pane cannot take from the `Outlet`,
+ * because at this width there is no reading slot to fill. It is read off the
+ * address here rather than in each list's phone view, so the four lists cannot
+ * disagree about it.
+ */
+export declare function MailShell({ phone, list, reading, intelligence, hasThread, }: MailShellProps): import("react").JSX.Element;