@rapidmx/web-client 0.6.0 → 0.7.0

package/apps/www/messages/[uid].tsx

@@ -24,7 +24,7 @@ export default function MessageDetailPage(props: MailShellProps & { params: { ui
 }
 
 function MessageDetailContent({ uid }: { uid: string }) {
-    const { mailboxFolders, mailboxUid } = useMailShell();
+    const { mailboxFolders, mailboxUid, onFolderCreated } = useMailShell();
     const [message, setMessage] = useState<Message | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -77,7 +77,6 @@ function MessageDetailContent({ uid }: { uid: string }) {
     const backHref = `/?mailboxUid=${encodeURIComponent(message.mailboxUid)}&folderUid=${encodeURIComponent(message.folderUid)}`;
     const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
     const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
-    const isInbox = folders.find((f) => f.uid === message.folderUid)?.type === "inbox";
     const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
     return (
         <MessageDetailPane
@@ -87,14 +86,16 @@ function MessageDetailContent({ uid }: { uid: string }) {
             isSentItems={isSentItems}
             onRecalled={setMessage}
             isOutbox={isOutbox}
-            isInbox={isInbox}
-            onClassified={setMessage}
             onReceiptHandled={setMessage}
             draftsFolderUid={draftsFolderUid}
+            folders={folders}
+            onMoved={setMessage}
+            onFolderCreated={onFolderCreated}
             onScheduledSendCanceled={setMessage}
             onArchived={setMessage}
             labels={labels}
             onLabelsChanged={setMessage}
+            onLabelCreated={(label) => setLabels((prev) => [...prev, label])}
         />
     );
 }

package/dist/apps/shared/components/admin/settings/BrandingForm.d.ts

@@ -2,8 +2,12 @@ import React from "react";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export declare function isSvgFile(file: File): boolean;
-/** The branding editor, shared by the Branding page and the setup wizard. */
-export default function BrandingForm({ branding, onChange }: {
+export interface BrandingFormProps {
     branding: Branding;
     onChange: (b: Branding) => void;
-}): React.JSX.Element;
+    /** Set when shown in a page that already introduces branding (the setup wizard): the title and introduction are
+     * left out, and the section headings sit one level lower. */
+    embedded?: boolean;
+}
+/** The branding editor, shared by the Branding page and the setup wizard. */
+export default function BrandingForm({ branding, onChange, embedded }: BrandingFormProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -16,7 +16,8 @@ export function isSvgFile(file) {
 }
 const RASTER_IMAGE_ACCEPT = "image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon";
 /** The branding editor, shared by the Branding page and the setup wizard. */
-export default function BrandingForm({ branding, onChange }) {
+export default function BrandingForm({ branding, onChange, embedded = false }) {
+    const SectionHeading = embedded ? "h3" : "h2";
     const [companyName, setCompanyName] = useState(branding.companyName);
     const [title, setTitle] = useState(branding.title);
     const [headerHtml, setHeaderHtml] = useState(branding.headerHtml ?? "");
@@ -103,13 +104,13 @@ export default function BrandingForm({ branding, onChange }) {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-2xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Branding" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Customize the logo, nav-header icon, product name, and chrome shown to every visitor of the webmail and admin console \u2014 including anonymous booking-page visitors." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Logo" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.logoUrl || "/images/logo.svg", alt: "Current logo", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "logo-upload", disabled: assetBusy !== null, onClick: () => logoFileRef.current?.click(), children: "Upload logo" }), _jsx("input", { ref: logoFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload logo", className: "hidden", onChange: handleLogoFileChange }), branding.logoUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "logo-delete", onClick: () => void runAsset("logo-delete", async () => {
+    return (_jsxs("div", { className: "max-w-2xl", children: [!embedded && (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Branding" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Customize the logo, nav-header icon, product name, and chrome shown to every visitor of the webmail and admin console \u2014 including anonymous booking-page visitors." })] })), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Logo" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.logoUrl || "/images/logo.svg", alt: "Current logo", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "logo-upload", disabled: assetBusy !== null, onClick: () => logoFileRef.current?.click(), children: "Upload logo" }), _jsx("input", { ref: logoFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload logo", className: "hidden", onChange: handleLogoFileChange }), branding.logoUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "logo-delete", onClick: () => void runAsset("logo-delete", async () => {
                                                     await deleteBrandingLogo();
                                                     return { ...branding, logoUrl: undefined };
-                                                }), children: "Remove logo" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Logo URL", className: INPUT_CLASS, value: logoUrlInput, onChange: (e) => setLogoUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || logoUrlInput === (branding.logoUrl ?? ""), loading: assetBusy === "logo-url", onClick: () => void runAsset("logo-url", () => updateBranding({ logoUrl: logoUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Icon" }), _jsx("p", { className: "text-xs text-text-muted -mt-1", children: "A compact mark for navigation headers, independent of the full logo above. Falls back to the logo, then a default asset, when not set." }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.iconUrl || branding.logoUrl || "/images/logo.svg", alt: "Current icon", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "icon-upload", disabled: assetBusy !== null, onClick: () => iconFileRef.current?.click(), children: "Upload icon" }), _jsx("input", { ref: iconFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload icon", className: "hidden", onChange: handleIconFileChange }), branding.iconUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "icon-delete", onClick: () => void runAsset("icon-delete", async () => {
+                                                }), children: "Remove logo" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Logo URL", className: INPUT_CLASS, value: logoUrlInput, onChange: (e) => setLogoUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || logoUrlInput === (branding.logoUrl ?? ""), loading: assetBusy === "logo-url", onClick: () => void runAsset("logo-url", () => updateBranding({ logoUrl: logoUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Icon" }), _jsx("p", { className: "text-xs text-text-muted -mt-1", children: "A compact mark for navigation headers, independent of the full logo above. Falls back to the logo, then a default asset, when not set." }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.iconUrl || branding.logoUrl || "/images/logo.svg", alt: "Current icon", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "icon-upload", disabled: assetBusy !== null, onClick: () => iconFileRef.current?.click(), children: "Upload icon" }), _jsx("input", { ref: iconFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload icon", className: "hidden", onChange: handleIconFileChange }), branding.iconUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "icon-delete", onClick: () => void runAsset("icon-delete", async () => {
                                                     await deleteBrandingIcon();
                                                     return { ...branding, iconUrl: undefined };
-                                                }), children: "Remove icon" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Icon URL", className: INPUT_CLASS, value: iconUrlInput, onChange: (e) => setIconUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || iconUrlInput === (branding.iconUrl ?? ""), loading: assetBusy === "icon-url", onClick: () => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Custom stylesheet" }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-sm text-text-muted truncate", children: branding.stylesheetUrl || "None configured" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "stylesheet-upload", disabled: assetBusy !== null, onClick: () => stylesheetFileRef.current?.click(), children: "Upload CSS file" }), _jsx("input", { ref: stylesheetFileRef, type: "file", accept: "text/css,.css", "aria-label": "Upload stylesheet", className: "hidden", onChange: handleStylesheetFileChange }), branding.stylesheetUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "stylesheet-delete", onClick: () => void runAsset("stylesheet-delete", async () => {
+                                                }), children: "Remove icon" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Icon URL", className: INPUT_CLASS, value: iconUrlInput, onChange: (e) => setIconUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || iconUrlInput === (branding.iconUrl ?? ""), loading: assetBusy === "icon-url", onClick: () => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Custom stylesheet" }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-sm text-text-muted truncate", children: branding.stylesheetUrl || "None configured" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "stylesheet-upload", disabled: assetBusy !== null, onClick: () => stylesheetFileRef.current?.click(), children: "Upload CSS file" }), _jsx("input", { ref: stylesheetFileRef, type: "file", accept: "text/css,.css", "aria-label": "Upload stylesheet", className: "hidden", onChange: handleStylesheetFileChange }), branding.stylesheetUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "stylesheet-delete", onClick: () => void runAsset("stylesheet-delete", async () => {
                                             await deleteBrandingStylesheet();
                                             return { ...branding, stylesheetUrl: undefined };
                                         }), children: "Remove stylesheet" }))] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external stylesheet URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Stylesheet URL", className: INPUT_CLASS, value: stylesheetUrlInput, onChange: (e) => setStylesheetUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? ""), loading: assetBusy === "stylesheet-url", onClick: () => void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput })), children: "Set" })] })] })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 pt-2 border-t border-border", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Company name" }), _jsx("input", { "aria-label": "Company name", className: INPUT_CLASS, value: companyName, onChange: (e) => setCompanyName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Product title" }), _jsx("input", { "aria-label": "Product title", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "Shown as the browser tab title." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Header HTML (optional)" }), _jsx("textarea", { "aria-label": "Header HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: headerHtml, onChange: (e) => setHeaderHtml(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Footer HTML (optional)" }), _jsx("textarea", { "aria-label": "Footer HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: footerHtml, onChange: (e) => setFooterHtml(e.target.value) })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] })] }));

