@remit/web-client 0.0.325 → 0.0.327

package/dist/src/components/settings/CalendarFeedCard.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { CalendarFeedState } from "../../hooks/calendar/useCalendarFeed";
+export interface CalendarFeedCardProps {
+    calendarName: string;
+    /** The calendar's own settings, drawn above its subscription address. */
+    details?: ReactNode;
+    state: CalendarFeedState;
+    /** The address just minted, shown once. Empty at every other moment. */
+    mintedUrl: string;
+    isBusy: boolean;
+    /** A create, rotate or revoke the server turned down. */
+    actionError: unknown;
+    onMint: () => void;
+    onRevoke: () => void;
+    onDismissMinted: () => void;
+    onRetry: () => void;
+}
+export declare function CalendarFeedCard({ calendarName, details, state, mintedUrl, isBusy, actionError, onMint, onRevoke, onDismissMinted, onRetry, }: CalendarFeedCardProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarFeedCard.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Calendars: one calendar's secret subscription address (#1067).
+ *
+ * Presentational. Every state the server can put this control in is drawn —
+ * the read still out, the read refused, not shared, shared, and the one moment
+ * the address is legible — because a control that renders nothing for one of
+ * them is indistinguishable from a calendar that cannot be shared at all.
+ */
+import { Badge, Banner, Button, Card, CardBody, CardHeader, CardTitle, ConfirmDialog, ErrorState, formatErrorMessage, } from "@remit/ui";
+import { Check, Copy, Link2, RefreshCw, Trash2 } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { revokeFeedConfirmCopy, rotateFeedConfirmCopy, } from "../../lib/calendar-feed-copy";
+import { formatDatePreset } from "../../lib/format";
+function MintedAddress({ calendarName, url, onDismiss, }) {
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const revert = useRef(0);
+    useEffect(() => () => window.clearTimeout(revert.current), []);
+    const copy = () => {
+        navigator.clipboard
+            .writeText(url)
+            .then(() => {
+            setCopyFailed(false);
+            setCopied(true);
+            revert.current = window.setTimeout(() => setCopied(false), 2000);
+        })
+            .catch(() => setCopyFailed(true));
+    };
+    return (_jsxs("div", { className: "mt-3 space-y-2 rounded-sm border border-accent-2/40 bg-accent-2/10 px-3 py-2.5", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: "Subscribe with this address. It is shown once and cannot be read back." }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsx("input", { readOnly: true, value: url, "aria-label": `Subscription address for ${calendarName}`, onFocus: (event) => event.currentTarget.select(), className: "min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 py-1.5 font-mono text-xs text-fg" }), _jsx(Button, { variant: "primary", size: "sm", icon: copied ? (_jsx(Check, { className: "size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })), onClick: copy, children: copied ? "Copied" : "Copy address" })] }), copyFailed && (_jsx(Banner, { tone: "warning", variant: "soft", children: "The address could not be copied to the clipboard. Select it above and copy it by hand before leaving this page." })), _jsx("p", { className: "text-xs text-fg-muted", children: "Anyone holding this address can read every event in this calendar, without signing in. Rotate it if it reaches the wrong person." }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onDismiss, children: "I've saved it" })] }));
+}
+function ActiveFeed({ createdAt, rotatedAt, isBusy, onRotate, onRevoke, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { tone: "positive", children: "shared" }), _jsxs("span", { className: "text-xs text-fg-muted", children: ["Address created ", formatDatePreset(createdAt, "medium"), rotatedAt > 0
+                                ? `, last replaced ${formatDatePreset(rotatedAt, "medium")}`
+                                : ""] })] }), _jsx("p", { className: "text-sm text-fg-muted", children: "The address itself is not stored in readable form, so it cannot be shown again. Replace it if you no longer know where it went." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", disabled: isBusy, icon: _jsx(RefreshCw, { className: "size-3.5" }), onClick: onRotate, children: "Replace address" }), _jsx(Button, { variant: "danger", size: "sm", disabled: isBusy, icon: _jsx(Trash2, { className: "size-3.5" }), onClick: onRevoke, children: "Stop sharing" })] })] }));
+}
+export function CalendarFeedCard({ calendarName, details, state, mintedUrl, isBusy, actionError, onMint, onRevoke, onDismissMinted, onRetry, }) {
+    const [pending, setPending] = useState("none");
+    const titleId = useId();
+    const confirm = () => {
+        const action = pending;
+        setPending("none");
+        if (action === "rotate")
+            onMint();
+        if (action === "revoke")
+            onRevoke();
+    };
+    const copy = pending === "revoke"
+        ? revokeFeedConfirmCopy(calendarName)
+        : rotateFeedConfirmCopy(calendarName);
+    return (
+    // Named region: the settings page draws one of these per calendar, and every
+    // control in them is worded identically, so the calendar's name is the only
+    // thing telling two cards apart.
+    _jsxs(Card, { className: "max-w-xl", role: "region", "aria-labelledby": titleId, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { id: titleId, children: calendarName }) }), _jsxs(CardBody, { children: [details && (_jsx("div", { className: "mb-4 border-b border-line pb-4", children: details })), state.status === "loading" && mintedUrl === "" && (
+                    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on a loading skeleton is what assistive tech has to go on
+                    _jsx("div", { className: "h-12 animate-pulse rounded-sm bg-surface-sunken", "aria-busy": "true", "aria-label": `Loading the subscription address for ${calendarName}` })), state.status === "unreadable" && mintedUrl === "" && (_jsx(ErrorState, { variant: "inline", title: `Couldn't read whether ${calendarName} is shared`, error: state.error, onRetry: onRetry })), state.status === "absent" && mintedUrl === "" && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-fg-muted", children: "Give this calendar a secret address and Apple Calendar, Google Calendar, Outlook and Thunderbird can subscribe to it read-only. Nobody signs in \u2014 the address is the credential, so treat it like a password." }), _jsx(Button, { variant: "primary", size: "sm", disabled: isBusy, icon: _jsx(Link2, { className: "size-3.5" }), onClick: onMint, children: isBusy ? "Creating…" : "Create subscription address" })] })), state.status === "active" && (_jsx(ActiveFeed, { createdAt: state.createdAt, rotatedAt: state.rotatedAt, isBusy: isBusy, onRotate: () => setPending("rotate"), onRevoke: () => setPending("revoke") })), actionError !== undefined && actionError !== null && (_jsxs(Banner, { tone: "danger", variant: "soft", className: "mt-3", children: [_jsxs("p", { className: "font-medium", children: ["The subscription address for ", calendarName, " was not changed."] }), _jsx("p", { className: "mt-0.5 break-words", children: formatErrorMessage(actionError) })] })), mintedUrl !== "" && (_jsx(MintedAddress, { calendarName: calendarName, url: mintedUrl, onDismiss: onDismissMinted }))] }), _jsx(ConfirmDialog, { isOpen: pending !== "none", title: copy.title, description: copy.description, confirmLabel: pending === "revoke" ? "Stop sharing" : "Replace address", destructive: true, onConfirm: confirm, onCancel: () => setPending("none") })] }));
+}

package/dist/src/components/settings/CalendarFeedPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One calendar's subscription address, wired to the server (#1067).
+ *
+ * A component rather than a loop body in the settings route: each calendar
+ * reads and writes its own feed, and a hook cannot be called per iteration.
+ */
+import type { ReactNode } from "react";
+export interface CalendarFeedPanelProps {
+    calendarId: string;
+    calendarName: string;
+    details?: ReactNode;
+}
+export declare function CalendarFeedPanel({ calendarId, calendarName, details, }: CalendarFeedPanelProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarFeedPanel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCalendarFeed } from "../../hooks/calendar/useCalendarFeed";
+import { CalendarFeedCard } from "./CalendarFeedCard";
+export function CalendarFeedPanel({ calendarId, calendarName, details, }) {
+    const feed = useCalendarFeed(calendarId);
+    return (_jsx(CalendarFeedCard, { calendarName: calendarName, details: details, state: feed.state, mintedUrl: feed.mintedUrl, isBusy: feed.isBusy, actionError: feed.actionError, onMint: feed.mint, onRevoke: feed.revoke, onDismissMinted: feed.dismissMinted, onRetry: feed.retry }));
+}

package/dist/src/components/settings/CalendarSettingsPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One calendar on the settings page: its name and zone, deleting it, and its
+ * subscription address, wired to the server.
+ */
+import { type ReactNode } from "react";
+export interface CalendarSettingsPanelProps {
+    calendarId: string;
+    calendarName: string;
+    timezone: string;
+    /** Where a subscribed calendar comes from, drawn above its details. */
+    subscription?: ReactNode;
+}
+export declare function CalendarSettingsPanel({ calendarId, calendarName, timezone, subscription, }: CalendarSettingsPanelProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarSettingsPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One calendar on the settings page: its name and zone, deleting it, and its
+ * subscription address, wired to the server.
+ */
+import { useState } from "react";
+import { useCalendarCollectionWrites, } from "../../hooks/calendar/useCalendarCollectionWrites";
+import { CalendarDetailsForm } from "./CalendarDetailsForm";
+import { CalendarFeedPanel } from "./CalendarFeedPanel";
+export function CalendarSettingsPanel({ calendarId, calendarName, timezone, subscription, }) {
+    const { updateCalendar, deleteCalendar, isWriting } = useCalendarCollectionWrites();
+    const [problem, setProblem] = useState("");
+    const settle = (outcome) => setProblem(outcome.kind === "refused" ? outcome.message : "");
+    return (_jsx(CalendarFeedPanel, { calendarId: calendarId, calendarName: calendarName, details: _jsxs(_Fragment, { children: [subscription, _jsx(CalendarDetailsForm, { calendarName: calendarName, timezone: timezone, isBusy: isWriting, problem: problem, onSave: (details) => {
+                        setProblem("");
+                        void updateCalendar(calendarId, details).then(settle);
+                    }, onDelete: () => {
+                        setProblem("");
+                        void deleteCalendar(calendarId).then(settle);
+                    } }, `${calendarName}\u0000${timezone}`)] }) }));
+}

package/dist/src/components/settings/CalendarSubscribeCard.d.ts

@@ -0,0 +1,11 @@
+export interface CalendarSubscribeCardProps {
+    isBusy: boolean;
+    /** The subscribe the server turned down. */
+    error: unknown;
+    onSubscribe: (request: {
+        displayName: string;
+        url: string;
+    }, onDone: () => void) => void;
+}
+export declare const SUBSCRIBE_TITLE = "Subscribe to a calendar";
+export declare function CalendarSubscribeCard({ isBusy, error, onSubscribe, }: CalendarSubscribeCardProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarSubscribeCard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Calendars: subscribe a new calendar to a read-only iCalendar
+ * address (issue #1261).
+ *
+ * Presentational. The server reads the feed before it creates anything, so a
+ * refusal here means nothing was added, and the banner says so in those words.
+ */
+import { Banner, Button, Card, CardBody, CardHeader, CardTitle, formatErrorMessage, Input, } from "@remit/ui";
+import { CalendarPlus } from "lucide-react";
+import { useId, useState } from "react";
+export const SUBSCRIBE_TITLE = "Subscribe to a calendar";
+export function CalendarSubscribeCard({ isBusy, error, onSubscribe, }) {
+    const titleId = useId();
+    const nameId = useId();
+    const urlId = useId();
+    const [displayName, setDisplayName] = useState("");
+    const [url, setUrl] = useState("");
+    const ready = displayName.trim() !== "" && url.trim() !== "";
+    const submit = (event) => {
+        event.preventDefault();
+        if (!ready)
+            return;
+        onSubscribe({ displayName, url }, () => {
+            setDisplayName("");
+            setUrl("");
+        });
+    };
+    return (_jsxs(Card, { className: "max-w-xl", role: "region", "aria-labelledby": titleId, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { id: titleId, children: SUBSCRIBE_TITLE }) }), _jsx(CardBody, { children: _jsxs("form", { className: "space-y-3", onSubmit: submit, children: [_jsx("p", { className: "text-sm text-fg-muted", children: "Paste the secret iCal address from Google Calendar, a published Outlook calendar or any other feed. It shows here read-only and refreshes on its own." }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: nameId, className: "text-sm font-medium text-fg", children: "Calendar name" }), _jsx(Input, { id: nameId, value: displayName, onChange: (event) => setDisplayName(event.target.value), placeholder: "Team rota", autoComplete: "off" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: urlId, className: "text-sm font-medium text-fg", children: "Calendar address" }), _jsx(Input, { id: urlId, value: url, onChange: (event) => setUrl(event.target.value), placeholder: "https://calendar.google.com/calendar/ical/\u2026/basic.ics", autoComplete: "off", spellCheck: false, inputMode: "url" }), _jsx("p", { className: "text-xs text-fg-muted", children: "For Google Calendar the address is the password to the calendar. Reader never shows it in full again." })] }), _jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: !ready || isBusy, icon: _jsx(CalendarPlus, { className: "size-3.5" }), children: isBusy ? "Subscribing…" : "Subscribe" }), error !== undefined && error !== null && (_jsxs(Banner, { tone: "danger", variant: "soft", children: [_jsx("p", { className: "font-medium", children: "The calendar was not added." }), _jsx("p", { className: "mt-0.5 break-words", children: formatErrorMessage(error) })] }))] }) })] }));
+}

package/dist/src/components/settings/CalendarSubscriptionStatus.d.ts

@@ -0,0 +1,12 @@
+export interface CalendarSubscriptionStatusProps {
+    calendarName: string;
+    subscriptionUrl: string;
+    enabled: boolean;
+    fetchedAt: number;
+    error: string;
+    isBusy: boolean;
+    /** A pause or resume the server turned down. */
+    actionError: unknown;
+    onSetEnabled: (enabled: boolean) => void;
+}
+export declare function CalendarSubscriptionStatus({ calendarName, subscriptionUrl, enabled, fetchedAt, error, isBusy, actionError, onSetEnabled, }: CalendarSubscriptionStatusProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarSubscriptionStatus.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Calendars: where a subscribed calendar comes from, when it was
+ * last read, why it was not, and the switch that stops its refresh
+ * (issue #1261).
+ *
+ * The address itself is not drawn. For a Google feed it is the whole
+ * credential, so only its host is named.
+ */
+import { Badge, Banner, Button, formatErrorMessage } from "@remit/ui";
+import { Pause, Play } from "lucide-react";
+import { subscriptionHostOf } from "../../lib/calendar-subscription";
+import { formatDatePreset } from "../../lib/format";
+export function CalendarSubscriptionStatus({ calendarName, subscriptionUrl, enabled, fetchedAt, error, isBusy, actionError, onSetEnabled, }) {
+    return (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { tone: enabled ? "positive" : "neutral", children: enabled ? "subscribed" : "paused" }), _jsxs("span", { className: "text-xs text-fg-muted", children: ["Read-only, from ", subscriptionHostOf(subscriptionUrl), fetchedAt > 0
+                                ? `. Last updated ${formatDatePreset(fetchedAt, "medium")}`
+                                : ""] })] }), error !== "" && (_jsxs(Banner, { tone: "warning", variant: "soft", children: [_jsxs("p", { className: "font-medium", children: [calendarName, " was not refreshed."] }), _jsx("p", { className: "mt-0.5 break-words", children: error })] })), _jsx("p", { className: "text-sm text-fg-muted", children: enabled
+                    ? "Events are read from the feed on a schedule and cannot be edited here."
+                    : "Updates are paused. The events already here stay until you resume or remove the calendar." }), _jsx(Button, { variant: "secondary", size: "sm", disabled: isBusy, icon: enabled ? (_jsx(Pause, { className: "size-3.5" })) : (_jsx(Play, { className: "size-3.5" })), onClick: () => onSetEnabled(!enabled), children: enabled ? "Pause updates" : "Resume updates" }), actionError !== undefined && actionError !== null && (_jsxs(Banner, { tone: "danger", variant: "soft", children: [_jsxs("p", { className: "font-medium", children: ["Updates for ", calendarName, " were not changed."] }), _jsx("p", { className: "mt-0.5 break-words", children: formatErrorMessage(actionError) })] }))] }));
+}

