@rapidmx/web-client 0.10.0 → 0.12.0

package/dist/apps/shared/components/mail/reading/viewOriginal.js

@@ -0,0 +1,32 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useState } from "react";
+/** Messages the reader chose to see exactly as authored rather than adapted to the theme, for the life of the tab. */
+const original = new Set();
+/** Whether the reader asked to see `uid` as authored. */
+export function isViewedOriginal(uid) {
+    return original.has(uid);
+}
+/** Forgets every choice (the tests). */
+export function clearViewedOriginal() {
+    original.clear();
+}
+/**
+ * The per-message "View original" choice: `false` (follow the theme) until the reader flips it, then remembered for the session so
+ * collapsing and expanding a message, or coming back to it, keeps the choice.
+ */
+export function useViewOriginal(uid) {
+    const [value, setValue] = useState(() => isViewedOriginal(uid));
+    const update = useCallback((next) => {
+        if (next) {
+            original.add(uid);
+        }
+        else {
+            original.delete(uid);
+        }
+        setValue(next);
+    }, [uid]);
+    return [value, update];
+}

package/dist/apps/shared/components/settings/SigningCertificateCard.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { EnrollmentResult } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import type { EnrollmentSnapshot } from "../../signing/enrollmentTracker.js";
+import type { SigningEnrollmentInfo } from "../../signing/signingInfo.js";
+export type SigningCertificateMode = "pending" | "issued" | "failed" | "expired";
+export interface SigningCertificateCardProps {
+    mode: SigningCertificateMode;
+    /** What the server last said about the enrollment (the extended fields are all optional - an older server sends only `status`). */
+    enrollment: EnrollmentResult | null;
+    /** The tracker's view of it: busy flags, the check cooldown, the last check. Absent when nothing is being followed. */
+    snapshot?: EnrollmentSnapshot;
+    /** For an issued certificate when the enrollment carries no details (one installed long ago): the active key's own expiry (epoch ms). */
+    keyNotAfter?: number;
+    /** How this deployment issues certificates (`GET /system/signing-enrollment`): what a pending request says follows it. `null` / absent when it is not known. */
+    info?: SigningEnrollmentInfo | null;
+    /** The mailbox's address - the one the CA's verification e-mail goes to. */
+    address?: string;
+    /** Only the mailbox's owner can request a certificate. */
+    canRequest: boolean;
+    /** "Try again" / "Renew" / "Request a new certificate" is under way. */
+    requesting: boolean;
+    onCheck?: () => void;
+    onRequest?: () => void;
+}
+/**
+ * Settings > Encryption's "Digital signature certificate" card: where a signing-certificate enrollment is, in the words of the person waiting for
+ * it. A progress bar (determinate from the server's `progress`), the steps with a state icon and time each, a status line, when it was requested
+ * and last checked (kept current), and a "Check status" button with a busy state and a cooldown. An issued certificate shows its subject, issuer,
+ * serial (copyable) and expiry with a warning (and "Renew") inside 30 days; a failed one shows the reason and "Try again"; an expired one offers a
+ * new request. Everything but `mode` is optional so a server that only says `pending`/`issued`/`failed` still gets a useful card.
+ */
+export default function SigningCertificateCard({ mode, enrollment, snapshot, keyNotAfter, info, address, canRequest, requesting, onCheck, onRequest }: SigningCertificateCardProps): React.JSX.Element;

