@rapidmx/web-client 0.10.0 → 0.12.0

package/dist/apps/admin/signing-certificates/index.js

@@ -0,0 +1,161 @@
+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, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getSigningEnrollmentInfo, listSigningEnrollments, looksLikePemCertificate, rejectSigningEnrollment, signingEnrollmentCsrUrl, uploadSigningEnrollmentCertificate, } from "@rapidmx/react-shared/crypto/signingProviderApi.js";
+import AdminShell from "../../shared/components/admin/layout/AdminShell.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";
+import { notify } from "../../shared/notifications/store.js";
+const INPUT_CLASS = "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface";
+const TEXTAREA_CLASS = `${INPUT_CLASS} font-mono text-xs`;
+function errorMessage(err, fallback) {
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
+function statusBadgeClass(status) {
+    if (status === "failed")
+        return "bg-danger-bg text-danger";
+    if (status === "pending")
+        return "bg-surface-alt text-text-muted";
+    return "bg-success text-white";
+}
+function providerLabel(provider) {
+    return provider === "rfc8823" ? "Automatic (RFC 8823)" : "Manual";
+}
+export default function SigningCertificatesPage(props) {
+    return (_jsx(AdminShell, { ...props, active: "signingCertificates", children: _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: "Signing Certificates" }), _jsx("p", { className: "text-sm text-text-muted", children: "Every mailbox's pending signing (digital-signature) certificate request. Requests issued automatically by a certificate authority are listed for visibility only; a manual request needs a certificate uploaded here once the certificate authority has issued one." })] }), _jsx(BackendSummary, {}), _jsx(EnrollmentsTable, {})] }) }));
+}
+/** How signing certificates are issued in this deployment - fetched once, since it doesn't change while the page is open. */
+function BackendSummary() {
+    const [info, setInfo] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        getSigningEnrollmentInfo()
+            .then(setInfo)
+            .catch((err) => setError(errorMessage(err, "Could not load the signing certificate backend.")));
+    }, []);
+    if (error) {
+        return _jsx(Alert, { children: error });
+    }
+    if (!info) {
+        return null;
+    }
+    if (info.backend === "none") {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Signing certificates are not enabled in this deployment." });
+    }
+    return (_jsxs("div", { className: "text-sm border border-border rounded-sm p-3 bg-surface-alt flex flex-col gap-1", children: [_jsxs("span", { children: [_jsx("strong", { children: info.automatic ? "Automatic issuance" : "Manual issuance" }), info.ca && _jsxs(_Fragment, { children: [" through ", info.ca.host] }), info.typicalDurationMinutes !== undefined && _jsxs(_Fragment, { children: [" \u00B7 typically ", info.typicalDurationMinutes, " minutes"] })] }), info.health && !info.health.ok && (_jsxs("span", { className: "text-danger", children: ["The certificate authority could not be reached", info.health.lastError && _jsxs(_Fragment, { children: [": ", info.health.lastError] }), "."] }))] }));
+}
+function EnrollmentsTable() {
+    const [items, setItems] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [uploadTarget, setUploadTarget] = useState(null);
+    const [rejectTarget, setRejectTarget] = useState(null);
+    async function reload() {
+        try {
+            setItems(await listSigningEnrollments());
+            setLoadError(null);
+        }
+        catch (err) {
+            setLoadError(errorMessage(err, "Could not load the pending signing certificate requests."));
+        }
+    }
+    useEffect(() => {
+        void reload();
+    }, []);
+    if (loadError) {
+        return _jsx(Alert, { children: loadError });
+    }
+    if (items === null) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (items.length === 0) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "No pending signing certificate requests." });
+    }
+    return (_jsxs("div", { className: "overflow-x-auto", children: [_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-xs font-bold uppercase tracking-wide text-text-muted border-b border-border", children: [_jsx("th", { className: "py-2 pr-3", children: "Mailbox" }), _jsx("th", { className: "py-2 pr-3", children: "Requested" }), _jsx("th", { className: "py-2 pr-3", children: "Provider" }), _jsx("th", { className: "py-2 pr-3", children: "Status" }), _jsx("th", { className: "py-2 pr-3", children: "Actions" })] }) }), _jsx("tbody", { children: items.map((row) => (_jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "py-2 pr-3 break-all", children: row.identity }), _jsx("td", { className: "py-2 pr-3 whitespace-nowrap", children: new Date(row.requestedAt).toLocaleString() }), _jsx("td", { className: "py-2 pr-3 whitespace-nowrap", children: providerLabel(row.provider) }), _jsxs("td", { className: "py-2 pr-3", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(row.status)}`, children: row.status }), row.lastError && _jsx("div", { className: "text-xs text-danger mt-1 max-w-xs", children: row.lastError })] }), _jsx("td", { className: "py-2 pr-3", children: _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [row.provider === "manual" && (_jsx("a", { href: signingEnrollmentCsrUrl(row.enrollmentId), className: "text-primary-dark hover:underline font-medium whitespace-nowrap", children: "Download CSR" })), row.canUpload && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setUploadTarget(row), children: "Upload certificate" })), row.status === "pending" && row.provider === "manual" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRejectTarget(row), children: "Reject" })), row.uploadBlockedReason && !row.canUpload && (_jsx("span", { className: "text-xs text-text-muted max-w-xs", children: row.uploadBlockedReason }))] }) })] }, row.enrollmentId))) })] }), _jsx(UploadCertificateModal, { target: uploadTarget, onClose: () => setUploadTarget(null), onDone: reload }), _jsx(RejectModal, { target: rejectTarget, onClose: () => setRejectTarget(null), onDone: reload })] }));
+}
+function UploadCertificateModal({ target, onClose, onDone, }) {
+    const [certificate, setCertificate] = useState("");
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const fileInputRef = useRef(null);
+    function reset() {
+        setCertificate("");
+        setError(null);
+    }
+    function dismiss() {
+        if (!uploading) {
+            reset();
+            onClose();
+        }
+    }
+    function handleFileChange(e) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file) {
+            return;
+        }
+        file.text()
+            .then((text) => setCertificate(text))
+            .catch(() => setError("Could not read this file."));
+    }
+    // Only invoked from the button below, which only renders once `target` is set (the modal's body) - same
+    // non-null-assertion pattern as `data-requests`' `handleApprove()`/`handleDeny()`.
+    async function handleUpload() {
+        setError(null);
+        setUploading(true);
+        try {
+            const result = await uploadSigningEnrollmentCertificate(target.enrollmentId, certificate);
+            notify({
+                kind: "success",
+                title: "Certificate accepted",
+                message: `${result.identity}: ${result.message}`,
+            });
+            reset();
+            onClose();
+            await onDone();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not upload this certificate."));
+        }
+        finally {
+            setUploading(false);
+        }
+    }
+    const sane = looksLikePemCertificate(certificate);
+    return (_jsxs(Modal, { open: target !== null, onClose: dismiss, title: "Upload signing certificate", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Paste, or choose a file for, the certificate (or certificate chain, leaf first) the certificate authority issued for", " ", _jsx("strong", { className: "break-all", children: target?.identity }), "."] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm mb-3", children: [_jsx("span", { className: "font-semibold", children: "Certificate (PEM)" }), _jsx("textarea", { "aria-label": "Certificate PEM", className: TEXTAREA_CLASS, rows: 8, value: certificate, onChange: (e) => setCertificate(e.target.value), placeholder: "-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----" })] }), _jsxs("div", { className: "mb-4", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".pem,.crt,.cer,.txt", className: "hidden", onChange: handleFileChange }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => fileInputRef.current?.click(), children: "Choose file\u2026" })] }), certificate.trim() !== "" && !sane && (_jsx("p", { role: "status", className: "mb-3 py-2 px-3 rounded-sm text-xs bg-warning/15 text-text", children: "This doesn't look like a PEM certificate (it should start with -----BEGIN CERTIFICATE-----)." })), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3 justify-end mt-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: uploading, onClick: dismiss, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: uploading, disabled: uploading || !certificate.trim(), onClick: handleUpload, children: "Upload" })] })] }));
+}
+function RejectModal({ target, onClose, onDone }) {
+    const [reason, setReason] = useState("");
+    const [rejecting, setRejecting] = useState(false);
+    const [error, setError] = useState(null);
+    function dismiss() {
+        if (!rejecting) {
+            setReason("");
+            setError(null);
+            onClose();
+        }
+    }
+    // Only invoked from the button below, which only renders once `target` is set - see `handleUpload()`'s identical note.
+    async function handleReject() {
+        setError(null);
+        setRejecting(true);
+        try {
+            await rejectSigningEnrollment(target.enrollmentId, reason);
+            notify({ kind: "info", title: "Request rejected", message: `${target.identity}'s signing certificate request was rejected.` });
+            setReason("");
+            onClose();
+            await onDone();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not reject this request."));
+        }
+        finally {
+            setRejecting(false);
+        }
+    }
+    return (_jsxs(Modal, { open: target !== null, onClose: dismiss, title: "Reject signing certificate request", children: [_jsxs("p", { className: "text-sm mb-3", children: ["The reason below is shown to ", _jsx("strong", { className: "break-all", children: target?.identity }), "'s owner."] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm mb-4", children: [_jsx("span", { className: "font-semibold", children: "Reason" }), _jsx("input", { "aria-label": "Rejection reason", className: INPUT_CLASS, value: reason, onChange: (e) => setReason(e.target.value) })] }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: rejecting, onClick: dismiss, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: rejecting, disabled: rejecting || !reason.trim(), onClick: handleReject, children: "Reject" })] })] }));
+}

package/dist/apps/escrow/_layout.d.ts

@@ -4,7 +4,11 @@ export interface LayoutProps {
     /** See `apps/www/_layout.tsx`'s `LayoutProps` doc comment — identical mechanism, supplied by
      * `EscrowConsoleRoute`'s `fetchProps()`. */
     branding?: Branding;
+    /** The signed-in user's stored appearance preferences (a page prop from the same `fetchProps()`, present only on the www pages and only when the user has any): rendered as a stylesheet in the `<head>` so the very first paint is themed - see `AppearanceHead`. */
+    appearance?: unknown;
+    /** The signed-in user (supplied by the framework), so a cached appearance from another account on this browser is never applied. */
+    userUid?: string;
 }
 /** Unlike the other apps, never links the admin-configured custom stylesheet: the escrow console handles escrow
  * key material, so no admin-supplied CSS is loaded on it. */
-export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>): React.JSX.Element;
+export default function Layout({ children, branding, appearance, userUid }: PropsWithChildren<LayoutProps>): React.JSX.Element;

package/dist/apps/escrow/_layout.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppearanceHead, appearanceHtmlAttributes } from "../shared/appearance/AppearanceHead.js";
 /** Unlike the other apps, never links the admin-configured custom stylesheet: the escrow console handles escrow
  * key material, so no admin-supplied CSS is loaded on it. */
-export default function Layout({ children, branding }) {
+export default function Layout({ children, branding, appearance, userUid }) {
     const title = branding?.title || branding?.companyName
         ? `${branding?.title || branding?.companyName}: Escrow Console`
         : "RapidMX: Escrow Console";
     const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), _jsx("link", { rel: "icon", type: "image/svg+xml", href: iconHref }), _jsx("link", { rel: "alternate icon", href: "/favicon.ico" }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" })] }), _jsx("body", { children: children })] }));
+    return (_jsxs("html", { lang: "en", ...appearanceHtmlAttributes(appearance, userUid), children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), _jsx("link", { rel: "icon", type: "image/svg+xml", href: iconHref }), _jsx("link", { rel: "alternate icon", href: "/favicon.ico" }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" }), _jsx(AppearanceHead, { appearance: appearance })] }), _jsx("body", { children: children })] }));
 }

package/dist/apps/shared/appearance/AppearanceForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Settings > Appearance: the colour scheme, the theme colours and the background. Every control changes the app itself at once - the
+ * page you are on is the preview - and saves in the background (`useAppearance()`); a save that fails puts the change back and says so
+ * here. Nothing waits on the server, and nothing is disabled while it works.
+ */
+export default function AppearanceForm(): React.JSX.Element;

package/dist/apps/shared/appearance/AppearanceForm.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { APPEARANCE_MODES, BACKGROUND_BLUR_MAX, BACKGROUND_DIM_MAX, BACKGROUND_FITS, BACKGROUND_IMAGE_TYPES, BACKGROUND_MAX_BYTES, DEFAULT_BACKGROUND, validateBackgroundFile, } from "@rapidmx/react-shared/appearance/preferencesApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import ColorField from "./ColorField.js";
+import { normalizeHex } from "./color.js";
+import { useAppearance } from "./appearanceContext.js";
+import { DEFAULT_PALETTE, contrastWarnings } from "./theme.js";
+const MODE_LABELS = {
+    system: { label: "System", hint: "Follow this device" },
+    light: { label: "Light", hint: "Always light" },
+    dark: { label: "Dark", hint: "Always dark" },
+};
+const FIT_LABELS = {
+    cover: "Cover (fill the window)",
+    contain: "Contain (show all of it)",
+    tile: "Tile (repeat)",
+};
+const COLOR_FIELDS = [
+    { key: "primary", label: "Primary", description: "Links, the selected app and folder, and focus rings.", token: "--rr-color-primary" },
+    { key: "accent", label: "Accent", description: "Main buttons and highlights.", token: "--rr-color-accent" },
+    { key: "surface", label: "Surface", description: "Panels, lists and menus.", token: "--rr-color-surface" },
+    { key: "text", label: "Text", description: "Everything written on a surface.", token: "--rr-color-text" },
+];
+/** The colour a token has right now on the page (the app's, the branding's, or the user's own), as `#rrggbb`; `fallback` where it can't be read (jsdom, or a value that isn't a colour). Only called from an effect, so there is always a document. */
+function readToken(token, fallback) {
+    return normalizeHex(getComputedStyle(document.documentElement).getPropertyValue(token)) ?? fallback;
+}
+const DEFAULT_TOKEN_COLORS = {
+    primary: { light: "#0d9488", dark: "#2dd4bf" },
+    accent: { light: "#a3690a", dark: "#f2af0d" },
+    surface: { light: DEFAULT_PALETTE.light.surface, dark: DEFAULT_PALETTE.dark.surface },
+    text: { light: DEFAULT_PALETTE.light.text, dark: DEFAULT_PALETTE.dark.text },
+};
+/** The colour a new "Colour" background starts as. */
+const STARTING_BACKGROUND_COLOR = { light: "#dbe4ee", dark: "#1e293b" };
+function formatBytes(bytes) {
+    return `${bytes / (1024 * 1024)} MB`;
+}
+/**
+ * Settings > Appearance: the colour scheme, the theme colours and the background. Every control changes the app itself at once - the
+ * page you are on is the preview - and saves in the background (`useAppearance()`); a save that fails puts the change back and says so
+ * here. Nothing waits on the server, and nothing is disabled while it works.
+ */
+export default function AppearanceForm() {
+    const appearance = useAppearance();
+    const { prefs, resolved, setPrefs, uploadBackground, removeBackground, reset, error, clearError, saving, isDefault, backgroundUrl } = appearance;
+    const background = prefs.background;
+    const colors = prefs.colors;
+    // The kind the radio shows: chosen before it can take effect ("Image" is chosen before there is one).
+    const [kind, setKind] = useState(background?.kind ?? "none");
+    useEffect(() => setKind(background?.kind ?? "none"), [background?.kind]);
+    const [fileError, setFileError] = useState(null);
+    const [dragging, setDragging] = useState(false);
+    const [uploading, setUploading] = useState(null);
+    const inputRef = useRef(null);
+    // What the colour fields show while unset: the tokens as they are on the page (a deployment's branding may have its own).
+    const [current, setCurrent] = useState(() => ({
+        primary: DEFAULT_TOKEN_COLORS.primary[resolved],
+        accent: DEFAULT_TOKEN_COLORS.accent[resolved],
+        surface: DEFAULT_TOKEN_COLORS.surface[resolved],
+        text: DEFAULT_TOKEN_COLORS.text[resolved],
+    }));
+    useEffect(() => {
+        setCurrent(Object.fromEntries(COLOR_FIELDS.map((field) => [field.key, readToken(field.token, DEFAULT_TOKEN_COLORS[field.key][resolved])])));
+    }, [resolved, colors]);
+    const warnings = contrastWarnings(colors, resolved);
+    const hasImage = background?.imageVersion !== undefined;
+    function chooseKind(next) {
+        setKind(next);
+        if (next === "none") {
+            setPrefs({ background: { kind: "none" } });
+        }
+        else if (next === "color") {
+            setPrefs({ background: { kind: "color", color: background?.color ?? STARTING_BACKGROUND_COLOR[resolved] } });
+        }
+        else if (hasImage) {
+            setPrefs({ background: { kind: "image" } });
+        }
+    }
+    function handleFile(file) {
+        if (!file) {
+            return;
+        }
+        const problem = validateBackgroundFile(file);
+        if (problem) {
+            setFileError(problem);
+            return;
+        }
+        setFileError(null);
+        setUploading(file.name);
+        void uploadBackground(file).finally(() => setUploading(null));
+    }
+    function handleDrop(event) {
+        event.preventDefault();
+        setDragging(false);
+        handleFile(event.dataTransfer.files[0]);
+    }
+    const showImageControls = kind === "image";
+    const dim = background?.dim ?? DEFAULT_BACKGROUND.dim;
+    const blur = background?.blur ?? DEFAULT_BACKGROUND.blur;
+    const fit = background?.fit ?? DEFAULT_BACKGROUND.fit;
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-2xl flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Appearance" }), _jsx("p", { className: "text-sm text-text-muted", children: "Choose how RapidMX looks for you. Every change shows straight away, across the whole app, and is saved to your account for your other devices." }), _jsx("p", { role: "status", "aria-live": "polite", className: "mt-1 h-4 text-xs text-text-muted", children: saving ? "Saving…" : "" })] }), error && (_jsxs(Alert, { children: [_jsx("span", { className: "flex-1", children: error }), _jsx("button", { type: "button", className: "font-semibold underline hover:no-underline", onClick: clearError, children: "Dismiss" })] })), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Colour scheme" }), _jsx("div", { className: "flex flex-wrap gap-2", children: APPEARANCE_MODES.map((mode) => (_jsxs("label", { className: [
+                                    "flex cursor-pointer items-center gap-2 rounded-sm border px-3 py-2 text-sm",
+                                    prefs.mode === mode ? "border-primary bg-primary/10" : "border-border hover:bg-surface-alt",
+                                ].join(" "), children: [_jsx("input", { type: "radio", name: "appearance-mode", value: mode, checked: prefs.mode === mode, onChange: () => setPrefs({ mode }) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold", children: MODE_LABELS[mode].label }), _jsx("span", { className: "ml-1.5 text-xs text-text-muted", children: MODE_LABELS[mode].hint })] })] }, mode))) })] }), _jsxs("fieldset", { className: "flex flex-col gap-4", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Theme colours" }), _jsx("p", { className: "text-xs text-text-muted -mt-2", children: "These apply in both the light and the dark scheme. A colour you have not chosen stays as the app (or your organization) has it." }), COLOR_FIELDS.map((field) => (_jsx(ColorField, { id: `appearance-${field.key}`, label: field.label, description: field.description, value: colors?.[field.key], current: current[field.key], onChange: (hex) => setPrefs({ colors: { [field.key]: hex } }), onReset: () => setPrefs({ colors: { [field.key]: null } }) }, field.key))), warnings.map((warning) => (_jsx("p", { role: "status", className: "rounded-sm bg-warning px-3 py-2 text-sm font-medium text-warning-contrast", children: warning.message }, warning.id)))] }), _jsxs("fieldset", { className: "flex flex-col gap-4", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Background" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ["none", "color", "image"].map((option) => (_jsxs("label", { className: [
+                                    "flex cursor-pointer items-center gap-2 rounded-sm border px-3 py-2 text-sm",
+                                    kind === option ? "border-primary bg-primary/10" : "border-border hover:bg-surface-alt",
+                                ].join(" "), children: [_jsx("input", { type: "radio", name: "appearance-background", value: option, checked: kind === option, onChange: () => chooseKind(option) }), _jsx("span", { className: "font-semibold", children: option === "none" ? "None" : option === "color" ? "Colour" : "Image" })] }, option))) }), kind === "color" && background?.color && (_jsx(ColorField, { id: "appearance-background-color", label: "Background colour", description: "Shows behind every panel of the app.", value: background.color, current: background.color, onChange: (hex) => setPrefs({ background: { kind: "color", color: hex } }) })), showImageControls && (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { role: "group", "aria-label": "Background image", onDragEnter: (event) => {
+                                        event.preventDefault();
+                                        setDragging(true);
+                                    }, onDragOver: (event) => {
+                                        event.preventDefault();
+                                        setDragging(true);
+                                    }, onDragLeave: () => setDragging(false), onDrop: handleDrop, className: [
+                                        "flex flex-wrap items-center gap-4 rounded-md border-2 border-dashed p-4",
+                                        dragging ? "border-primary bg-primary/10" : "border-border",
+                                    ].join(" "), children: [hasImage && backgroundUrl && (_jsx("img", { src: backgroundUrl, alt: "Your background image", className: "h-20 w-32 shrink-0 rounded-sm border border-border object-cover" })), _jsxs("div", { className: "min-w-0 flex-1 basis-48 text-sm", children: [_jsx("p", { className: "font-semibold", children: hasImage ? "Replace the image" : "Add an image" }), _jsxs("p", { className: "text-xs text-text-muted", children: ["Drag a picture here, or choose one. PNG, JPEG, WebP or AVIF, up to ", formatBytes(BACKGROUND_MAX_BYTES), "."] }), uploading && (_jsxs("p", { role: "status", className: "mt-1 text-xs text-text-muted", children: ["Uploading ", uploading, "\u2026"] }))] }), _jsx("input", { ref: inputRef, type: "file", accept: BACKGROUND_IMAGE_TYPES.join(","), "aria-label": "Choose a background image", className: "sr-only", onChange: (event) => {
+                                                handleFile(event.target.files?.[0]);
+                                                // The same file can be chosen again.
+                                                event.target.value = "";
+                                            } }), _jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => inputRef.current?.click(), children: "Choose image" }), hasImage && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => {
+                                                        setFileError(null);
+                                                        void removeBackground();
+                                                    }, children: "Remove" }))] })] }), fileError && (_jsx("p", { role: "alert", className: "text-sm text-danger", children: fileError })), hasImage && (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: "appearance-dim", className: "flex justify-between text-sm font-semibold", children: [_jsx("span", { children: "Dim" }), _jsxs("span", { className: "font-normal text-text-muted", children: [Math.round(dim * 100), "%"] })] }), _jsx("input", { id: "appearance-dim", type: "range", min: 0, max: Math.round(BACKGROUND_DIM_MAX * 100), step: 1, value: Math.round(dim * 100), "aria-valuetext": `${Math.round(dim * 100)} percent`, onChange: (event) => setPrefs({ background: { dim: Number(event.target.value) / 100 } }), className: "w-full accent-primary" }), _jsx("p", { className: "text-xs text-text-muted", children: "Lays the app\u2019s surface colour over the picture so text stays easy to read." })] }), _jsxs("div", { children: [_jsxs("label", { htmlFor: "appearance-blur", className: "flex justify-between text-sm font-semibold", children: [_jsx("span", { children: "Blur" }), _jsxs("span", { className: "font-normal text-text-muted", children: [blur, " px"] })] }), _jsx("input", { id: "appearance-blur", type: "range", min: 0, max: BACKGROUND_BLUR_MAX, step: 1, value: blur, "aria-valuetext": `${blur} pixels`, onChange: (event) => setPrefs({ background: { blur: Number(event.target.value) } }), className: "w-full accent-primary" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "appearance-fit", className: "block text-sm font-semibold mb-1", children: "Fit" }), _jsx("select", { id: "appearance-fit", value: fit, onChange: (event) => setPrefs({ background: { fit: event.target.value } }), className: "w-full max-w-xs rounded-sm border border-border bg-surface px-2 py-1.5 text-sm text-text", children: BACKGROUND_FITS.map((option) => (_jsx("option", { value: option, children: FIT_LABELS[option] }, option))) })] })] }))] }))] }), _jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: isDefault, onClick: () => void reset(), children: "Reset all" }) })] }) }));
+}