package/dist/src/components/settings/ConfigExportCard.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Settings › Advanced: the two halves of moving a configuration between
+ * instances (#1021). Export writes the file this instance is set up with;
+ * import reads one back in through the wizard.
+ *
+ * A failed export says so where the button is. A dead download control is the
+ * worse outcome: the reader cannot tell whether it saved, whether it is broken,
+ * or whether they missed something.
+ */
+export interface ConfigExportCardProps {
+    fileName: string;
+    state?: "ready" | "downloading" | "failed";
+    /** The server's own words, kept for a bug report. */
+    error?: string;
+    onDownload?: () => void;
+    onImport?: () => void;
+}
+export declare function ConfigExportCard({ fileName, state, error, onDownload, onImport, }: ConfigExportCardProps): import("react").JSX.Element;

package/dist/src/components/settings/ConfigExportCard.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Advanced: the two halves of moving a configuration between
+ * instances (#1021). Export writes the file this instance is set up with;
+ * import reads one back in through the wizard.
+ *
+ * A failed export says so where the button is. A dead download control is the
+ * worse outcome: the reader cannot tell whether it saved, whether it is broken,
+ * or whether they missed something.
+ */
+import { Badge, Button, Card, CardBody, CardHeader, CardTitle, } from "@remit/ui";
+import { Download, FileJson, Loader2 } from "lucide-react";
+export function ConfigExportCard({ fileName, state = "ready", error, onDownload, onImport, }) {
+    const downloading = state === "downloading";
+    return (_jsxs(Card, { className: "max-w-xl", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Configuration file" }) }), _jsxs(CardBody, { children: [_jsx("p", { className: "text-sm text-fg-muted", children: "One versioned JSON document carrying every setting this instance holds: accounts and their servers, folder roles, rules, labels, flagged senders and appearance. No passwords and no OAuth tokens \u2014 you sign in again wherever you import it." }), state === "failed" && (_jsxs("div", { className: "mt-3 space-y-2 rounded-sm border border-danger/40 bg-danger-soft px-3 py-2.5", children: [_jsx("p", { className: "text-sm font-medium text-danger", children: "The config file could not be written." }), _jsxs("p", { className: "text-xs text-fg-muted", children: ["Nothing was downloaded. Try again \u2014 if it keeps failing, use", " ", _jsx("code", { className: "rounded bg-surface-sunken px-1 py-0.5", children: "remit config save" }), " ", "on the host in the meantime."] }), error && (_jsx("code", { className: "block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted", children: error }))] })), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", disabled: downloading, icon: downloading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(Download, { className: "size-3.5" })), onClick: onDownload, children: downloading ? "Preparing…" : `Download ${fileName}` }), _jsx(Badge, { tone: "neutral", children: "no passwords" })] }), _jsxs("p", { className: "mt-3 text-2xs text-fg-subtle", children: ["On the host, the same file comes from", " ", _jsxs("code", { className: "rounded bg-surface-sunken px-1 py-0.5", children: ["remit config save ~/", fileName] }), "."] }), _jsxs("div", { className: "mt-5 border-t border-line pt-4", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: "Import a config file" }), _jsx("p", { className: "mt-1 text-sm text-fg-muted", children: "Read a file from another Reader into this one. It shows what will change before anything is written, and asks for each account's credentials afterwards." }), _jsx(Button, { className: "mt-3", variant: "secondary", size: "sm", icon: _jsx(FileJson, { className: "size-3.5" }), onClick: onImport, children: "Import a config file" })] })] })] }));
+}