package/dist/apps/shared/components/admin/settings/EncryptionPolicyForm.d.ts

@@ -7,6 +7,9 @@ export interface EncryptionPolicyFormProps {
     onChange: (policy: EncryptionPolicy) => void;
     /** Told whether the form has edits that haven't been saved. */
     onDirtyChange?: (dirty: boolean) => void;
+    /** Set when shown as one section of a page with its own heading (the setup wizard), so the title is a smaller,
+     * lower-level heading. */
+    embedded?: boolean;
 }
 /** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
-export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }: EncryptionPolicyFormProps): React.JSX.Element;
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange, embedded }: EncryptionPolicyFormProps): React.JSX.Element;

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

@@ -28,7 +28,7 @@ export function isEncryptionEnabled(policy) {
     return TIERS.some((tier) => policy[tier.key] !== "prohibited");
 }
 /** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
-export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }) {
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange, embedded = false }) {
     const [values, setValues] = useState(policy);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
@@ -55,7 +55,7 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "End-to-end encryption" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Encrypted messages can only be read by their senders and recipients - not by this server or its administrators. Choose how encryption applies to each kind of mail." }), 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: [TIERS.map((tier) => (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: tier.label }), _jsx("select", { "aria-label": tier.label, className: SELECT_CLASS, value: values[tier.key], onChange: (e) => {
+    return (_jsxs("div", { className: "max-w-xl", children: [embedded ? (_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "End-to-end encryption" })) : (_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "End-to-end encryption" })), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Encrypted messages can only be read by their senders and recipients - not by this server or its administrators. Choose how encryption applies to each kind of mail." }), 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: [TIERS.map((tier) => (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: tier.label }), _jsx("select", { "aria-label": tier.label, className: SELECT_CLASS, value: values[tier.key], onChange: (e) => {
                                     setSaved(false);
                                     setValues({ ...values, [tier.key]: e.target.value });
                                 }, children: STATES.map((state) => (_jsx("option", { value: state.value, children: state.label }, state.value))) }), _jsx("span", { className: "text-xs text-text-muted", children: tier.help })] }, tier.key))), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));

package/dist/apps/shared/components/admin/settings/MailboxPolicyForm.d.ts

@@ -5,6 +5,9 @@ export interface MailboxPolicyFormProps {
     onChange: (policy: MailboxPolicy) => void;
     /** Told whether the form has edits that haven't been saved. */
     onDirtyChange?: (dirty: boolean) => void;
