@rapidmx/web-client 0.4.0 → 0.5.0

package/dist/apps/shared/components/admin/settings/RetentionPolicyForm.js

@@ -3,34 +3,59 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { MIN_AUDIT_LOG_RETENTION_DAYS, updateRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** Whether saving `next` days newly starts purging (nothing was configured) or purges sooner than `saved` days. */
+function shortensRetention(next, saved) {
+    return next != null && (saved == null || next < saved);
+}
 /** The retention policy editor, shared by the Retention Policy page and the setup wizard. */
-export default function RetentionPolicyForm({ policy, onChange }) {
+export default function RetentionPolicyForm({ policy, onChange, onDirtyChange, }) {
     const [messageRetentionDays, setMessageRetentionDays] = useState(policy.messageRetentionDays?.toString() ?? "");
     const [auditLogRetentionDays, setAuditLogRetentionDays] = useState(policy.auditLogRetentionDays?.toString() ?? "");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
-    async function handleSubmit(e) {
+    // Edits are unsaved until they match what was loaded or last saved.
+    const snapshot = JSON.stringify([messageRetentionDays, auditLogRetentionDays]);
+    const [savedSnapshot, setSavedSnapshot] = useState(snapshot);
+    const dirty = snapshot !== savedSnapshot;
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
+    // The retention currently in effect, and a pending save that would newly start or shorten either period - which
+    // permanently deletes existing mail or audit-log entries on the next purge run, so it's confirmed first.
+    const [savedMessageDays, setSavedMessageDays] = useState(policy.messageRetentionDays);
+    const [savedAuditDays, setSavedAuditDays] = useState(policy.auditLogRetentionDays);
+    const [pendingPatch, setPendingPatch] = useState(null);
+    function handleSubmit(e) {
         e.preventDefault();
+        // A blank field is sent as `null`, which clears a configured age back to no automatic purge.
+        const patch = {
+            messageRetentionDays: messageRetentionDays.trim() === "" ? null : Number(messageRetentionDays),
+            auditLogRetentionDays: auditLogRetentionDays.trim() === "" ? null : Number(auditLogRetentionDays),
+        };
+        if (shortensRetention(patch.messageRetentionDays, savedMessageDays) ||
+            shortensRetention(patch.auditLogRetentionDays, savedAuditDays)) {
+            setPendingPatch(patch);
+            return;
+        }
+        void save(patch);
+    }
+    async function save(patch) {
+        setPendingPatch(null);
         setError(null);
         setSaved(false);
         setSaving(true);
         try {
-            const patch = {};
-            if (messageRetentionDays.trim() !== "") {
-                patch.messageRetentionDays = Number(messageRetentionDays);
-            }
-            if (auditLogRetentionDays.trim() !== "") {
-                patch.auditLogRetentionDays = Number(auditLogRetentionDays);
-            }
             const updated = await updateRetentionPolicy(patch);
+            setSavedMessageDays(updated.messageRetentionDays);
+            setSavedAuditDays(updated.auditLogRetentionDays);
             onChange(updated);
+            setSavedSnapshot(snapshot);
             setSaved(true);
         }
         catch (err) {
@@ -40,5 +65,9 @@ export default function RetentionPolicyForm({ policy, onChange }) {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Retention Policy" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Automatically and permanently deletes mail/audit-log entries older than the configured age. Leave a field blank for no automatic purge. This does not apply to a mailbox that is a custodian on an active legal hold \u2014 a held message is skipped and retried on a later run once the hold is lifted." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message retention (days)" }), _jsx("input", { "aria-label": "Message retention (days)", type: "number", min: 1, className: INPUT_CLASS, value: messageRetentionDays, onChange: (e) => setMessageRetentionDays(e.target.value), placeholder: "No automatic purge" }), _jsx("span", { className: "text-xs text-text-muted", children: "Applies to any message, in any folder, regardless of age." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Audit log retention (days)" }), _jsx("input", { "aria-label": "Audit log retention (days)", type: "number", min: MIN_AUDIT_LOG_RETENTION_DAYS, className: INPUT_CLASS, value: auditLogRetentionDays, onChange: (e) => setAuditLogRetentionDays(e.target.value), placeholder: "Keep forever" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Cannot be set below ", MIN_AUDIT_LOG_RETENTION_DAYS, " days. Never applies to the tamper-evident escrow audit chain."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));
+    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Retention Policy" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Automatically and permanently deletes mail/audit-log entries older than the configured age. Leave a field blank for no automatic purge. This does not apply to a mailbox that is a custodian on an active legal hold \u2014 a held message is skipped and retried on a later run once the hold is lifted." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message retention (days)" }), _jsx("input", { "aria-label": "Message retention (days)", type: "number", min: 1, className: INPUT_CLASS, value: messageRetentionDays, onChange: (e) => setMessageRetentionDays(e.target.value), placeholder: "No automatic purge" }), _jsx("span", { className: "text-xs text-text-muted", children: "Applies to any message, in any folder, regardless of age." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Audit log retention (days)" }), _jsx("input", { "aria-label": "Audit log retention (days)", type: "number", min: MIN_AUDIT_LOG_RETENTION_DAYS, className: INPUT_CLASS, value: auditLogRetentionDays, onChange: (e) => setAuditLogRetentionDays(e.target.value), placeholder: "Keep forever" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Cannot be set below ", MIN_AUDIT_LOG_RETENTION_DAYS, " days. Never applies to the tamper-evident escrow audit chain."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] }), _jsxs(Modal, { open: pendingPatch !== null, onClose: () => setPendingPatch(null), title: "Delete older data?", children: [shortensRetention(pendingPatch?.messageRetentionDays, savedMessageDays) && (_jsxs("p", { className: "text-sm mb-3", children: [savedMessageDays == null
+                                ? "Mail isn't deleted automatically today."
+                                : `Mail is currently kept for ${savedMessageDays} days.`, " ", "With this change, every message older than ", _jsxs("strong", { children: [pendingPatch?.messageRetentionDays, " days"] }), ", in every mailbox and folder, is permanently deleted on the next purge run - and so on from then on. Mailboxes on an active legal hold are skipped."] })), shortensRetention(pendingPatch?.auditLogRetentionDays, savedAuditDays) && (_jsxs("p", { className: "text-sm mb-3", children: [savedAuditDays == null
+                                ? "Audit-log entries are kept forever today."
+                                : `Audit-log entries are currently kept for ${savedAuditDays} days.`, " ", "With this change, every audit-log entry older than", " ", _jsxs("strong", { children: [pendingPatch?.auditLogRetentionDays, " days"] }), " is permanently deleted on the next purge run. The escrow audit chain is never purged."] })), _jsx("p", { className: "text-sm font-semibold text-danger mb-4", children: "Deleted data can\u2019t be recovered." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setPendingPatch(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void save(pendingPatch), children: "Save and delete older data" })] })] })] }));
 }