package/dist/apps/shared/appearance/AppearanceHead.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/** What a page layout puts on `<html>` for the server-rendered appearance: the explicit scheme (never for "System", which the stylesheet's own media query follows) and the signed-in user. */
+export declare function appearanceHtmlAttributes(appearance: unknown, userUid?: string): {
+    "data-theme"?: "light" | "dark";
+    "data-uid"?: string;
+};
+/**
+ * The `<head>` part of the user's appearance, for every page layout (`_layout.tsx` of www, admin and escrow): the stylesheet the server
+ * built from the preferences it was given (`appearance`, a page prop - only the www pages get one), so the first byte of the page is
+ * already themed, and the boot script (`APPEARANCE_BOOT_SCRIPT`), which applies the browser's cached copy before the first paint on pages
+ * that weren't given any. Nothing user-controlled reaches the CSS but validated colours, numbers and an image version made of safe characters.
+ */
+export declare function AppearanceHead({ appearance }: {
+    appearance?: unknown;
+}): React.JSX.Element;

package/dist/apps/shared/appearance/AppearanceHead.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { appearanceBackgroundUrl, normalizeAppearance } from "@rapidmx/react-shared/appearance/preferencesApi.js";
+import { APPEARANCE_BOOT_SCRIPT } from "./bootScript.js";
+import { cacheKeyOf, timeOf } from "./appearanceCache.js";
+import { APPEARANCE_STYLE_ID, appearanceCss } from "./theme.js";
+/** What a page layout puts on `<html>` for the server-rendered appearance: the explicit scheme (never for "System", which the stylesheet's own media query follows) and the signed-in user. */
+export function appearanceHtmlAttributes(appearance, userUid) {
+    const prefs = normalizeAppearance(appearance);
+    const attributes = {};
+    if (prefs && prefs.mode !== "system") {
+        attributes["data-theme"] = prefs.mode;
+    }
+    if (userUid) {
+        attributes["data-uid"] = userUid;
+    }
+    return attributes;
+}
+/**
+ * The `<head>` part of the user's appearance, for every page layout (`_layout.tsx` of www, admin and escrow): the stylesheet the server
+ * built from the preferences it was given (`appearance`, a page prop - only the www pages get one), so the first byte of the page is
+ * already themed, and the boot script (`APPEARANCE_BOOT_SCRIPT`), which applies the browser's cached copy before the first paint on pages
+ * that weren't given any. Nothing user-controlled reaches the CSS but validated colours, numbers and an image version made of safe characters.
+ */
+export function AppearanceHead({ appearance }) {
+    const prefs = normalizeAppearance(appearance);
+    const version = prefs?.background?.imageVersion;
+    const css = appearanceCss(prefs, { imageUrl: version === undefined ? undefined : appearanceBackgroundUrl(version) });
+    return (_jsxs(_Fragment, { children: [prefs && (_jsx("style", { id: APPEARANCE_STYLE_ID, "data-key": cacheKeyOf(prefs), "data-t": timeOf(prefs.updatedAt), 
+                // Present even when it is empty, for its time: the boot script keeps a browser copy that is newer than this page's idea of nothing. Cannot contain a closing tag: nothing in the CSS is free text.
+                dangerouslySetInnerHTML: { __html: css.replace(/</g, "\\3c ") } })), _jsx("script", { dangerouslySetInnerHTML: { __html: APPEARANCE_BOOT_SCRIPT } })] }));
+}