package/dist/apps/shared/components/settings/SigningCertificateCard.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineCheckCircle, HiOutlineExclamationTriangle, HiOutlineXCircle } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import { CA_UNREACHABLE_TEXT, MANUAL_ISSUE_TEXT, PENDING_FALLBACK_TEXT, expiryOf, formatDate, formatDateTime, healthWarning, isInstalling, isOverdue, issueModeOf, progressOf, requestedFromText, relativeTime, statusLineOf, stepsOf, timeOf, truncateSerial, } from "../../signing/enrollmentView.js";
+import { useNow } from "../../signing/useNow.js";
+const BADGE = {
+    pending: { text: "Pending", className: "bg-primary/15 text-primary-dark" },
+    issued: { text: "Active", className: "bg-success/15 text-success" },
+    failed: { text: "Failed", className: "bg-danger/15 text-danger" },
+    expired: { text: "Expired", className: "bg-danger/15 text-danger" },
+};
+const STEP_TEXT = {
+    done: "done",
+    active: "in progress",
+    pending: "waiting",
+    failed: "failed",
+};
+function StepIcon({ state }) {
+    if (state === "done") {
+        return _jsx(HiOutlineCheckCircle, { size: 18, "aria-hidden": "true", className: "shrink-0 text-success" });
+    }
+    if (state === "failed") {
+        return _jsx(HiOutlineXCircle, { size: 18, "aria-hidden": "true", className: "shrink-0 text-danger" });
+    }
+    if (state === "active") {
+        return (_jsx("span", { "aria-hidden": "true", className: "flex h-[18px] w-[18px] shrink-0 items-center justify-center", children: _jsx("span", { className: "h-3.5 w-3.5 rounded-full border-2 border-primary/30 border-t-primary motion-safe:animate-spin motion-reduce:border-primary" }) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", className: "flex h-[18px] w-[18px] shrink-0 items-center justify-center", children: _jsx("span", { className: "h-3 w-3 rounded-full border-2 border-border" }) }));
+}
+function Stepper({ steps }) {
+    return (_jsx("ol", { "aria-label": "Certificate steps", className: "flex flex-col gap-2", children: steps.map((step) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", "aria-current": step.state === "active" ? "step" : undefined, children: [_jsx(StepIcon, { state: step.state }), _jsxs("span", { className: step.state === "pending" ? "text-text-muted" : "text-text", children: [step.label, _jsxs("span", { className: "sr-only", children: [" - ", STEP_TEXT[step.state]] })] }), step.at && _jsx("span", { className: "ml-auto shrink-0 text-xs text-text-muted", children: formatDateTime(step.at) })] }, step.id))) }));
+}
+/**
+ * The progress bar: determinate when the server says how far along it is, an endless shimmer while a step is active and no number is known.
+ * `role="progressbar"` with `aria-valuenow` (left off when unknown, as ARIA says for an indeterminate bar) and a `aria-valuetext` in words.
+ */
+function ProgressBar({ value, text }) {
+    return (_jsx("div", { role: "progressbar", "aria-label": "Certificate progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, "aria-valuetext": text, className: "h-2 w-full overflow-hidden rounded-pill bg-border/60", children: value === undefined ? (_jsx("div", { className: "rr-progress-indeterminate h-full w-1/3 rounded-pill bg-primary motion-reduce:w-full motion-reduce:opacity-40" })) : (_jsx("div", { className: "rr-progress-shimmer h-full rounded-pill bg-primary transition-[width] duration-500", style: { width: `${Math.max(value, value > 0 ? 3 : 0)}%` } })) }));
+}
+function Detail({ label, children }) {
+    return (_jsxs("div", { className: "grid grid-cols-[6.5rem_1fr] gap-2 text-sm sm:grid-cols-[8rem_1fr]", children: [_jsx("dt", { className: "text-text-muted", children: label }), _jsx("dd", { className: "min-w-0 break-words", children: children })] }));
+}
+/** The sentence under the button: what the last manual check found, or why it cannot be pressed again yet. */
+function checkMessage(snapshot, statusLine, now) {
+    if (snapshot?.offline) {
+        return "Could not reach the server - showing what was last known.";
+    }
+    const last = snapshot?.lastCheck;
+    if (!last) {
+        return undefined;
+    }
+    if (last.outcome === "failed") {
+        return "Could not check just now - try again in a moment.";
+    }
+    if (last.outcome === "limited") {
+        return "Checked a moment ago - please wait a few seconds before checking again.";
+    }
+    if (last.outcome === "changed") {
+        return `Updated - ${statusLine ?? "the status changed"}`;
+    }
+    return `Still waiting - checked ${relativeTime(last.at, now)}`;
+}
+/**
+ * Settings > Encryption's "Digital signature certificate" card: where a signing-certificate enrollment is, in the words of the person waiting for
+ * it. A progress bar (determinate from the server's `progress`), the steps with a state icon and time each, a status line, when it was requested
+ * and last checked (kept current), and a "Check status" button with a busy state and a cooldown. An issued certificate shows its subject, issuer,
+ * serial (copyable) and expiry with a warning (and "Renew") inside 30 days; a failed one shows the reason and "Try again"; an expired one offers a
+ * new request. Everything but `mode` is optional so a server that only says `pending`/`issued`/`failed` still gets a useful card.
+ */
+export default function SigningCertificateCard({ mode, enrollment, snapshot, keyNotAfter, info, address, canRequest, requesting, onCheck, onRequest }) {
+    const busy = mode === "pending" || (snapshot?.retryAt ?? 0) > Date.now();
+    const now = useNow(busy ? 1000 : 30000);
+    const steps = stepsOf(enrollment);
+    const progress = progressOf(enrollment);
+    const statusLine = statusLineOf(enrollment);
+    // Any of the newer fields gives a percentage (the server's, or the share of steps done), so this is "the server told us more than pending".
+    const detailed = progress !== undefined;
+    const badge = BADGE[mode];
+    // What the words say depends on how this deployment issues certificates: a public CA does it by itself, an administrator uploads it, or nobody has said.
+    const issueMode = issueModeOf(enrollment, info);
+    const problem = healthWarning(info);
+    const notAfter = enrollment?.notAfter ?? keyNotAfter;
+    const expiry = expiryOf(notAfter, now);
+    const requestedAgo = relativeTime(enrollment?.requestedAt, now);
+    const checkedAt = timeOf(enrollment?.lastCheckedAt) ?? snapshot?.answeredAt ?? undefined;
+    const checkedAgo = relativeTime(checkedAt, now);
+    const waitSeconds = Math.max(0, Math.ceil(((snapshot?.retryAt ?? 0) - now) / 1000));
+    const checkingNow = snapshot?.checkingNow ?? false;
+    const message = checkMessage(snapshot, statusLine, now);
+    const overdue = isOverdue(enrollment, now);
+    return (_jsxs("section", { "aria-label": "Digital signature certificate", className: "flex flex-col gap-3 rounded-md border border-border bg-surface p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Digital signature certificate" }), _jsx("span", { className: ["rounded-pill px-2 py-0.5 text-xs font-bold", badge.className].join(" "), children: badge.text })] }), mode === "pending" && (_jsxs(_Fragment, { children: [issueMode === "manual" ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: MANUAL_ISSUE_TEXT }), info?.contactEmail && _jsxs("p", { className: "text-xs text-text-muted", children: ["Administrator: ", info.contactEmail] })] })) : (_jsxs(_Fragment, { children: [issueMode === "automatic" && _jsx("p", { className: "text-sm text-text-muted", children: requestedFromText(info, address) }), detailed ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: statusLine ?? "In progress" }), _jsx(ProgressBar, { value: progress, text: `${progress} percent - ${statusLine ?? "in progress"}` })] })) : (_jsxs(_Fragment, { children: [_jsx(ProgressBar, { value: undefined, text: "In progress" }), issueMode === "unknown" && _jsx("p", { className: "text-sm text-text-muted", children: PENDING_FALLBACK_TEXT })] }))] })), problem && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm", children: [_jsx(HiOutlineExclamationTriangle, { size: 18, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-danger" }), _jsx("span", { children: problem })] })), overdue && (_jsxs("p", { className: "text-sm", children: ["This is taking longer than expected", checkedAgo ? ` - last checked ${checkedAgo}` : "", ". Use Check status to ask again."] })), enrollment?.errorCode === "ca-unreachable" && _jsx("p", { className: "text-sm text-text-muted", children: CA_UNREACHABLE_TEXT }), enrollment?.note && _jsx("p", { className: "text-xs text-text-muted", children: enrollment.note }), steps.length > 0 && _jsx(Stepper, { steps: steps }), issueMode === "automatic" && (_jsx("p", { className: "text-xs text-text-muted", children: "You can leave this page - you will be told when the certificate is issued or the request fails." })), (requestedAgo || checkedAgo) && (_jsxs("p", { className: "text-xs text-text-muted", children: [requestedAgo ? `Requested ${issueMode === "manual" ? formatDateTime(enrollment?.requestedAt) : requestedAgo}` : "", requestedAgo && checkedAgo ? " - " : "", checkedAgo ? `last checked ${checkedAgo}` : ""] })), onCheck && (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: checkingNow, disabled: checkingNow || waitSeconds > 0, "aria-busy": checkingNow, onClick: onCheck, children: checkingNow ? "Checking..." : waitSeconds > 0 ? `Check again in ${waitSeconds} s` : "Check status" }), _jsx("span", { role: "status", "aria-live": "polite", className: "text-xs text-text-muted", children: message })] }))] })), mode === "issued" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: isInstalling(enrollment)
+                            ? statusLineOf(enrollment)
+                            : notAfter !== undefined
+                                ? `Issued - valid until ${formatDate(notAfter)}`
+                                : "Issued" }), enrollment?.note && _jsx("p", { className: "text-xs text-text-muted", children: enrollment.note }), expiry.state === "soon" && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm", children: [_jsx(HiOutlineExclamationTriangle, { size: 18, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-danger" }), _jsxs("span", { children: ["This certificate expires ", expiry.daysLeft === 1 ? "tomorrow" : `in ${expiry.daysLeft} days`, ". Renew it so your mail stays signed."] })] })), (enrollment?.subject || enrollment?.issuer || enrollment?.serialNumber || enrollment?.issuedAt) && (_jsxs("dl", { className: "flex flex-col gap-1.5", children: [enrollment.subject && _jsx(Detail, { label: "Subject", children: enrollment.subject }), enrollment.issuer && _jsx(Detail, { label: "Issuer", children: enrollment.issuer }), enrollment.serialNumber && (_jsx(Detail, { label: "Serial number", children: _jsxs("span", { className: "inline-flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-xs", title: enrollment.serialNumber, children: truncateSerial(enrollment.serialNumber) }), _jsx(CopyButton, { value: enrollment.serialNumber, label: "Copy the certificate's serial number" })] }) })), enrollment.issuedAt && _jsx(Detail, { label: "Issued", children: formatDate(enrollment.issuedAt) }), notAfter !== undefined && _jsx(Detail, { label: "Valid until", children: formatDate(notAfter) })] })), canRequest && onRequest && expiry.state === "soon" && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Renew" }) }))] })), mode === "failed" && (_jsxs(_Fragment, { children: [_jsx(Alert, { children: statusLine ?? "Failed: the certificate could not be issued." }), steps.length > 0 && _jsx(Stepper, { steps: steps }), canRequest && onRequest && enrollment?.retryable !== false && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Try again" }) }))] })), mode === "expired" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: notAfter !== undefined ? `Expired on ${formatDate(notAfter)}. Mail from this mailbox is no longer signed.` : "This certificate has expired. Mail from this mailbox is no longer signed." }), canRequest && onRequest && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Request a new certificate" }) }))] }))] }));
+}

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -16,6 +16,7 @@ import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
+    { id: "appearance", href: "/settings/appearance", label: "Appearance" },
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
     { id: "signatures", href: "/settings/signatures", label: "Signatures" },