package/dist/apps/shared/components/admin/setup/EscrowSetupStep.js

@@ -11,8 +11,10 @@ import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import EscrowScopeKeyAndHoldersFields, { emptyEscrowScopeKeyAndHoldersValue, } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
+import EscrowScopeKeyAndHoldersFields, { emptyEscrowScopeKeyAndHoldersValue, selfAsHolderError, } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** How long a download's object URL is kept, since some browsers are still reading it after the click returns. */
+export const DOWNLOAD_URL_LIFETIME_MS = 60000;
 /** Offers `text` to the browser as a file download. */
 export function downloadTextFile(filename, text, type = "application/x-pem-file") {
     const url = URL.createObjectURL(new Blob([text], { type }));
@@ -22,7 +24,7 @@ export function downloadTextFile(filename, text, type = "application/x-pem-file"
     document.body.appendChild(link);
     link.click();
     link.remove();
-    URL.revokeObjectURL(url);
+    setTimeout(() => URL.revokeObjectURL(url), DOWNLOAD_URL_LIFETIME_MS);
 }
 function fileSafe(name) {
     return name.trim().replace(/[^A-Za-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "") || "escrow";
@@ -33,12 +35,13 @@ function fileSafe(name) {
  * generate the key pair here (downloading the private key, which never leaves the browser), paste in an existing
  * certificate, or go without escrow.
  */
-export default function EscrowSetupStep() {
+export default function EscrowSetupStep({ adminUid }) {
     const [scopes, setScopes] = useState(null);
     const [mode, setMode] = useState("none");
     const [name, setName] = useState("Escrow");
     const [validYears, setValidYears] = useState(5);
     const [generated, setGenerated] = useState(null);
+    const [downloadedPrivateKey, setDownloadedPrivateKey] = useState(false);
     const [savedPrivateKey, setSavedPrivateKey] = useState(false);
     const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
     const [error, setError] = useState(null);
@@ -52,6 +55,7 @@ export default function EscrowSetupStep() {
         setMode(next);
         setError(null);
         setGenerated(null);
+        setDownloadedPrivateKey(false);
         setSavedPrivateKey(false);
         setKeyAndHolders(emptyEscrowScopeKeyAndHoldersValue());
     }
@@ -88,7 +92,17 @@ export default function EscrowSetupStep() {
             setError("A name is required.");
             return;
         }
-        if (!keyAndHolders.publicKey.trim() || !keyAndHolders.keyType.trim() || !keyAndHolders.fingerprint.trim()) {
+        // Generated keys are used exactly as generated; only a pasted-in certificate's fields come from the form.
+        const publicKey = generated
+            ? generated.publicKey
+            : {
+                publicKey: keyAndHolders.publicKey.trim(),
+                type: keyAndHolders.keyType.trim(),
+                fingerprint: keyAndHolders.fingerprint.trim(),
+                notBefore: new Date(keyAndHolders.notBefore).getTime(),
+                notAfter: new Date(keyAndHolders.notAfter).getTime(),
+            };
+        if (!publicKey.publicKey || !publicKey.type || !publicKey.fingerprint) {
             setError("The public key, its type, and its fingerprint are all required.");
             return;
         }
@@ -100,17 +114,16 @@ export default function EscrowSetupStep() {
             setError("Required holders must be between 1 and the number of holders.");
             return;
         }
+        const selfError = selfAsHolderError(keyAndHolders.holderUserUids, adminUid);
+        if (selfError) {
+            setError(selfError);
+            return;
+        }
         setBusy(true);
         try {
             const created = await createEscrowScope({
                 name: name.trim(),
-                publicKey: {
-                    publicKey: keyAndHolders.publicKey.trim(),
-                    type: keyAndHolders.keyType.trim(),
-                    fingerprint: keyAndHolders.fingerprint.trim(),
-                    notBefore: new Date(keyAndHolders.notBefore).getTime(),
-                    notAfter: new Date(keyAndHolders.notAfter).getTime(),
-                },
+                publicKey,
                 holderUserUids: keyAndHolders.holderUserUids,
                 requiredHolders: keyAndHolders.requiredHolders,
                 notifySubjectOnAccess: keyAndHolders.notifySubjectOnAccess,
@@ -126,6 +139,9 @@ export default function EscrowSetupStep() {
             setBusy(false);
         }
     }
-    const scopeForm = (_jsxs("form", { onSubmit: create, className: "flex flex-col gap-5", children: [_jsx(EscrowScopeKeyAndHoldersFields, { value: keyAndHolders, onChange: setKeyAndHolders, disabled: mode === "generate" && busy }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: busy, disabled: busy, className: "!w-auto", children: "Create escrow scope" }) })] }));
-    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "Escrow" }), _jsx("p", { className: "text-sm text-text-muted", children: "Escrow lets a group of trusted holders - for example your legal or compliance team - recover a mailbox\u2019s encrypted mail when they all agree to. It\u2019s optional. Without it, mail that someone encrypts can\u2019t be recovered if they lose their keys, by anyone." })] }), scopes && scopes.length > 0 && (_jsxs("div", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Escrow scopes set up: ", scopes.map((scope) => scope.name).join(", "), "."] })), error && _jsx(Alert, { children: error }), _jsxs("fieldset", { className: "flex flex-col gap-2 text-sm", children: [_jsx("legend", { className: "font-semibold mb-1", children: "How do you want to set up escrow?" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "generate", onChange: () => chooseMode("generate") }), "Generate new escrow keys in this browser"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "existing", onChange: () => chooseMode("existing") }), "Use a certificate I already have"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "none", onChange: () => chooseMode("none") }), scopes && scopes.length > 0 ? "Don't add another escrow scope" : "Don't use escrow"] })] }), mode !== "none" && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Escrow scope name", htmlFor: "escrowName", children: _jsx("input", { id: "escrowName", type: "text", className: INPUT_CLASS, value: name, disabled: !!generated, onChange: (e) => setName(e.target.value) }) }), mode === "generate" && !generated && (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Keys valid for", htmlFor: "escrowValidYears", children: _jsx("select", { id: "escrowValidYears", className: INPUT_CLASS, value: validYears, onChange: (e) => setValidYears(Number(e.target.value)), children: [1, 2, 5, 10].map((years) => (_jsxs("option", { value: years, children: [years, " ", years === 1 ? "year" : "years"] }, years))) }) }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void generate(), children: "Generate keys" })] })), mode === "generate" && generated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx(Alert, { children: "Download the private key now and give it to your escrow holders. It isn\u2019t stored anywhere else - if it\u2019s lost, no escrowed mail can ever be recovered." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem), children: "Download private key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-certificate.pem`, generated.certificatePem), children: "Download certificate" })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: savedPrivateKey, onChange: (e) => setSavedPrivateKey(e.target.checked) }), "I\u2019ve saved the private key somewhere safe"] })] }))] })), mode === "existing" && scopeForm, mode === "generate" && generated && savedPrivateKey && scopeForm] }));
+    const scopeForm = (_jsxs("form", { onSubmit: create, className: "flex flex-col gap-5", children: [_jsx(EscrowScopeKeyAndHoldersFields, { value: keyAndHolders, onChange: setKeyAndHolders, disabled: mode === "generate" && busy, keyReadOnly: mode === "generate" }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: busy, disabled: busy, className: "!w-auto", children: "Create escrow scope" }) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "Escrow" }), _jsx("p", { className: "text-sm text-text-muted", children: "Escrow lets a group of trusted holders - for example your legal or compliance team - recover a mailbox\u2019s encrypted mail when they all agree to. It\u2019s optional. Without it, mail that someone encrypts can\u2019t be recovered if they lose their keys, by anyone." })] }), scopes && scopes.length > 0 && (_jsxs("div", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Escrow scopes set up: ", scopes.map((scope) => scope.name).join(", "), "."] })), error && _jsx(Alert, { children: error }), _jsxs("fieldset", { className: "flex flex-col gap-2 text-sm", children: [_jsx("legend", { className: "font-semibold mb-1", children: "How do you want to set up escrow?" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "generate", onChange: () => chooseMode("generate") }), "Generate new escrow keys in this browser"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "existing", onChange: () => chooseMode("existing") }), "Use a certificate I already have"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "none", onChange: () => chooseMode("none") }), scopes && scopes.length > 0 ? "Don't add another escrow scope" : "Don't use escrow"] })] }), mode !== "none" && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Escrow scope name", htmlFor: "escrowName", children: _jsx("input", { id: "escrowName", type: "text", className: INPUT_CLASS, value: name, disabled: !!generated, onChange: (e) => setName(e.target.value) }) }), mode === "generate" && !generated && (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Keys valid for", htmlFor: "escrowValidYears", children: _jsx("select", { id: "escrowValidYears", className: INPUT_CLASS, value: validYears, onChange: (e) => setValidYears(Number(e.target.value)), children: [1, 2, 5, 10].map((years) => (_jsxs("option", { value: years, children: [years, " ", years === 1 ? "year" : "years"] }, years))) }) }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void generate(), children: "Generate keys" })] })), mode === "generate" && generated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx(Alert, { children: "Download the private key now and give it to your escrow holders. It isn\u2019t stored anywhere else - if it\u2019s lost, no escrowed mail can ever be recovered." }), _jsx(Alert, { children: "You\u2019re downloading this private key, so you must not also be one of its holders: pick holders other than yourself, hand the key over, and delete your copy once they have it. Otherwise one person could both configure escrow and recover mail with it." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", onClick: () => {
+                                            downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem);
+                                            setDownloadedPrivateKey(true);
+                                        }, children: "Download private key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-certificate.pem`, generated.certificatePem), children: "Download certificate" })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: savedPrivateKey, disabled: !downloadedPrivateKey, onChange: (e) => setSavedPrivateKey(e.target.checked) }), "I\u2019ve saved the private key somewhere safe"] }), !downloadedPrivateKey && (_jsx("p", { className: "text-xs text-text-muted", children: "Download the private key before continuing." }))] }))] })), mode === "existing" && scopeForm, mode === "generate" && generated && savedPrivateKey && scopeForm] }));
 }

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
@@ -15,6 +15,7 @@ import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import BrandingForm from "../settings/BrandingForm.js";
 import DomainDnsSetup from "../settings/DomainDnsSetup.js";
 import EncryptionPolicyForm, { isEncryptionEnabled } from "../settings/EncryptionPolicyForm.js";