+    /** Set when shown as one section of a page with its own heading (the setup wizard), so the title is a smaller,
+     * lower-level heading. */
+    embedded?: boolean;
 }
 /** The mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. */
-export default function MailboxPolicyForm({ policy, onChange, onDirtyChange }: MailboxPolicyFormProps): React.JSX.Element;
+export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, embedded }: MailboxPolicyFormProps): React.JSX.Element;

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

@@ -15,7 +15,7 @@ function toGb(bytes) {
     return String(bytes / GB);
 }
 /** The mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. */
-export default function MailboxPolicyForm({ policy, onChange, onDirtyChange }) {
+export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, embedded = false }) {
     const [defaultQuotaGb, setDefaultQuotaGb] = useState(toGb(policy.defaultQuotaBytes));
     const [autoProvisionEnabled, setAutoProvisionEnabled] = useState(policy.autoProvisionEnabled);
     const [autoProvisionQuotaGb, setAutoProvisionQuotaGb] = useState(toGb(policy.autoProvisionQuotaBytes));
@@ -70,5 +70,5 @@ export default function MailboxPolicyForm({ policy, onChange, onDirtyChange }) {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "Mailboxes" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Defaults for new mailboxes on this server." }), 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: "Default quota (GB)" }), _jsx("input", { "aria-label": "Default quota (GB)", type: "number", min: 0, step: "any", className: INPUT_CLASS, value: defaultQuotaGb, onChange: (e) => setDefaultQuotaGb(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "The storage a mailbox starts with when an administrator creates it." })] }), _jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: autoProvisionEnabled, onChange: (e) => setAutoProvisionEnabled(e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: "Let people create their own mailbox" }), _jsx("span", { className: "text-xs text-text-muted", children: "Someone who signs in without a mailbox can create one, using their username on one of this server\u2019s verified domains." })] })] }), autoProvisionEnabled && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Quota for self-created mailboxes (GB)" }), _jsx("input", { "aria-label": "Quota for self-created mailboxes (GB)", type: "number", min: 0, step: "any", className: INPUT_CLASS, value: autoProvisionQuotaGb, onChange: (e) => setAutoProvisionQuotaGb(e.target.value) })] })), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));
+    return (_jsxs("div", { className: "max-w-xl", children: [embedded ? (_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Mailboxes" })) : (_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "Mailboxes" })), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Defaults for new mailboxes on this server." }), 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: "Default quota (GB)" }), _jsx("input", { "aria-label": "Default quota (GB)", type: "number", min: 0, step: "any", className: INPUT_CLASS, value: defaultQuotaGb, onChange: (e) => setDefaultQuotaGb(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "The storage a mailbox starts with when an administrator creates it." })] }), _jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: autoProvisionEnabled, onChange: (e) => setAutoProvisionEnabled(e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: "Let people create their own mailbox" }), _jsx("span", { className: "text-xs text-text-muted", children: "Someone who signs in without a mailbox can create one, using their username on one of this server\u2019s verified domains." })] })] }), autoProvisionEnabled && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Quota for self-created mailboxes (GB)" }), _jsx("input", { "aria-label": "Quota for self-created mailboxes (GB)", type: "number", min: 0, step: "any", className: INPUT_CLASS, value: autoProvisionQuotaGb, onChange: (e) => setAutoProvisionQuotaGb(e.target.value) })] })), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));
 }

package/dist/apps/shared/components/admin/settings/PluginsManager.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export interface PluginsManagerProps {
+    /**
+     * Set when shown inside another page that already has its own heading and introduction (the setup wizard): the
+     * page heading and introduction are left out, and the section headings sit one level lower.
+     */
+    embedded?: boolean;
+}
 /** Installed plugins with their rollout status, and every plugin action - shared by the Plugins page and the
  * setup wizard. */