package/dist/src/components/settings/ConfigTransferPanel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The export card wired to the endpoint behind it.
+ *
+ * The download is minted in the browser from the export response rather than
+ * linked, because the route is bearer-authenticated and a plain link carries no
+ * token. `fetchQuery` rather than a mounted query: reading a whole
+ * configuration is what pressing the button asks for, not what opening the
+ * screen does.
+ *
+ * The read carries no `softError` meta on purpose. `GET /config/export` declares
+ * no refusal, so its failures are a 5xx — which must reach the fatal page rather
+ * than a card, and never be softened client-side — or a transport failure, which
+ * does not escalate and is exactly what the card's failed state renders.
+ */
+export declare function ConfigTransferPanel(): import("react").JSX.Element;

package/dist/src/components/settings/ConfigTransferPanel.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The export card wired to the endpoint behind it.
+ *
+ * The download is minted in the browser from the export response rather than
+ * linked, because the route is bearer-authenticated and a plain link carries no
+ * token. `fetchQuery` rather than a mounted query: reading a whole
+ * configuration is what pressing the button asks for, not what opening the
+ * screen does.
+ *
+ * The read carries no `softError` meta on purpose. `GET /config/export` declares
+ * no refusal, so its failures are a 5xx — which must reach the fatal page rather
+ * than a card, and never be softened client-side — or a transport failure, which
+ * does not escalate and is exactly what the card's failed state renders.
+ */
+import { configOperationsExportConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { exportFileName } from "../../lib/config-import";
+import { useGoToSection } from "../../routing";
+import { ConfigExportCard } from "./ConfigExportCard";
+const saveJson = (fileName, body) => {
+    const url = URL.createObjectURL(new Blob([JSON.stringify(body, null, 2)], { type: "application/json" }));
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.click();
+    URL.revokeObjectURL(url);
+};
+export function ConfigTransferPanel() {
+    const queryClient = useQueryClient();
+    const goToSection = useGoToSection();
+    const [state, setState] = useState("ready");
+    const [error, setError] = useState(undefined);
+    const fileName = exportFileName(new Date());
+    const handleDownload = () => {
+        if (state === "downloading")
+            return;
+        setState("downloading");
+        setError(undefined);
+        queryClient
+            .fetchQuery(configOperationsExportConfigOptions())
+            .then((response) => {
+            saveJson(fileName, response.document);
+            setState("ready");
+        })
+            .catch((cause) => {
+            setState("failed");
+            setError(cause instanceof Error
+                ? cause.message
+                : "GET /config/export did not answer with a configuration.");
+        });
+    };
+    return (_jsx(ConfigExportCard, { fileName: fileName, state: state, error: error, onDownload: handleDownload, onImport: () => goToSection("importConfig") }));
+}

package/dist/src/components/settings/DangerZone.d.ts

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

package/dist/src/components/settings/DangerZone.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DangerZoneSection } from "@remit/ui";
+import { useState } from "react";
+import { DeleteAccountDialog } from "./DeleteAccountDialog";
+export function DangerZone() {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return (_jsxs("section", { className: "mt-8 border-t border-line pt-6", children: [_jsx(DangerZoneSection, { title: "Delete your Remit account", description: "Disconnects every account and erases Remit's copy of your mail, insights and preferences. Your mail at the providers is untouched.", action: _jsx(Button, { variant: "danger", size: "sm", onClick: () => setDialogOpen(true), children: "Delete your Remit account" }) }), _jsx(DeleteAccountDialog, { open: dialogOpen, onClose: () => setDialogOpen(false) })] }));
+}