@@ -36,6 +37,9 @@ export const SETUP_STEPS = [
 function isStepId(value) {
     return SETUP_STEPS.some((step) => step.id === value);
 }
+function errorMessage(err, fallback) {
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
 /**
  * The first-run setup wizard. Each step saves as the administrator works through it; the wizard itself only records
  * which step they're on (so leaving and coming back resumes there) and, at the end, that setup is finished. Every step
@@ -43,14 +47,31 @@ function isStepId(value) {
  */
 export default function SetupWizard({ userUid }) {
     const [step, setStep] = useState(null);
+    const [status, setStatus] = useState();
     const [domains, setDomains] = useState([]);
+    const [domainsError, setDomainsError] = useState(null);
     const [encryption, setEncryption] = useState(null);
     const [finishing, setFinishing] = useState(false);
     const [error, setError] = useState(null);
-    useEffect(() => {
-        void Promise.all([getSetupStatus().catch(() => undefined), listDomains({ limit: 25 }).catch(() => [])]).then(([status, list]) => {
+    /** Which of the settings step's forms have edits that haven't been saved. */
+    const [unsaved, setUnsaved] = useState({});
+    /** The step the administrator asked to go to while the settings step had unsaved edits. */
+    const [leavingTo, setLeavingTo] = useState(null);
+    const [progressFailed, setProgressFailed] = useState(false);
+    /** Step saves run one at a time, and only the latest step still waiting is saved. */
+    const progress = useRef({ running: null, next: null });
+    function loadDomains() {
+        return listDomains({ limit: 25 })
+            .then((list) => {
             setDomains(list);
-            setStep(isStepId(status?.currentStep) ? status.currentStep : "plugins");
+            setDomainsError(null);
+        })
+            .catch((err) => setDomainsError(errorMessage(err, "Could not load your domains.")));
+    }
+    useEffect(() => {
+        void Promise.all([getSetupStatus().catch(() => undefined), loadDomains()]).then(([loaded]) => {
+            setStatus(loaded);
+            setStep(isStepId(loaded?.currentStep) ? loaded.currentStep : "plugins");
         });
     }, []);
     useEffect(() => {
@@ -66,40 +87,80 @@ export default function SetupWizard({ userUid }) {
     const index = SETUP_STEPS.findIndex((s) => s.id === step);
     const current = SETUP_STEPS[index];
     const last = index === SETUP_STEPS.length - 1;
+    /** Records the step the administrator is on. Progress is a convenience for resuming, so a failure is only noted. */
+    function saveProgress(next) {
+        const queue = progress.current;
+        queue.next = next;
+        if (queue.running) {
+            return;
+        }
+        queue.running = (async () => {
+            while (queue.next) {
+                const target = queue.next;
+                queue.next = null;
+                try {
+                    await saveSetupStep(target);
+                    setProgressFailed(false);
+                }
+                catch (err) {
+                    console.warn("Could not save setup progress", err);
+                    setProgressFailed(true);
+                }
+            }
+            queue.running = null;
+        })();
+    }
     function goTo(next) {
         setError(null);
+        setLeavingTo(null);
+        setUnsaved({});
         setStep(next);
-        // Progress is a convenience for resuming - failing to record it shouldn't stop the administrator.
-        void saveSetupStep(next).catch(() => undefined);
+        saveProgress(next);
         window.scrollTo?.(0, 0);
     }
+    /** Goes to `next`, first asking whether to discard any unsaved server settings. */
+    function requestGoTo(next) {
+        // Going to the step already shown would clear the unsaved-edit tracking while the forms keep their edits.
+        if (next === step) {
+            return;
+        }
+        if (step === "settings" && Object.values(unsaved).some(Boolean)) {
+            setLeavingTo(next);
+            return;
+        }
+        goTo(next);
+    }
+    const trackUnsaved = (form) => (dirty) => setUnsaved((prev) => ({ ...prev, [form]: dirty }));
     async function finish() {
         setFinishing(true);
         setError(null);
         try {
+            // Let a step still being recorded land first, so it can't arrive after setup is marked finished.
+            await progress.current.running;
             await completeSetup();
             window.location.href = "/admin";
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not finish setup.");
+            setError(errorMessage(err, "Could not finish setup."));
             setFinishing(false);
         }
     }
-    const blocked = step === "domain" && domains.length === 0;
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Set up your server" }), _jsx("p", { className: "text-sm text-text-muted", children: "You can change any of these settings later from the admin console." })] }), _jsx("ol", { "aria-label": "Setup steps", className: "flex flex-wrap gap-2", children: SETUP_STEPS.map((s, i) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": s.id === step ? "step" : undefined, 
+    const noDomain = domains.length === 0;
+    const blocked = (step === "domain" || last) && noDomain;
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Set up your server" }), _jsx("p", { className: "text-sm text-text-muted", children: "You can change any of these settings later from the admin console." })] }), status && !status.required && (_jsx("a", { href: "/admin", className: "text-sm text-primary-dark underline whitespace-nowrap", children: "Exit setup" }))] }), domainsError && (_jsx(Alert, { children: _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [domainsError, _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-2 !text-xs", onClick: () => void loadDomains(), children: "Retry" })] }) })), _jsx("ol", { "aria-label": "Setup steps", className: "flex flex-wrap gap-2", children: SETUP_STEPS.map((s, i) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": s.id === step ? "step" : undefined, 
                         // Steps after the domain need somewhere to put mail first.
-                        disabled: i > 1 && domains.length === 0, onClick: () => goTo(s.id), className: [
+                        disabled: i > 1 && noDomain, onClick: () => requestGoTo(s.id), className: [
                             "text-sm py-1.5 px-3 rounded-pill border disabled:opacity-50",
                             s.id === step
                                 ? "bg-primary/10 border-primary text-primary-dark font-semibold"
                                 : i < index
                                     ? "border-border text-text"
                                     : "border-border text-text-muted",
-                        ].join(" "), children: [i + 1, ". ", s.title, i < index && _jsx("span", { className: "sr-only", children: " (done)" })] }) }, s.id))) }), _jsxs("section", { "aria-labelledby": "setup-step-title", className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsxs("h2", { id: "setup-step-title", className: "text-lg font-bold", children: ["Step ", index + 1, " of ", SETUP_STEPS.length, ": ", current.title] }), _jsx("p", { className: "text-sm text-text-muted", children: current.intro })] }), step === "plugins" && _jsx(PluginsManager, {}), step === "domain" && _jsx(DomainStep, { domains: domains, onCreated: (domain) => setDomains((prev) => [...prev, domain]) }), step === "settings" && (_jsxs("div", { className: "flex flex-col gap-10", children: [_jsx(LoadedSettingsForm, { load: getEncryptionPolicy, loadErrorMessage: "Could not load the encryption policy.", children: (policy, onChange) => (_jsx(EncryptionPolicyForm, { policy: policy, onChange: (updated) => {
+                        ].join(" "), children: [i + 1, ". ", s.title, i < index && _jsx("span", { className: "sr-only", children: " (done)" })] }) }, s.id))) }), _jsxs("section", { "aria-labelledby": "setup-step-title", className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsxs("h2", { id: "setup-step-title", className: "text-lg font-bold", children: ["Step ", index + 1, " of ", SETUP_STEPS.length, ": ", current.title] }), _jsx("p", { className: "text-sm text-text-muted", children: current.intro })] }), step === "plugins" && _jsx(PluginsManager, {}), step === "domain" && _jsx(DomainStep, { domains: domains, onCreated: (domain) => setDomains((prev) => [...prev, domain]) }), step === "settings" && (_jsxs("div", { className: "flex flex-col gap-10", children: [_jsx(LoadedSettingsForm, { load: getEncryptionPolicy, loadErrorMessage: "Could not load the encryption policy.", children: (policy, onChange) => (_jsx(EncryptionPolicyForm, { policy: policy, onDirtyChange: trackUnsaved("encryption"), onChange: (updated) => {
                                         onChange(updated);
                                         setEncryption(updated);
-                                    } })) }), _jsx(LoadedSettingsForm, { load: getRetentionPolicy, loadErrorMessage: "Could not load the retention policy.", children: (policy, onChange) => _jsx(RetentionPolicyForm, { policy: policy, onChange: onChange }) }), _jsx(LoadedSettingsForm, { load: getMailboxPolicy, loadErrorMessage: "Could not load the mailbox policy.", children: (policy, onChange) => _jsx(MailboxPolicyForm, { policy: policy, onChange: onChange }) })] })), step === "escrow" &&
-                        (encryption && !isEncryptionEnabled(encryption) ? (_jsx("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: "End-to-end encryption is turned off, so escrow isn\u2019t needed. You can set it up later if you turn encryption on." })) : (_jsx(EscrowSetupStep, {}))), step === "branding" && (_jsx(LoadedSettingsForm, { load: getBranding, loadErrorMessage: "Could not load branding.", children: (branding, onChange) => _jsx(BrandingForm, { branding: branding, onChange: onChange }) })), step === "mailboxes" && _jsx(MailboxesStep, { userUid: userUid, domain: domains.find((d) => d.verified)?.name ?? domains[0]?.name })] }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border pt-5", children: [index > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => goTo(SETUP_STEPS[index - 1].id), children: "Back" })), _jsx("div", { className: "flex-1" }), blocked && _jsx("span", { className: "text-sm text-text-muted", children: "Add a domain to continue." }), last ? (_jsx(Button, { type: "button", className: "!w-auto", loading: finishing, disabled: finishing, onClick: () => void finish(), children: "Finish setup" })) : (_jsx(Button, { type: "button", className: "!w-auto", disabled: blocked, onClick: () => goTo(SETUP_STEPS[index + 1].id), children: "Continue" }))] })] }));
+                                    } })) }), _jsx(LoadedSettingsForm, { load: getRetentionPolicy, loadErrorMessage: "Could not load the retention policy.", children: (policy, onChange) => _jsx(RetentionPolicyForm, { policy: policy, onChange: onChange, onDirtyChange: trackUnsaved("retention") }) }), _jsx(LoadedSettingsForm, { load: getMailboxPolicy, loadErrorMessage: "Could not load the mailbox policy.", children: (policy, onChange) => _jsx(MailboxPolicyForm, { policy: policy, onChange: onChange, onDirtyChange: trackUnsaved("mailbox") }) })] })), step === "escrow" &&
+                        (encryption && !isEncryptionEnabled(encryption) ? (_jsx("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: "End-to-end encryption is turned off, so escrow isn\u2019t needed. You can set it up later if you turn encryption on." })) : (_jsx(EscrowSetupStep, { adminUid: userUid }))), step === "branding" && (_jsx(LoadedSettingsForm, { load: getBranding, loadErrorMessage: "Could not load branding.", children: (branding, onChange) => _jsx(BrandingForm, { branding: branding, onChange: onChange }) })), step === "mailboxes" && _jsx(MailboxesStep, { userUid: userUid, domain: domains.find((d) => d.verified)?.name ?? domains[0]?.name })] }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border pt-5", children: [index > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => requestGoTo(SETUP_STEPS[index - 1].id), children: "Back" })), _jsx("div", { className: "flex-1" }), progressFailed && _jsx("span", { className: "text-xs text-text-muted", children: "Your place in setup couldn\u2019t be saved." }), blocked && _jsx("span", { className: "text-sm text-text-muted", children: last ? "Add a domain before finishing setup." : "Add a domain to continue." }), last ? (_jsx(Button, { type: "button", className: "!w-auto", loading: finishing, disabled: finishing || blocked, onClick: () => void finish(), children: "Finish setup" })) : (_jsx(Button, { type: "button", className: "!w-auto", disabled: blocked, onClick: () => requestGoTo(SETUP_STEPS[index + 1].id), children: "Continue" }))] }), leavingTo && (_jsxs(Modal, { open: true, onClose: () => setLeavingTo(null), title: "Discard unsaved changes?", children: [_jsx("p", { className: "text-sm mb-4", children: "Some server settings on this step have changes that haven\u2019t been saved." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLeavingTo(null), children: "Keep editing" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => goTo(leavingTo), children: "Discard changes" })] })] }))] }));
 }
 function DomainStep({ domains, onCreated }) {
     const [name, setName] = useState("");
@@ -118,7 +179,7 @@ function DomainStep({ domains, onCreated }) {
             setName("");
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not add the domain.");
+            setError(errorMessage(err, "Could not add the domain."));
         }
         finally {
             setSaving(false);
@@ -128,15 +189,20 @@ function DomainStep({ domains, onCreated }) {
 }
 function MailboxesStep({ userUid, domain }) {
     const [mailboxes, setMailboxes] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+    const [error, setError] = useState(null);
     const [formKey, setFormKey] = useState(0);
     useEffect(() => {
         listMailboxes({ limit: 100 })
-            .then(setMailboxes)
-            .catch(() => undefined);
+            .then((list) => 
+        // Keep any mailbox created here while the list was loading.
+        setMailboxes((prev) => [...list, ...prev.filter((mine) => !list.some((mailbox) => mailbox.uid === mine.uid))]))
+            .catch((err) => setError(`${errorMessage(err, "Could not load the existing mailboxes.")} Check the Mailboxes page before creating your own, so you don't create it twice.`))
+            .finally(() => setLoaded(true));
     }, []);
     const hasOwn = mailboxes.some((mailbox) => mailbox.ownerUserUid === userUid);
-    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-xl", children: [mailboxes.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Mailboxes created" }), _jsx("ul", { className: "text-sm flex flex-col gap-1", children: mailboxes.map((mailbox) => (_jsxs("li", { children: [mailbox.displayName, " <", mailbox.primarySmtpAddress, ">", mailbox.ownerUserUid === userUid && _jsx("span", { className: "text-text-muted", children: " (yours)" })] }, mailbox.uid))) })] })), _jsx("h3", { className: "text-base font-bold", children: hasOwn ? "Add another mailbox" : "Your mailbox" }), _jsx(MailboxCreateForm, { submitLabel: "Create mailbox", defaults: hasOwn ? { domain } : { localPart: "admin", domain, displayName: "Administrator", ownerUserUid: userUid }, onCreated: (mailbox) => {
-                    setMailboxes((prev) => [...prev, mailbox]);
-                    setFormKey((k) => k + 1);
-                } }, formKey)] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-xl", children: [error && _jsx(Alert, { children: error }), mailboxes.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Mailboxes created" }), _jsx("ul", { className: "text-sm flex flex-col gap-1", children: mailboxes.map((mailbox) => (_jsxs("li", { children: [mailbox.displayName, " <", mailbox.primarySmtpAddress, ">", mailbox.ownerUserUid === userUid && _jsx("span", { className: "text-text-muted", children: " (yours)" })] }, mailbox.uid))) })] })), !loaded ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "text-base font-bold", children: hasOwn ? "Add another mailbox" : "Your mailbox" }), _jsx(MailboxCreateForm, { submitLabel: "Create mailbox", defaults: hasOwn ? { domain } : { localPart: "admin", domain, displayName: "Administrator", ownerUserUid: userUid }, onCreated: (mailbox) => {
+                            setMailboxes((prev) => [...prev, mailbox]);
+                            setFormKey((k) => k + 1);
+                        } }, formKey)] }))] }));
 }