package/dist/apps/shared/components/sharing/PrincipalListField.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+export interface PrincipalListFieldProps {
+    label: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Exact-match resolve call for what's typed - see `PrincipalResolver`. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+}
+/**
+ * A list-of-user-uids editor - the same visual list/per-item-remove shape `StringListField` established, but a
+ * uid can only be ADDED by looking it up and confirming who it is first (`PrincipalResolver`), never typed
+ * directly. Unlike `StringListField`'s free-text values (a distribution list's member addresses, a legal hold's
+ * custodian MAILBOX uids - values nobody needs to be "looked up" as a person for), every value here is a PERSON's
+ * user uid, granted a real role purely by what gets typed here - the exact "raw uid text field with no way to see
+ * whose it is" gap this app closes everywhere else a person is assigned by identifier.
+ *
+ * An already-added uid is still shown as plain text (same as `StringListField`, and as `ShareAccessCard`'s own
+ * member list) - it was already resolved and confirmed when it was added, so there is nothing left to look up.
+ */
+export default function PrincipalListField({ label, values, onChange, resolve, placeholder, emptyMessage, disabled }: PrincipalListFieldProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalListField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+/**
+ * A list-of-user-uids editor - the same visual list/per-item-remove shape `StringListField` established, but a
+ * uid can only be ADDED by looking it up and confirming who it is first (`PrincipalResolver`), never typed
+ * directly. Unlike `StringListField`'s free-text values (a distribution list's member addresses, a legal hold's
+ * custodian MAILBOX uids - values nobody needs to be "looked up" as a person for), every value here is a PERSON's
+ * user uid, granted a real role purely by what gets typed here - the exact "raw uid text field with no way to see
+ * whose it is" gap this app closes everywhere else a person is assigned by identifier.
+ *
+ * An already-added uid is still shown as plain text (same as `StringListField`, and as `ShareAccessCard`'s own
+ * member list) - it was already resolved and confirmed when it was added, so there is nothing left to look up.
+ */
+export default function PrincipalListField({ label, values, onChange, resolve, placeholder, emptyMessage = "None added yet.", disabled }) {
+    function handleRemove(uid) {
+        onChange(values.filter((v) => v !== uid));
+    }
+    return (_jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: label }), _jsxs("ul", { className: "flex flex-col gap-2 mb-2", children: [values.length === 0 && (_jsx("li", { className: "text-sm text-text-muted", children: emptyMessage }, "empty")), values.map((uid) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsx("span", { className: "text-sm font-medium break-all", children: uid }), _jsx("button", { type: "button", onClick: () => handleRemove(uid), disabled: disabled, className: "text-sm text-danger hover:underline disabled:opacity-55 shrink-0", children: "Remove" })] }, uid)))] }), !disabled && (_jsx(PrincipalResolver, { resolve: resolve, onResolved: (person) => {
+                    if (!values.includes(person.userUid)) {
+                        onChange([...values, person.userUid]);
+                    }
+                }, placeholder: placeholder ?? "Email address, username or user id", ariaLabel: label, confirmLabel: "Add", confirmErrorMessage: "Could not add this person.", describeConfirm: (person) => (_jsxs(_Fragment, { children: ["Add ", _jsx("strong", { className: "break-all", children: describePerson(person) }), "?"] })) }))] }));
+}