package/dist/src/components/settings/DeleteAccountDialog.d.ts

@@ -0,0 +1,13 @@
+interface DeleteAccountDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+/**
+ * Delete-account dialog. Safe to mount anywhere — `DangerZone` renders it
+ * unconditionally on the settings/accounts route. Identity comes from the
+ * composed auth provider's `Account` render-prop; when no session is active
+ * (e2e / visual harness / signed out) it falls back to the view with an empty
+ * identity and a no-op `signOut`.
+ */
+export declare function DeleteAccountDialog(props: DeleteAccountDialogProps): import("react").JSX.Element;
+export {};

package/dist/src/components/settings/DeleteAccountDialog.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { meOperationsCreateExportMutation, meOperationsDeleteMeMutation, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Button, Dialog, Input } from "@remit/ui";
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangle, Download, X } from "lucide-react";
+import { useState } from "react";
+import { useAuthProvider } from "../../auth/provider";
+function DeleteAccountDialogView({ open, onClose, accountEmail, signOut, }) {
+    const [confirmEmail, setConfirmEmail] = useState("");
+    const [mismatch, setMismatch] = useState(false);
+    const [deleted, setDeleted] = useState(false);
+    const mutation = useMutation({
+        ...meOperationsDeleteMeMutation(),
+        onSuccess: () => {
+            setDeleted(true);
+            setTimeout(() => signOut(), 2000);
+        },
+    });
+    const exportMutation = useMutation(meOperationsCreateExportMutation());
+    const handleClose = () => {
+        if (mutation.isPending)
+            return;
+        setConfirmEmail("");
+        setMismatch(false);
+        setDeleted(false);
+        mutation.reset();
+        exportMutation.reset();
+        onClose();
+    };
+    const handleDelete = () => {
+        if (confirmEmail.trim().toLowerCase() !== accountEmail.toLowerCase()) {
+            setMismatch(true);
+            return;
+        }
+        setMismatch(false);
+        mutation.mutate({ body: { confirmEmail: confirmEmail.trim() } });
+    };
+    return (_jsxs(Dialog, { open: open, onClose: handleClose, title: "Delete your Remit account", children: [_jsxs("header", { className: "flex items-center gap-2 border-b border-line px-5 py-3", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0 text-danger" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-fg", children: "Delete your Remit account" }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(X, { className: "size-3.5" }), onClick: handleClose, "aria-label": "Cancel" })] }), deleted ? (_jsxs("div", { className: "px-5 py-6 text-sm text-fg-muted", children: [_jsx("p", { className: "font-medium text-fg", children: "Account deletion scheduled." }), _jsx("p", { className: "mt-1", children: "Your data will be erased shortly. Signing you out\u2026" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4 px-5 py-4 text-sm text-fg-muted", children: [_jsx("p", { children: "This permanently erases everything Remit holds for you:" }), _jsxs("ul", { className: "space-y-1.5 text-xs", children: [_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "text-danger", children: "\u2022" }), "All connected accounts disconnected and access tokens revoked."] }), _jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "text-danger", children: "\u2022" }), "Synced mail cache and search index."] }), _jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "text-danger", children: "\u2022" }), "AI history and insights."] }), _jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "text-danger", children: "\u2022" }), "Preferences and rules."] })] }), _jsxs("div", { className: "rounded-sm border border-line bg-surface-sunken px-3 py-2 text-xs", children: [_jsx("strong", { className: "text-fg", children: "Your mail at Gmail / IMAP is not deleted." }), " ", "This only removes Remit's copy and its access \u2014 the mail stays in your provider mailboxes."] }), _jsxs("div", { className: "text-xs", children: [_jsxs("button", { type: "button", onClick: () => exportMutation.mutate({}), "aria-busy": exportMutation.isPending, className: "inline-flex items-center gap-1.5 font-medium text-accent hover:underline", children: [_jsx(Download, { className: "size-3.5" }), exportMutation.isPending
+                                                ? "Requesting export…"
+                                                : "Export my data first"] }), exportMutation.isSuccess && (
+                                    // biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
+                                    _jsx("p", { className: "mt-1.5 text-fg-muted", role: "status", children: "Export requested. We'll prepare a ZIP of your mail \u2014 find it under your data exports when it's ready." })), exportMutation.isError && (_jsx("p", { className: "mt-1.5 text-danger", role: "alert", children: "Couldn't start the export. Please try again." }))] }), _jsxs("div", { children: [_jsxs("label", { htmlFor: "confirm-remit-email", className: "mb-1 block text-xs font-medium text-fg", children: ["Type", " ", _jsx("span", { className: "font-mono text-fg-muted", children: accountEmail }), " ", "to confirm"] }), _jsx(Input, { id: "confirm-remit-email", type: "email", placeholder: accountEmail, value: confirmEmail, onChange: (e) => {
+                                            setConfirmEmail(e.target.value);
+                                            if (mismatch)
+                                                setMismatch(false);
+                                            if (mutation.isError)
+                                                mutation.reset();
+                                        }, autoComplete: "off" }), mismatch && (_jsx("p", { className: "mt-1.5 text-xs text-danger", role: "alert", children: "That doesn't match your account email. Type it exactly to confirm." })), mutation.isError && (_jsx("p", { className: "mt-1.5 text-xs text-danger", role: "alert", children: mutation.error instanceof Error
+                                            ? mutation.error.message
+                                            : "Something went wrong. Please try again." }))] })] }), _jsxs("footer", { className: "flex items-center justify-end gap-2 border-t border-line px-5 py-3", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: handleClose, children: "Cancel" }), _jsx(Button, { variant: "danger", size: "sm", onClick: handleDelete, "aria-busy": mutation.isPending, children: mutation.isPending ? "Deleting…" : "Delete everything" })] })] }))] }));
+}
+/**
+ * Delete-account dialog. Safe to mount anywhere — `DangerZone` renders it
+ * unconditionally on the settings/accounts route. Identity comes from the
+ * composed auth provider's `Account` render-prop; when no session is active
+ * (e2e / visual harness / signed out) it falls back to the view with an empty
+ * identity and a no-op `signOut`.
+ */
+export function DeleteAccountDialog(props) {
+    const { Account } = useAuthProvider();
+    return (_jsx(Account, { fallback: _jsx(DeleteAccountDialogView, { ...props, accountEmail: "", signOut: () => { } }), children: ({ email, signOut }) => (_jsx(DeleteAccountDialogView, { ...props, accountEmail: email ?? "", signOut: signOut })) }));
+}