package/dist/apps/shared/components/admin/signOut.js

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { authApiFetch } from "@rapidmx/react-shared/util/api.js";
+/**
+ * The cross-tab sign-out channel - must stay identical to `SIGN_OUT_CHANNEL` in
+ * `apps/shared/search/localIndexRpcClient.ts` (the channel `AppShell` listens on and `destroyAllLocalIndexes()`
+ * announces on). Duplicated rather than imported so the admin/escrow consoles don't pull the local-search Worker
+ * client into their bundles; `test/apps/admin/_components/signOut.test.ts` fails if the two ever drift apart.
+ */
+export const CONSOLE_SIGN_OUT_CHANNEL = "rapidmx-localsearch";
+/** How long sign-out waits for auth-server's logout before navigating anyway (same bound as `AppShell`). */
+export const CONSOLE_LOGOUT_TIMEOUT_MS = 3000;
+/**
+ * The local search index's pending-deletions `localStorage` key - must stay identical to `PENDING_DELETIONS_KEY`
+ * in `apps/shared/search/localIndexRpcClient.ts`, duplicated for the same bundle reason as the channel above
+ * (the test checks it). `"*"` is that module's "every index on this device" entry.
+ */
+export const CONSOLE_PENDING_DELETIONS_KEY = "rapidmx-localsearch-pending-deletions";
+const ALL_LOCAL_INDEXES = "*";
+/** Records that every local search index on this device must be deleted. The consoles can't delete them
+ * themselves (no local-index client here); the next mail page load retries recorded deletions before opening
+ * any index. With storage blocked nothing is recorded, and only an open mail tab hearing the broadcast deletes
+ * them. */
+function markLocalIndexesForDeletion() {
+    try {
+        localStorage.setItem(CONSOLE_PENDING_DELETIONS_KEY, JSON.stringify([ALL_LOCAL_INDEXES]));
+    }
+    catch {
+        // See the doc comment.
+    }
+}
+/** Tells every other tab of this origin that the session ended (`{ type: "sign-out" }`, `AppShell`'s message).
+ * An open mail tab then destroys its unlocked keys and every local search index on the device, and leaves too.
+ * A no-op where BroadcastChannel is unavailable. */
+function broadcastSignOut() {
+    if (typeof BroadcastChannel === "undefined") {
+        return;
+    }
+    const channel = new BroadcastChannel(CONSOLE_SIGN_OUT_CHANNEL);
+    channel.postMessage({ type: "sign-out" });
+    channel.close();
+}
+/** Calls auth-server's logout (`POST ${authServerUrl}/api/auth/logout`, credentials included), bounded by
+ * `CONSOLE_LOGOUT_TIMEOUT_MS`. Never rejects - a failure must not keep the user from leaving. */
+async function logOutOfAuthServer(authServerUrl) {
+    if (!authServerUrl) {
+        return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), CONSOLE_LOGOUT_TIMEOUT_MS);
+    try {
+        await authApiFetch(authServerUrl, "/auth/logout", { method: "POST", signal: controller.signal });
+    }
+    catch {
+        // Navigate anyway.
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
+/**
+ * Sign-out for `AdminShell`/`EscrowShell`: announces the sign-out to other tabs, ends the auth-server session
+ * (clears the auth cookie and invalidates the refresh token - navigating alone would leave the session valid),
+ * then navigates to auth-server (or `/`). Mirrors `AppShell.handleSignOut`, except that the consoles hold no
+ * unlocked keys and can't delete local search indexes in their own tab: they record every index for deletion
+ * (finished by the next mail page load) and rely on an open mail tab hearing the broadcast to delete them now.
+ */
+export async function signOutOfConsole(authServerUrl) {
+    markLocalIndexesForDeletion();
+    broadcastSignOut();
+    await logOutOfAuthServer(authServerUrl);
+    window.location.href = authServerUrl ?? "/";
+}

package/dist/apps/shared/components/admin/usePagedList.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
+export const REQUEST_LIST_PAGE_SIZE = 50;
+/**
+ * A newest-first list fetched a page at a time with "Load more". Only the most recently started `reload()`'s
+ * responses are applied, so a slow earlier fetch (e.g. the mount fetch racing a reload after a create) can't
+ * overwrite a newer list, and a "Load more" that was in flight during a reload is dropped.
+ *
+ * Paging is by offset, so "Load more" re-reads the previous page alongside the next one and continues after the last
+ * row already shown: rows created since shift older rows onto later pages (repeats are skipped), and rows deleted
+ * since shift them onto earlier pages (which a plain next-page fetch would silently skip). If that row can't be found
+ * in the two pages at all (it was deleted, or more than a page of rows came or went), the list reloads from the start.
+ */
+export function usePagedList(fetchPage, errorMessage) {
+    const pageSize = REQUEST_LIST_PAGE_SIZE;
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [hasMore, setHasMore] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const generation = useRef(0);
+    const nextPage = useRef(0);
+    const loaded = useRef(items);
+    loaded.current = items;
+    function describe(err) {
+        return err instanceof ApiRequestError ? err.message : errorMessage;
+    }
+    async function reload() {
+        const current = ++generation.current;
+        try {
+            const data = await fetchPage({ limit: pageSize, page: 0 });
+            if (current !== generation.current)
+                return;
+            setItems(data);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = 1;
+        }
+        catch (err) {
+            if (current === generation.current)
+                setLoadError(describe(err));
+        }
+        finally {
+            if (current === generation.current)
+                setLoading(false);
+        }
+    }
+    async function loadMore() {
+        const current = generation.current;
+        const page = nextPage.current;
+        setLoadingMore(true);
+        try {
+            const [previous, data] = await Promise.all([
+                fetchPage({ limit: pageSize, page: page - 1 }),
+                fetchPage({ limit: pageSize, page }),
+            ]);
+            if (current !== generation.current)
+                return;
+            const window = [...previous, ...data];
+            // "Load more" is only offered after a full page, so at least one row is shown.
+            const lastShown = loaded.current[loaded.current.length - 1].uid;
+            const boundary = window.map((item) => item.uid).lastIndexOf(lastShown);
+            if (boundary === -1) {
+                await reload();
+                return;
+            }
+            const after = window.slice(boundary + 1);
+            setItems((prev) => [...prev, ...after.filter((item) => !prev.some((existing) => existing.uid === item.uid))]);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = page + 1;
+        }
+        catch (err) {
+            if (current === generation.current)
+                setLoadError(describe(err));
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }
+    function replaceItem(item) {
+        setItems((prev) => prev.map((existing) => (existing.uid === item.uid ? item : existing)));
+    }
+    return { items, loading, loadError, hasMore, loadingMore, reload, loadMore, replaceItem };
+}
+/** The "Load more" button for a `usePagedList()` list - renders nothing once there's nothing more to load. */
+export function LoadMoreButton({ list, label }) {
+    if (!list.hasMore) {
+        return null;
+    }
+    return (_jsx("div", { className: "mt-3", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: list.loadingMore, disabled: list.loadingMore, onClick: () => void list.loadMore(), children: label }) }));
+}