package/dist/apps/shared/components/sharing/PrincipalPicker.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { MailboxAccessRole, ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import { describePerson } from "./PrincipalResolver.js";
+export { describePerson };
+export interface PrincipalPickerProps {
+    mailboxUid: string;
+    /** What each access level is called on this page. */
+    roleLabels: Record<MailboxAccessRole, string>;
+    /** Text put in the box to start with - a stored entry being replaced, say. */
+    initialPrincipal?: string;
+    /** The access level pre-selected. */
+    defaultRole?: MailboxAccessRole;
+    /** What the box asks for. */
+    placeholder?: string;
+    /** Called once the grant is saved, with the person it went to. */
+    onGranted: (person: ResolvedPrincipal, role: MailboxAccessRole) => void | Promise<void>;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+/**
+ * "Who?" for a sharing screen - a thin wrapper around the general `PrincipalResolver`, supplying mailbox sharing's
+ * own resolve call (`resolveMailboxPrincipal()`), its role selector, and its grant action (`setMailboxAccess()`).
+ * What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id - is RESOLVED by the
+ * server before anything is saved, and the person is shown (name and address) for the caller to confirm; only then
+ * is the grant made, against that person's uid. Free text is never stored: an ACL record matches a user uid and
+ * nothing else, so a grant to a typed username applies to nobody.
+ */
+export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole, placeholder, onGranted, onCancel }: PrincipalPickerProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalPicker.js

@@ -0,0 +1,24 @@
+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
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { resolveMailboxPrincipal, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+export { describePerson };
+/**
+ * "Who?" for a sharing screen - a thin wrapper around the general `PrincipalResolver`, supplying mailbox sharing's
+ * own resolve call (`resolveMailboxPrincipal()`), its role selector, and its grant action (`setMailboxAccess()`).
+ * What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id - is RESOLVED by the
+ * server before anything is saved, and the person is shown (name and address) for the caller to confirm; only then
+ * is the grant made, against that person's uid. Free text is never stored: an ACL record matches a user uid and
+ * nothing else, so a grant to a typed username applies to nobody.
+ */
+export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole = "viewer", placeholder, onGranted, onCancel }) {
+    const [role, setRole] = useState(defaultRole);
+    return (_jsx(PrincipalResolver, { resolve: (principal) => resolveMailboxPrincipal(mailboxUid, principal), onResolved: async (person) => {
+            await setMailboxAccess(mailboxUid, person.userUid, role);
+            await onGranted(person, role);
+        }, initialPrincipal: initialPrincipal, placeholder: placeholder ?? "Email address, username or user id", ariaLabel: "Who to share with", confirmLabel: "Grant", confirmErrorMessage: "Could not grant access.", describeConfirm: (person) => (_jsxs(_Fragment, { children: ["Share with ", _jsx("strong", { className: "break-all", children: describePerson(person) }), " as ", _jsx("em", { children: roleLabels[role] }), "?"] })), onCancel: onCancel, children: _jsx("select", { "aria-label": "Access level", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: role, onChange: (e) => setRole(e.target.value), children: Object.keys(roleLabels).map((value) => (_jsx("option", { value: value, children: roleLabels[value] }, value))) }) }));
+}