package/dist/apps/shared/appearance/AppearanceProvider.d.ts

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from "react";
+import { AppearancePreferences } from "@rapidmx/react-shared/appearance/preferencesApi.js";
+import { AppearancePatch } from "./appearanceContext.js";
+/** How long a change waits for a further one before it is saved - a slider being dragged is one save, not sixty. */
+export declare const APPEARANCE_SAVE_DELAY_MS = 400;
+/** `prefs` with `patch` merged in, normalised (so an out-of-range number or bad colour can't get through). See `AppearancePatch`. */
+export declare function mergeAppearance(prefs: AppearancePreferences, patch: AppearancePatch): AppearancePreferences;
+export interface AppearanceProviderProps {
+    /** The signed-in user - what the cache is filed under. */
+    userUid?: string;
+    /** The user's stored preferences as the server rendered the page (its `appearance` prop), so the first paint is already themed. Absent when the
+     * page wasn't given them (or the user has none). The server caches a page for up to a minute, so this can be older than what this browser last
+     * applied: the browser's own copy is used instead when it is newer (see `appearanceCache.ts`). */
+    initial?: unknown;
+    /** Whether to ask the server for the preferences once mounted (the default), which corrects a page that was cached. The admin and escrow
+     * consoles pass `false`: they use what the last webmail page cached in this browser. */
+    lookUp?: boolean;
+}
+/**
+ * Owns the user's appearance for the whole app: keeps the theme applied to the page and everything Settings > Appearance needs.
+ *
+ * - **Applies it.** One `<style id="rr-appearance">` in `<head>` (`appearanceCss()`) holds the user's colour tokens and the background
+ * layer, and `<html data-theme>` says which scheme is showing - the chosen one, or for "System" the operating system's, live.
+ * - **Instantly.** `setPrefs()`, `uploadBackground()`, `removeBackground()` and `reset()` change the page in the same frame; the save
+ * happens after (`APPEARANCE_SAVE_DELAY_MS` of quiet, coalesced), sending only what changed - the server merges - and a failed one
+ * rolls back to what the server has and sets `error`.
+ * - **No flash.** It starts from the server's `initial` preferences, or the browser's newer cached copy (which the inline boot script has
+ * already put in place before anything painted), and then asks the server what is true now.
+ * - **Stays current.** Another tab or device's change arrives as a push event and is applied unless this tab has changes of its own
+ * still in flight.
+ */
+export default function AppearanceProvider({ userUid, initial, lookUp, children }: PropsWithChildren<AppearanceProviderProps>): React.JSX.Element;