-export default function PluginsManager(): React.JSX.Element;
+export default function PluginsManager({ embedded }?: PluginsManagerProps): React.JSX.Element;

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

@@ -9,7 +9,7 @@ import { addPlugin, expectedPlanOf, getPluginStatus, getPluginUpdates, listPlugi
 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";
+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 often status is refreshed while server copies are still applying a change. */
 const PENDING_POLL_MS = 5000;
 /** How long status keeps being polled after a saved change, since servers may not have noticed it yet. */
@@ -29,9 +29,21 @@ async function attempt(action, failure) {
         return errorMessage(err, failure);
     }
 }
+/** Classes for a plugin table's header and body cells. */
+const TH_CLASS = "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border";
+const TD_CLASS = "py-3 px-2.5 border-b border-border align-top";
+/**
+ * The installed plugins table stacks each row on narrow screens - name and description, then version and status side
+ * by side, then the actions - so the actions aren't scrolled off to the side. The explicit roles keep it a table for
+ * assistive technology while it isn't displayed as one.
+ */
+const INSTALLED_ROW_CLASS = "flex flex-wrap border-b border-border lg:table-row lg:border-b-0";
+const INSTALLED_TD_CLASS = "block px-2.5 align-top lg:table-cell lg:pt-3 lg:pb-3 lg:border-b lg:border-border";
+/** The small pill badge admin tables use for a state. */
+const BADGE_CLASS = "inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill";
 /** Installed plugins with their rollout status, and every plugin action - shared by the Plugins page and the
  * setup wizard. */