package/dist/apps/shared/components/sharing/PrincipalResolver.d.ts

@@ -0,0 +1,44 @@
+import React, { ReactNode } from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+export interface PrincipalResolverProps {
+    /** Resolves what was typed - a mailbox address, an auth-server username or e-mail alias, or a user uid - to
+     * the one person it names, exact match only. Rejects (typically with an `ApiRequestError`) for nobody. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    /** Called once the caller confirms the resolved person is the right one. The box is cleared once this
+     * resolves - throw (or reject) to keep the person on screen and show an error instead. */
+    onResolved: (person: ResolvedPrincipal) => void | Promise<void>;
+    /** Text put in the box to start with - a stored entry being replaced, say - looked up automatically on mount. */
+    initialPrincipal?: string;
+    /** What the box asks for. */
+    placeholder: string;
+    /** The box's accessible name. */
+    ariaLabel: string;
+    /** Extra controls rendered between the text box and the Find button (e.g. a role selector). */
+    children?: ReactNode;
+    /** The confirm button's label (e.g. "Grant", "Use this owner"). */
+    confirmLabel: string;
+    /** What the confirmation row says once a person is found - e.g. "Share with X as Y?". */
+    describeConfirm: (person: ResolvedPrincipal) => ReactNode;
+    /** Shown if `onResolved` rejects, unless it was an `ApiRequestError` (then its own message is shown). */
+    confirmErrorMessage: string;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export declare function describePerson(person: ResolvedPrincipal): string;
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({ resolve, onResolved, initialPrincipal, placeholder, ariaLabel, children, confirmLabel, describeConfirm, confirmErrorMessage, onCancel, }: PrincipalResolverProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalResolver.js

@@ -0,0 +1,92 @@
+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, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export function describePerson(person) {
+    if (person.displayName && person.address)
+        return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({ resolve, onResolved, initialPrincipal, placeholder, ariaLabel, children, confirmLabel, describeConfirm, confirmErrorMessage, onCancel, }) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [person, setPerson] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+    async function find(principal) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolve(principal));
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    function submitFind() {
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+    /** Enter in the text box finds, same as clicking the button - handled here (not a native `<form>` submit,
+     * see this component's own doc comment on why) so it works whether or not a caller nests this inside one of
+     * their own forms (`MailboxCreateForm` does). */
+    function handleKeyDown(e) {
+        if (e.key === "Enter") {
+            // Stops the keystroke from also submitting an ANCESTOR `<form>` this component happens to be nested in.
+            e.preventDefault();
+            submitFind();
+        }
+    }
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleConfirm() {
+        setBusy(true);
+        setError(null);
+        try {
+            await onResolved(person);
+            setTyped("");
+            setPerson(null);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : confirmErrorMessage);
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": ariaLabel, placeholder: placeholder, className: "flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: typed, onChange: (e) => {
+                            setTyped(e.target.value);
+                            setPerson(null);
+                        }, onKeyDown: handleKeyDown, disabled: busy }), children, _jsx(Button, { type: "button", variant: "secondary", loading: busy && !person, disabled: busy, className: "!w-auto", onClick: submitFind, children: "Find" }), onCancel && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onCancel, children: "Cancel" }))] }), person && (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm", children: [_jsx("span", { children: describeConfirm(person) }), _jsx(Button, { type: "button", loading: busy, disabled: busy, className: "!w-auto", onClick: () => void handleConfirm(), children: confirmLabel })] }))] }));
+}