package/dist/src/components/settings/DeleteFolderDialog.d.ts

@@ -0,0 +1,21 @@
+import type { RemitImapFolderAppointment, RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
+interface DeleteFolderDialogProps {
+    open: boolean;
+    accountId: string;
+    folder: RemitImapMailboxResponse;
+    mailboxes: readonly RemitImapMailboxResponse[];
+    appointments: readonly RemitImapFolderAppointment[];
+    onClose: () => void;
+}
+/**
+ * Per-folder delete wizard. An empty folder is a single destructive confirm,
+ * settled against a sync round asked for on the spot rather than the folder's
+ * last synced count — a wait the user can watch, keep, or cancel, and which
+ * deletes nothing until the server answers; a folder with mail asks what
+ * happens to the messages first — delete them with the folder, or move them
+ * elsewhere (batched, with visible progress) before the now-empty folder is
+ * removed. Closing mid-move keeps
+ * already-moved mail moved; re-opening enumerates what's left and continues.
+ */
+export declare function DeleteFolderDialog({ open, accountId, folder, mailboxes, appointments, onClose, }: DeleteFolderDialogProps): import("react").JSX.Element | null;
+export {};

package/dist/src/components/settings/DeleteFolderDialog.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Banner, Button, Dialog, FolderTreePicker, } from "@remit/ui";
+import { AlertTriangle, FolderInput, Loader2, Trash2, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCreateMailbox } from "../../hooks/useCreateMailbox";
+import { useDeleteFolder } from "../../hooks/useDeleteFolder";
+import { useFolderLabelTranslator } from "../../hooks/useFolderLabelTranslator";
+import { elapsedLabel, initialStage, moveProgressLabel, } from "../../lib/delete-folder";
+import { buildMailboxRoleMap, labelForMailbox } from "../../lib/folder-roles";
+import { buildMoveOptions } from "../../lib/move-options";
+const emailCount = (count) => `${count} ${count === 1 ? "email" : "emails"}`;
+/**
+ * Per-folder delete wizard. An empty folder is a single destructive confirm,
+ * settled against a sync round asked for on the spot rather than the folder's
+ * last synced count — a wait the user can watch, keep, or cancel, and which
+ * deletes nothing until the server answers; a folder with mail asks what
+ * happens to the messages first — delete them with the folder, or move them
+ * elsewhere (batched, with visible progress) before the now-empty folder is
+ * removed. Closing mid-move keeps
+ * already-moved mail moved; re-opening enumerates what's left and continues.
+ */
+export function DeleteFolderDialog({ open, accountId, folder, mailboxes, appointments, onClose, }) {
+    const [stage, setStage] = useState(() => initialStage(folder.messageCount));
+    const [arrivedSinceSync, setArrivedSinceSync] = useState();
+    const [destinationId, setDestinationId] = useState();
+    const { createFolderIn } = useCreateMailbox(accountId);
+    const translator = useFolderLabelTranslator();
+    const { phase, progress, errorMessage, checkStartedAt, deleteMailbox, deleteIfEmpty, moveThenDelete, cancel, reset, } = useDeleteFolder({
+        accountId,
+        mailboxId: folder.mailboxId,
+        onDeleted: onClose,
+    });
+    const [checkElapsed, setCheckElapsed] = useState("0:00");
+    // The check has no progress to report — only that it is still waiting — so
+    // the wait itself is what the surface shows, ticking, for as long as it runs.
+    const waiting = phase === "checking" || phase === "check-stalled";
+    useEffect(() => {
+        if (!waiting || checkStartedAt === undefined)
+            return;
+        const update = () => setCheckElapsed(elapsedLabel(Date.now() - checkStartedAt));
+        update();
+        const timer = setInterval(update, 1000);
+        return () => clearInterval(timer);
+    }, [waiting, checkStartedAt]);
+    // Opening the dialog stages it; a count arriving later deliberately does not.
+    // The refusal below invalidates the folder list on purpose, and re-staging on
+    // the count that refetch brings back would wipe the refusal off the screen.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: folder.messageCount is read at open and must not re-run this.
+    useEffect(() => {
+        if (!open)
+            return;
+        setStage(initialStage(folder.messageCount));
+        setArrivedSinceSync(undefined);
+        reset();
+    }, [open, reset]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setDestinationId(undefined);
+    }, [open]);
+    useEffect(() => cancel, [cancel]);
+    const handleClose = useCallback(() => {
+        cancel();
+        onClose();
+    }, [cancel, onClose]);
+    const handleDeleteEmpty = useCallback(async () => {
+        const outcome = await deleteIfEmpty();
+        if (outcome.status !== "blocked")
+            return;
+        setArrivedSinceSync(outcome.messageCount);
+        setStage("choose-fate");
+    }, [deleteIfEmpty]);
+    const destinations = useMemo(() => buildMoveOptions({
+        mailboxes,
+        folderAppointments: appointments,
+        excludeMailboxId: folder.mailboxId,
+        translator,
+    }), [mailboxes, appointments, folder.mailboxId, translator]);
+    const destination = destinations.find((option) => option.id === destinationId);
+    const name = useMemo(() => labelForMailbox(folder, buildMailboxRoleMap(appointments).get(folder.mailboxId), translator), [folder, appointments, translator]);
+    if (!open)
+        return null;
+    const title = `Delete ${name}`;
+    const messageCount = arrivedSinceSync ?? folder.messageCount;
+    const body = (() => {
+        if (phase === "moving") {
+            return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-5 py-10 text-center", children: [_jsx(Loader2, { className: "size-8 animate-spin text-accent-2" }), _jsx("p", { className: "text-sm font-medium text-fg", children: "Moving emails\u2026" }), _jsx("p", { className: "text-xs text-fg-muted", role: "status", "aria-live": "polite", children: progress ? moveProgressLabel(progress) : "Moved 0 of 0" })] }));
+        }
+        if (phase === "checking") {
+            return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-5 py-10 text-center", children: [_jsx(Loader2, { className: "size-8 animate-spin text-accent-2" }), _jsx("p", { className: "text-sm font-medium text-fg", children: "Checking the folder on the mail server\u2026" }), _jsx("p", { className: "text-xs text-fg-muted", role: "status", "aria-live": "polite", children: `Waiting ${checkElapsed}. Nothing is deleted until the server answers.` })] }));
+        }
+        if (phase === "check-stalled") {
+            return (_jsxs("div", { className: "space-y-4 px-5 py-4", children: [_jsx(Banner, { tone: "warning", variant: "soft", children: `The mail server hasn't reported back on this folder yet — ${checkElapsed} so far. Nothing has been deleted.` }), _jsx("p", { className: "text-xs text-fg-muted", children: "A sync covers the whole account, so a busy mailbox can take a while to come round to this folder." }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: handleClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: () => handleDeleteEmpty(), children: "Keep waiting" })] })] }));
+        }
+        if (phase === "deleting" || phase === "done") {
+            return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-5 py-10 text-center", children: [_jsx(Loader2, { className: "size-8 animate-spin text-accent-2" }), _jsx("p", { className: "text-sm font-medium text-fg", children: "Deleting folder\u2026" })] }));
+        }
+        if (phase === "error") {
+            return (_jsxs("div", { className: "space-y-4 px-5 py-4", children: [_jsx(Banner, { tone: "danger", variant: "soft", children: errorMessage ?? "Something went wrong. Please try again." }), progress && (_jsxs("p", { className: "text-xs text-fg-muted", children: [moveProgressLabel(progress), ". Already-moved emails stay moved \u2014 re-open delete to continue with the rest."] })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "secondary", size: "sm", onClick: handleClose, children: "Close" }) })] }));
+        }
+        if (stage === "confirm-empty") {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3 px-5 py-4 text-sm text-fg-muted", children: _jsxs("p", { children: ["Delete ", _jsx("strong", { className: "text-fg", children: name }), "? This folder is empty and will be removed from the server."] }) }), _jsxs("footer", { className: "flex items-center justify-end gap-2 border-t border-line px-5 py-3", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: handleClose, children: "Cancel" }), _jsx(Button, { variant: "danger", size: "sm", icon: _jsx(Trash2, { className: "size-3.5" }), onClick: () => handleDeleteEmpty(), children: "Delete folder" })] })] }));
+        }
+        if (stage === "choose-fate") {
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-3 px-5 py-4 text-sm text-fg-muted", children: [arrivedSinceSync !== undefined && (_jsx(Banner, { tone: "warning", variant: "soft", children: `This folder is not empty: the mail server reports ${emailCount(arrivedSinceSync)} in it. Nothing was deleted.` })), _jsxs("p", { children: [_jsx("strong", { className: "text-fg", children: name }), " holds", " ", emailCount(messageCount), ". What should happen to them?"] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { type: "button", onClick: () => setStage("confirm-delete-all"), className: "flex w-full items-center gap-3 rounded-sm border border-line px-3 py-2.5 text-left hover:bg-surface-raised", children: [_jsx(Trash2, { className: "size-4 shrink-0 text-danger" }), _jsxs("span", { className: "flex-1", children: [_jsx("span", { className: "block text-sm font-medium text-fg", children: "Delete them with the folder" }), _jsx("span", { className: "block text-xs text-fg-muted", children: "The emails are removed from the server and can't be recovered." })] })] }), _jsxs("button", { type: "button", onClick: () => setStage("pick-destination"), className: "flex w-full items-center gap-3 rounded-sm border border-line px-3 py-2.5 text-left hover:bg-surface-raised", children: [_jsx(FolderInput, { className: "size-4 shrink-0 text-accent-2" }), _jsxs("span", { className: "flex-1", children: [_jsx("span", { className: "block text-sm font-medium text-fg", children: "Move them to another folder" }), _jsx("span", { className: "block text-xs text-fg-muted", children: "Keep the emails, then delete the emptied folder." })] })] })] })] }), _jsx("footer", { className: "flex items-center justify-end gap-2 border-t border-line px-5 py-3", children: _jsx(Button, { variant: "secondary", size: "sm", onClick: handleClose, children: "Cancel" }) })] }));
+        }
+        if (stage === "confirm-delete-all") {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3 px-5 py-4 text-sm text-fg-muted", children: _jsxs("p", { children: ["Delete ", _jsx("strong", { className: "text-fg", children: name }), " and its", " ", emailCount(messageCount), "? The messages are removed from the server with the folder and can't be recovered."] }) }), _jsxs("footer", { className: "flex items-center justify-end gap-2 border-t border-line px-5 py-3", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setStage("choose-fate"), children: "Back" }), _jsx(Button, { variant: "danger", size: "sm", icon: _jsx(Trash2, { className: "size-3.5" }), onClick: () => deleteMailbox(), children: "Delete folder and emails" })] })] }));
+        }
+        return (_jsxs("div", { className: "flex h-[26rem] flex-col", children: [_jsxs("p", { className: "px-5 pt-4 text-sm text-fg-muted", children: ["Move the ", emailCount(messageCount), " in", " ", _jsx("strong", { className: "text-fg", children: name }), " to:"] }), _jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx(FolderTreePicker, { folders: destinations, selectedId: destinationId, delimiter: mailboxes[0]?.hierarchyDelimiter ?? "/", onSelect: setDestinationId, onCreateFolder: createFolderIn, onCancel: () => {
+                            setDestinationId(undefined);
+                            setStage("choose-fate");
+                        }, labels: { filterPlaceholder: "Move emails to…" } }) }), destination && (_jsx("footer", { className: "shrink-0 border-t border-line p-2", children: _jsx(Button, { variant: "danger", onClick: () => moveThenDelete(destination.id), className: "h-11 w-full font-semibold", children: _jsx("span", { className: "truncate", children: `Move ${emailCount(messageCount)} to ${destination.label}` }) }) }))] }));
+    })();
+    return (_jsxs(Dialog, { open: open, onClose: handleClose, title: title, children: [_jsxs("header", { className: "flex items-center gap-2 border-b border-line px-5 py-3", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0 text-danger" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-fg", children: title }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(X, { className: "size-3.5" }), onClick: handleClose, "aria-label": "Cancel" })] }), body] }));
+}

package/dist/src/components/settings/FilterActionError.d.ts

@@ -0,0 +1,8 @@
+interface FilterActionErrorProps {
+    title: string;
+    error: unknown;
+    onRetry: () => void;
+    reportHref: (message: string) => string;
+}
+export declare function FilterActionError({ title, error, onRetry, reportHref, }: FilterActionErrorProps): import("react").JSX.Element;
+export {};

package/dist/src/components/settings/FilterActionError.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorState, formatErrorMessage } from "@remit/ui";
+import { getErrorStatus } from "../../lib/error-classifier";
+const isRefusal = (error) => {
+    const status = getErrorStatus(error);
+    return status !== undefined && status >= 400 && status < 500;
+};
+export function FilterActionError({ title, error, onRetry, reportHref, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(ErrorState, { variant: "inline", title: title, error: error, onRetry: isRefusal(error) ? undefined : onRetry }), _jsx("a", { href: reportHref(formatErrorMessage(error)), target: "_blank", rel: "noreferrer", className: "text-xs text-accent hover:underline", children: "Report an issue" })] }));
+}