-export default function PluginsManager() {
+export default function PluginsManager({ embedded = false } = {}) {
     const [plugins, setPlugins] = useState([]);
     const [status, setStatus] = useState(null);
     /** Set when the last status refresh failed, so what's shown may be out of date. */
@@ -223,7 +235,9 @@ export default function PluginsManager() {
     // Retried against the plugin as it's listed now (a newer version, or already enabled elsewhere, hides the retry).
     const retryEnable = plugins.find((plugin) => plugin.uid === retryEnableUid && !plugin.enabled);
     const displayNameOf = (name) => plugins.find((plugin) => plugin.name === name)?.manifest.displayName ?? name;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Plugins" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setAdding(true), children: "Add by name" })] }), _jsx("p", { className: "text-sm text-text-muted mb-5 max-w-3xl", children: "Plugins add protocols and features to every server. Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." }), error && (_jsxs(Alert, { children: [error, retryEnable && (_jsxs(_Fragment, { children: [" ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0", onClick: () => void toggle(retryEnable), children: "Try again" })] }))] })), _jsx(RolloutBanner, { status: status }), statusStale && status && (_jsx("p", { className: "mb-4 text-xs text-text-muted", children: "Couldn't refresh server status. Showing the last status reported." })), listStale && (_jsxs("p", { className: "mb-4 text-xs text-text-muted", children: ["Couldn't re-read the plugin list, so it may be out of date.", " ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0 !text-xs", onClick: () => void reload(), children: "Retry" })] })), _jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Installed plugins" }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : plugins.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins installed." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Plugin", "Version", "State", "Servers", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: plugins.map((plugin) => {
+    const SectionHeading = embedded ? "h3" : "h2";
+    const addButton = (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setAdding(true), children: "Add by name" }));
+    return (_jsxs(_Fragment, { children: [embedded ? (_jsx("p", { className: "text-sm text-text-muted mb-5 max-w-3xl", children: "Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-4 mb-2", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Plugins" }), addButton] }), _jsx("p", { className: "text-sm text-text-muted mb-6 max-w-3xl", children: "Plugins add protocols and features to every server. Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." })] })), error && (_jsxs(Alert, { children: [error, retryEnable && (_jsxs(_Fragment, { children: [" ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0", onClick: () => void toggle(retryEnable), children: "Try again" })] }))] })), _jsx(RolloutBanner, { status: status }), statusStale && status && (_jsx("p", { className: "mb-4 text-xs text-text-muted", children: "Couldn't refresh server status. Showing the last status reported." })), listStale && (_jsxs("p", { className: "mb-4 text-xs text-text-muted", children: ["Couldn't re-read the plugin list, so it may be out of date.", " ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0 !text-xs", onClick: () => void reload(), children: "Retry" })] })), _jsxs("div", { className: "flex items-center justify-between gap-4 mb-2", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide", children: "Installed plugins" }), embedded && addButton] }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : plugins.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins installed." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { role: "table", className: "w-full text-sm border-collapse block lg:table", children: [_jsx("thead", { role: "rowgroup", className: "hidden lg:table-header-group", children: _jsxs("tr", { role: "row", children: [_jsx("th", { role: "columnheader", className: TH_CLASS, children: "Plugin" }), _jsx("th", { role: "columnheader", className: TH_CLASS, children: "Version" }), _jsx("th", { role: "columnheader", className: TH_CLASS, children: "Status" }), _jsx("th", { role: "columnheader", className: TH_CLASS, children: _jsx("span", { className: "sr-only", children: "Actions" }) })] }) }), _jsx("tbody", { role: "rowgroup", className: "block lg:table-row-group", children: plugins.map((plugin) => {
                                 const update = updates.get(plugin.uid);
                                 const latest = update?.updateAvailable ? update.latestVersion : undefined;
                                 const busy = busyUids.has(plugin.uid) || confirming?.uid === plugin.uid;
@@ -231,8 +245,8 @@ export default function PluginsManager() {
                                 const requiredBy = plugins
                                     .filter((other) => other.uid !== plugin.uid && other.manifest.requires?.[plugin.name] !== undefined)
                                     .map((other) => other.manifest.displayName);
-                                return (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description })), requires.length > 0 && _jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Requires: ", requires.join(", ")] }), requiredBy.length > 0 && (_jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Required by: ", requiredBy.join(", ")] }))] }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { children: plugin.packageVersion }), latest && (_jsxs("div", { className: "mt-1 flex flex-col items-start gap-1", children: [_jsxs("span", { className: "text-xs font-semibold text-primary-dark", children: ["Update available: ", latest] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-2 !text-xs", "aria-label": `Upgrade ${plugin.manifest.displayName} to ${latest}`, disabled: busy, onClick: () => void upgrade(plugin, latest), children: "Upgrade" })] }))] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: plugin.enabled ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Enabled" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Disabled" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right whitespace-nowrap", children: [_jsx(Button, { variant: "text", type: "button", className: "!w-auto", "aria-label": `${plugin.enabled ? "Disable" : "Enable"} ${plugin.manifest.displayName}`, disabled: busy, onClick: () => void toggle(plugin), children: plugin.enabled ? "Disable" : "Enable" }), (plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setRemoving(plugin), children: "Uninstall" })] })] }, plugin.uid));
-                            }) })] }) })), _jsx(PluginBrowser, { plugins: plugins, onInstall: (result) => install(result.name, result.version, result.name), 
+                                return (_jsxs("tr", { role: "row", className: INSTALLED_ROW_CLASS, children: [_jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-3 pb-2`, children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description })), requires.length > 0 && _jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Requires: ", requires.join(", ")] }), requiredBy.length > 0 && (_jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Required by: ", requiredBy.join(", ")] }))] }), _jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-1 whitespace-nowrap`, children: [_jsx("div", { children: plugin.packageVersion }), latest && _jsxs("div", { className: "mt-1 text-xs font-semibold text-primary-dark", children: ["Update available: ", latest] })] }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-1`, children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-2 pb-3`, children: _jsxs("div", { className: "flex flex-col items-start gap-1.5 lg:items-end lg:min-w-[11rem]", children: [_jsxs("div", { className: "flex flex-wrap gap-2 lg:justify-end", children: [latest && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Upgrade ${plugin.manifest.displayName} to ${latest}`, disabled: busy, onClick: () => void upgrade(plugin, latest), children: "Upgrade" })), (plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: plugin.enabled ? "secondary" : "primary", type: "button", className: "!w-auto min-w-[5.5rem]", "aria-label": `${plugin.enabled ? "Disable" : "Enable"} ${plugin.manifest.displayName}`, disabled: busy, onClick: () => void toggle(plugin), children: plugin.enabled ? "Disable" : "Enable" })] }), _jsxs("div", { className: "flex flex-wrap gap-x-4 lg:justify-end", children: [_jsx(Button, { variant: "text", type: "button", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", onClick: () => setRemoving(plugin), children: "Uninstall" })] })] }) })] }, plugin.uid));
+                            }) })] }) })), _jsx(PluginBrowser, { headingLevel: SectionHeading, plugins: plugins, onInstall: (result) => install(result.name, result.version, result.name), 
                 // The browser only offers an upgrade for a result it matched to one of these same `plugins`.
                 onUpgrade: (uid, packageVersion) => upgrade(plugins.find((p) => p.uid === uid), packageVersion) }), _jsx(AddPluginModal, { open: adding, onClose: () => setAdding(false), onAdd: async (name, packageVersion, displayName) => {
                     const problem = await install(name, packageVersion, displayName);
@@ -258,7 +272,7 @@ export default function PluginsManager() {
 }
 const ALL_NAMESPACES = "";
 /** Searches the configured namespaces' registries for plugin packages, with install and upgrade actions. */
-function PluginBrowser({ plugins, onInstall, onUpgrade, }) {
+function PluginBrowser({ headingLevel: Heading, plugins, onInstall, onUpgrade, }) {
     const [namespaces, setNamespaces] = useState([]);
     const [namespace, setNamespace] = useState(ALL_NAMESPACES);
     const [results, setResults] = useState(null);
@@ -310,14 +324,14 @@ function PluginBrowser({ plugins, onInstall, onUpgrade, }) {
             setBusyName(null);
         }
     }
-    return (_jsxs("section", { "aria-labelledby": "plugin-browser-title", className: "mt-8", children: [_jsx("h2", { id: "plugin-browser-title", className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Find plugins" }), _jsxs("form", { onSubmit: (e) => void search(e), className: "flex flex-wrap gap-2 items-end mb-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Namespace" }), _jsxs("select", { "aria-label": "Namespace", className: INPUT_CLASS, value: namespace, onChange: (e) => setNamespace(e.target.value), children: [_jsx("option", { value: ALL_NAMESPACES, children: "All namespaces" }), namespaces.map((ns) => (_jsx("option", { value: ns.name, children: ns.name }, ns.name)))] })] }), _jsx(Button, { type: "submit", className: "!w-auto", loading: searching, disabled: searching, children: "Search" })] }), error && _jsx(Alert, { children: error }), results !== null &&
-                (rows.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins found." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Package", "Latest version", "Status", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: rows.map((result) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: result.name }), result.description && _jsx("div", { className: "text-xs text-text-muted max-w-md", children: result.description })] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: result.version }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-text-muted", children: result.updateAvailable
+    return (_jsxs("section", { "aria-labelledby": "plugin-browser-title", className: "mt-8", children: [_jsx(Heading, { id: "plugin-browser-title", className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Find plugins" }), _jsxs("form", { onSubmit: (e) => void search(e), className: "flex flex-wrap gap-2 items-end mb-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Namespace" }), _jsxs("select", { "aria-label": "Namespace", className: INPUT_CLASS, value: namespace, onChange: (e) => setNamespace(e.target.value), children: [_jsx("option", { value: ALL_NAMESPACES, children: "All namespaces" }), namespaces.map((ns) => (_jsx("option", { value: ns.name, children: ns.name }, ns.name)))] })] }), _jsx(Button, { type: "submit", className: "!w-auto", loading: searching, disabled: searching, children: "Search" })] }), error && _jsx(Alert, { children: error }), results !== null &&
+                (rows.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins found." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: TH_CLASS, children: "Package" }), _jsx("th", { className: TH_CLASS, children: "Latest version" }), _jsx("th", { className: TH_CLASS, children: "Status" }), _jsx("th", { className: TH_CLASS, children: _jsx("span", { className: "sr-only", children: "Actions" }) })] }) }), _jsx("tbody", { children: rows.map((result) => (_jsxs("tr", { children: [_jsxs("td", { className: TD_CLASS, children: [_jsx("div", { className: "font-semibold", children: result.name }), result.description && _jsx("div", { className: "text-xs text-text-muted max-w-md", children: result.description })] }), _jsx("td", { className: TD_CLASS, children: result.version }), _jsx("td", { className: `${TD_CLASS} text-text-muted`, children: result.updateAvailable
                                                 ? `Installed ${result.installedVersion} - update available`
                                                 : result.installedUid
                                                     ? `Installed ${result.installedVersion}`
                                                     : result.allowed
                                                         ? "Not installed"
-                                                        : "Not allowed on this server" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right", children: result.updateAvailable ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Upgrade ${result.name} to ${result.version}`, disabled: busyName === result.name, onClick: () => void upgrade(result), children: "Upgrade" })) : (!result.installedUid &&
+                                                        : "Not allowed on this server" }), _jsx("td", { className: `${TD_CLASS} text-right`, children: result.updateAvailable ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Upgrade ${result.name} to ${result.version}`, disabled: busyName === result.name, onClick: () => void upgrade(result), children: "Upgrade" })) : (!result.installedUid &&
                                                 result.allowed && (_jsx(Button, { type: "button", className: "!w-auto", "aria-label": `Install ${result.name}`, loading: busyName === result.name, disabled: busyName === result.name, onClick: () => void install(result), children: "Install" }))) })] }, result.name))) })] }) })))] }));
 }
 /** Name a server reports an error under when it isn't about any single plugin (e.g. the plugin set as a whole failed). */
@@ -337,17 +351,21 @@ function RolloutBanner({ status }) {
         .map((entry) => `${instance.instance}: ${entry.message}`));
     return (_jsxs(_Fragment, { children: [serverWideErrors.length > 0 && (_jsxs(Alert, { children: ["Plugins couldn\u2019t be loaded:", _jsx("ul", { className: "list-disc pl-5 mt-1", children: serverWideErrors.map((message) => (_jsx("li", { className: "break-words", children: message }, message))) })] })), behind > 0 && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Applying changes: ", status.instances.length - behind, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers", " updated. Servers restart one at a time."] })), safeMode.length > 0 && (_jsxs(Alert, { children: [safeMode.map((instance) => instance.instance).join(", "), " started without any plugins because recent starts failed. Fix or disable the failing plugin, and the server will pick up the change."] }))] }));
 }
+/** A plugin's enabled state and, for an enabled one, how many servers have loaded it and what went wrong. */
 function PluginStatusCell({ plugin, status }) {
     if (!plugin.enabled) {
-        return _jsx("span", { className: "text-text-muted", children: "Disabled" });
+        return _jsx("span", { className: `${BADGE_CLASS} bg-surface-alt text-text-muted`, children: "Disabled" });
     }
+    return (_jsxs("div", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { className: `${BADGE_CLASS} bg-success text-white`, children: "Enabled" }), _jsx(PluginServers, { plugin: plugin, status: status })] }));
+}
+function PluginServers({ plugin, status }) {
     if (!status || status.instances.length === 0) {
-        return _jsx("span", { className: "text-text-muted", children: "Unknown" });
+        return _jsx("span", { className: "text-xs text-text-muted", children: "Server status unknown" });
     }
     const current = status.instances.filter((instance) => instance.hash === status.hash);
     const loaded = current.filter((instance) => instance.loaded.some((entry) => entry.name === plugin.name && entry.version === plugin.packageVersion)).length;
     const errors = current.flatMap((instance) => instance.errors.filter((entry) => entry.name === plugin.name).map((entry) => `${instance.instance}: ${entry.message}`));
-    return (_jsxs("div", { children: [_jsxs("span", { className: loaded === status.instances.length ? "text-success font-medium" : "text-text-muted", children: ["Loaded on ", loaded, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers"] }), errors.map((message) => (_jsx("div", { className: "text-xs text-danger mt-1", children: message }, message)))] }));
+    return (_jsxs("div", { className: "text-xs", children: [_jsxs("span", { className: loaded === status.instances.length ? "text-success font-medium" : "text-text-muted", children: ["Loaded on ", loaded, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers"] }), errors.map((message) => (_jsx("div", { className: "text-danger mt-1 break-words", children: message }, message)))] }));
 }
 function AddPluginModal({ open, onClose, onAdd, }) {
     const [name, setName] = useState("");
@@ -544,12 +562,13 @@ function SettingsModal({ plugin, onClose, onSaved }) {
             setBusy(false);
         }
     }
-    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} settings`, children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: save, className: "flex flex-col gap-4", children: [definitions.map((definition) => (_jsx(SettingField, { definition: definition, value: values[definition.key], onChange: (value) => setValues((prev) => ({ ...prev, [definition.key]: value })) }, definition.key))), _jsx("p", { className: "text-xs text-text-muted", children: "Saving restarts the servers one at a time to apply the new settings." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy, children: "Save" })] })] })] }));
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} settings`, children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: save, className: "flex flex-col gap-5", children: [definitions.map((definition) => (_jsx(SettingField, { definition: definition, value: values[definition.key], onChange: (value) => setValues((prev) => ({ ...prev, [definition.key]: value })) }, definition.key))), _jsxs("div", { className: "sticky -bottom-7 -mx-7 -mb-7 px-7 py-4 bg-surface border-t border-border flex flex-col gap-3", children: [_jsx("p", { className: "text-xs text-text-muted", children: "Saving restarts the servers one at a time to apply the new settings." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy, children: "Save" })] })] })] })] }));
 }
 function SettingField({ definition, value, onChange, }) {
     const help = definition.help && _jsx("span", { className: "text-xs text-text-muted", children: definition.help });
     if (definition.type === "boolean") {
-        return (_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [_jsxs("span", { className: "inline-flex items-center gap-2 font-semibold", children: [_jsx("input", { type: "checkbox", checked: value === true, onChange: (e) => onChange(e.target.checked) }), definition.label] }), help] }));
+        // Laid out like the admin policy forms' checkboxes: the help sits under the label, beside the box.
+        return (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: value === true, onChange: (e) => onChange(e.target.checked) }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-semibold", children: definition.label }), help] })] }));
     }
     return (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: definition.label }), definition.type === "select" ? (_jsxs("select", { "aria-label": definition.label, className: INPUT_CLASS, value: String(value), onChange: (e) => onChange(e.target.value), children: [!definition.required && _jsx("option", { value: "", children: "Default" }), (definition.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })) : (_jsx("input", { "aria-label": definition.label, className: INPUT_CLASS, type: definition.type === "number" ? "number" : "text", min: definition.min, max: definition.max, required: definition.required, value: String(value), onChange: (e) => onChange(e.target.value) })), help] }));
 }

package/dist/apps/shared/components/admin/settings/RetentionPolicyForm.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 import { RetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
 /** The retention policy editor, shared by the Retention Policy page and the setup wizard. */
-export default function RetentionPolicyForm({ policy, onChange, onDirtyChange, }: {
+export default function RetentionPolicyForm({ policy, onChange, onDirtyChange, embedded, }: {
     policy: RetentionPolicy;
     onChange: (p: RetentionPolicy) => void;
     /** Told whether the form has edits that haven't been saved. */
     onDirtyChange?: (dirty: boolean) => void;
+    /** Set when shown as one section of a page with its own heading (the setup wizard), so the title is a smaller,
+     * lower-level heading. */
+    embedded?: boolean;
 }): React.JSX.Element;

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

@@ -15,7 +15,7 @@ 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, onDirtyChange, }) {
+export default function RetentionPolicyForm({ policy, onChange, onDirtyChange, embedded = false, }) {
     const [messageRetentionDays, setMessageRetentionDays] = useState(policy.messageRetentionDays?.toString() ?? "");
     const [auditLogRetentionDays, setAuditLogRetentionDays] = useState(policy.auditLogRetentionDays?.toString() ?? "");
     const [error, setError] = useState(null);
@@ -65,7 +65,7 @@ export default function RetentionPolicyForm({ policy, onChange, onDirtyChange, }
             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" }) })] }), _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
+    return (_jsxs("div", { className: "max-w-xl", children: [embedded ? (_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Retention policy" })) : (_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."

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

@@ -140,7 +140,7 @@ export default function EscrowSetupStep({ adminUid }) {
         }
     }
     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: () => {
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_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

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
+import { HiCheck } from "react-icons/hi2";
 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";
@@ -26,6 +27,8 @@ import PluginsManager from "../settings/PluginsManager.js";
 import RetentionPolicyForm from "../settings/RetentionPolicyForm.js";
 import EscrowSetupStep from "./EscrowSetupStep.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";
+/** The bordered panel the wizard's forms sit in. */
+const CARD_CLASS = "bg-surface border border-border rounded-md p-6";
 export const SETUP_STEPS = [
     { id: "plugins", title: "Plugins", intro: "Choose which protocols and features this server runs. The recommended plugins are already installed." },
     { id: "domain", title: "Domain", intro: "Add the domain this server receives mail for, then publish the DNS records below." },
@@ -147,20 +150,21 @@ export default function SetupWizard({ userUid }) {
     }
     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, 
+    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 font-medium hover: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: "text", 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 && noDomain, onClick: () => requestGoTo(s.id), className: [
-                            "text-sm py-1.5 px-3 rounded-pill border disabled:opacity-50",
+                            "inline-flex items-center gap-1.5 text-sm py-1.5 px-3 rounded-pill border transition-colors",
+                            "disabled:opacity-50 disabled:cursor-not-allowed",
                             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, 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, 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" })] })] }))] }));
+                                    ? "bg-surface border-border text-text hover:not-disabled:border-primary"
+                                    : "bg-surface border-border text-text-muted hover:not-disabled:border-primary hover:not-disabled:text-text",
+                        ].join(" "), children: [i < index && _jsx(HiCheck, { "aria-hidden": "true", className: "w-4 h-4 text-success" }), 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", { className: "flex flex-col gap-1", children: [_jsxs("h2", { id: "setup-step-title", className: "flex flex-col gap-0.5", children: [_jsxs("span", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Step ", index + 1, " of ", SETUP_STEPS.length, _jsx("span", { className: "sr-only", children: ":" })] }), " ", _jsx("span", { className: "text-lg font-bold uppercase tracking-wide", children: current.title })] }), _jsx("p", { className: "text-sm text-text-muted max-w-3xl", children: current.intro })] }), step === "plugins" && (_jsx("div", { children: _jsx(PluginsManager, { embedded: true }) })), step === "domain" && _jsx(DomainStep, { domains: domains, onCreated: (domain) => setDomains((prev) => [...prev, domain]) }), step === "settings" && (_jsxs("div", { className: "flex flex-col gap-6 max-w-3xl", children: [_jsx("div", { className: CARD_CLASS, children: _jsx(LoadedSettingsForm, { load: getEncryptionPolicy, loadErrorMessage: "Could not load the encryption policy.", children: (policy, onChange) => (_jsx(EncryptionPolicyForm, { embedded: true, policy: policy, onDirtyChange: trackUnsaved("encryption"), onChange: (updated) => {
+                                            onChange(updated);
+                                            setEncryption(updated);
+                                        } })) }) }), _jsx("div", { className: CARD_CLASS, children: _jsx(LoadedSettingsForm, { load: getRetentionPolicy, loadErrorMessage: "Could not load the retention policy.", children: (policy, onChange) => (_jsx(RetentionPolicyForm, { embedded: true, policy: policy, onChange: onChange, onDirtyChange: trackUnsaved("retention") })) }) }), _jsx("div", { className: CARD_CLASS, children: _jsx(LoadedSettingsForm, { load: getMailboxPolicy, loadErrorMessage: "Could not load the mailbox policy.", children: (policy, onChange) => (_jsx(MailboxPolicyForm, { embedded: true, 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 max-w-3xl", 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("div", { className: `${CARD_CLASS} max-w-3xl`, children: _jsx(LoadedSettingsForm, { load: getBranding, loadErrorMessage: "Could not load branding.", children: (branding, onChange) => _jsx(BrandingForm, { embedded: true, 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("");
@@ -185,7 +189,7 @@ function DomainStep({ domains, onCreated }) {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [domains.map((domain) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-base font-bold", children: domain.name }), _jsx(DomainDnsSetup, { uid: domain.uid })] }, domain.uid))), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: domains.length === 0 ? "Domain name" : "Add another domain", htmlFor: "setupDomainName", children: _jsx("input", { id: "setupDomainName", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "example.com" }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Add domain" })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [domains.map((domain) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-base font-bold", children: domain.name }), _jsx(DomainDnsSetup, { uid: domain.uid })] }, domain.uid))), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: CARD_CLASS, children: [_jsx(FormField, { label: domains.length === 0 ? "Domain name" : "Add another domain", htmlFor: "setupDomainName", children: _jsx("input", { id: "setupDomainName", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "example.com" }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Add domain" })] })] }));
 }
 function MailboxesStep({ userUid, domain }) {
     const [mailboxes, setMailboxes] = useState([]);