package/dist/apps/shared/components/tasks/TasksSidebar.js

@@ -8,6 +8,7 @@ import { HiOutlineBars3 } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createTaskList, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
 export function tasksViewKey(view) {
     return view.type === "list" ? `list:${view.uid}` : view.type;
 }
@@ -66,7 +67,8 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
             setAddingList(false);
         }
         catch (err) {
-            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+            // A pop-up: `listsError` is only the lists' own load failure.
+            notifyApiError(err, "Couldn't create the list");
         }
     }
     function handleSelect(view) {
@@ -77,5 +79,5 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
     // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
     // the `idPrefix`).
     const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "My Day", count: myDayCount, active: active.type === "myDay", onClick: () => handleSelect({ type: "myDay" }) }), _jsx(NavItem, { label: "Important", count: importantCount, active: active.type === "important", onClick: () => handleSelect({ type: "important" }) }), _jsx(NavItem, { label: "Planned", count: plannedCount, active: active.type === "planned", onClick: () => handleSelect({ type: "planned" }) }), _jsx(NavItem, { label: "Assigned to me", count: assignedToMeCount, active: active.type === "assignedToMe", onClick: () => handleSelect({ type: "assignedToMe" }) }), _jsx(NavItem, { label: "Flagged email", active: active.type === "flagged", onClick: () => handleSelect({ type: "flagged" }) })] }), _jsx(NavItem, { label: "Tasks", count: tasks.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] })] }));
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -96,7 +96,9 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-tasks-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-tasks-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
                                 navigate(`/tasks?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // With a single mailbox and no error this column would be empty: no 224 px of nothing beside the tasks' own menu.
+        const hasSidebar = mailboxes.length > 1 || !!folderError;
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "tasks", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/mail/folderCounts.d.ts

@@ -75,4 +75,4 @@ export interface FolderCounts {
  * Holds the folder counts overlay for `MailShell`. `folders` is every folder the sidebar lists (the overlay starts from what
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
-export declare function useFolderCounts(mailboxes: Mailbox[], folders: Folder[]): FolderCounts;
+export declare function useFolderCounts(mailboxes: Mailbox[], folders: Folder[], onFoldersListed?: (folders: Folder[]) => void): FolderCounts;

package/dist/apps/shared/mail/folderCounts.js

@@ -62,10 +62,10 @@ const SEEN_LIMIT = 500;
  * Holds the folder counts overlay for `MailShell`. `folders` is every folder the sidebar lists (the overlay starts from what
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
-export function useFolderCounts(mailboxes, folders) {
+export function useFolderCounts(mailboxes, folders, onFoldersListed) {
     const [counts, setCounts] = useState({});
-    const latestRef = useRef({ mailboxes, folders });
-    latestRef.current = { mailboxes, folders };
+    const latestRef = useRef({ mailboxes, folders, onFoldersListed });
+    latestRef.current = { mailboxes, folders, onFoldersListed };
     // Bumped by every change of the overlay this page makes, so a read that started before one can tell it is out of date.
     const changesRef = useRef(0);
     const inFlightRef = useRef(0);
@@ -116,6 +116,12 @@ export function useFolderCounts(mailboxes, folders) {
         if (stoppedRef.current || run !== runRef.current) {
             return;
         }
+        // Whatever the counts' fate below, these are the mailboxes' folders as they are: a folder the sidebar does not have yet is filed now.
+        for (const list of results) {
+            if (list) {
+                latestRef.current.onFoldersListed?.(list);
+            }
+        }
         if (inFlightRef.current > 0 || changesRef.current !== startedAt) {
             // A change of this page's own began or ended while that was being read, so it may predate it: read again.
             refresh();

package/dist/apps/shared/mail/folderTree.d.ts

@@ -0,0 +1,55 @@
+import type { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailboxFolders } from "../components/mail/layout/MailShell.js";
+/**
+ * The sidebar's order of a mailbox's well-known folders; anything else (`user`) follows, alphabetically. Also the order push channels are asked
+ * for (`pushChannelsFor()`), so when the server's channel cap bites it is the folders lowest in this list that go without live updates.
+ */
+export declare const FOLDER_ORDER: string[];
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see `CalendarShell`/`ContactsShell`/`TasksShell`), not
+ * Mail - `listFolders()` returns every well-known folder for the mailbox regardless of which app owns it, so Mail's own folder tree filters down
+ * to just the mail ones itself, or those other apps' folders leak into its sidebar.
+ */
+export declare const MAIL_FOLDER_TYPES: Set<string>;
+/** The well-known folders the server creates lazily around a first send: what the sidebar shows a placeholder for while a message is on its way. */
+export declare const SEND_FOLDER_TYPES: readonly ["outbox", "sent_items"];
+export declare function isMailFolder(folder: {
+    type: string;
+}): boolean;
+/** Well-known folders in `FOLDER_ORDER`, then the rest by name. A new array; the input is left alone. */
+export declare function sortFolders(folders: Folder[]): Folder[];
+/** What a sidebar row is: a folder that exists, or (`placeholder`) one that is expected to but has not arrived yet. */
+export type FolderRow = {
+    kind: "folder";
+    folder: Folder;
+} | {
+    kind: "placeholder";
+    type: string;
+};
+/**
+ * The rows of one mailbox's sidebar section, in order: every folder that exists, and - while `sending` messages are on their way and the
+ * server has not made the folder yet - a placeholder for each of the Outbox and Sent Items that is missing. The one place a folder that has not
+ * arrived is drawn, so it can never appear twice: the moment the real folder is in `folders` its placeholder is not built.
+ */
+export declare function folderRows(folders: Folder[], sending: number): FolderRow[];
+/** What a folder can be changed to by an event or a refetch: everything about it except the counts, which the counts overlay owns. */
+export type FolderChange = Partial<Pick<Folder, "name" | "type" | "parentFolderUid" | "color">> & {
+    uid: string;
+    mailboxUid?: string;
+};
+/**
+ * Files `folder` in the tree: added under its mailbox when unknown (a type Mail does not list is ignored), else its name, type, parent and
+ * colour brought up to date (a folder that became a type Mail does not list leaves the tree). Returns `entries` itself - the same array - when
+ * nothing changed, because everything on screen that depends on the tree starts over when it is a new one.
+ */
+export declare function upsertFolder(entries: MailboxFolders[], folder: Folder | FolderChange): MailboxFolders[];
+/** Takes a deleted folder out of the tree. The same array when it was not in it. */
+export declare function removeFolder(entries: MailboxFolders[], folderUid: string): MailboxFolders[];
+/**
+ * Brings one mailbox's part of the tree up to date with a listing the server just gave (`listFolders()`): folders it has that the tree lacks
+ * are added, changed names and types are taken. Nothing is removed - a listing that began before a folder was created here would take it out
+ * again, and deletions arrive as events - and the counts are not touched (see `useFolderCounts()`). The same array when there is nothing to do.
+ */
+export declare function reconcileFolders(entries: MailboxFolders[], listed: Folder[]): MailboxFolders[];
+/** Every folder uid in the tree. */
+export declare function knownFolderUids(entries: MailboxFolders[]): Set<string>;