@rapidmx/web-client 0.4.0 → 0.6.0

package/dist/apps/shared/components/contacts/ContactForm.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+export interface ContactFormProps {
+    contact?: Contact;
+    /** Create mode: the default mailbox (and its Contacts folder) to create in. */
+    mailboxUid?: string;
+    folderUid?: string;
+    /** Create mode: every mailbox the contact could be created in - with more than one, a Mailbox selector
+     * is shown. Choosing a mailbox other than `mailboxUid` looks up that mailbox's own Contacts folder. */
+    mailboxes?: Mailbox[];
+    onSaved: (contact: Contact) => void;
+    onCancel: () => void;
+}
+/**
+ * A contact's create/edit form. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`) and the
+ * mobile detail route's own edit mode (`apps/www/contacts/[uid].tsx`) — creation itself stays
+ * desktop-and-mobile-inline (see that route's own doc comment on why "new" never gets a dedicated route).
+ */
+export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }: ContactFormProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactForm.js

@@ -10,6 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.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 SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const ADDRESS_KINDS = ["home", "work", "other"];
@@ -30,7 +31,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     const [categoriesText, setCategoriesText] = useState((contact?.categories ?? []).join(", "));
     const [emails, setEmails] = useState(contact?.emails ?? []);
     const [phones, setPhones] = useState(contact?.phones ?? []);
-    const [address, setAddress] = useState(contact?.addresses[0] ?? null);
+    // Every stored address is kept and editable - editing a contact must never silently drop addresses
+    // beyond the first.
+    const [addresses, setAddresses] = useState(contact?.addresses ?? []);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     function updateEmail(index, patch) {
@@ -45,6 +48,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     function removePhone(index) {
         setPhones((prev) => prev.filter((_, i) => i !== index));
     }
+    function updateAddress(index, patch) {
+        setAddresses((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
+    }
+    function removeAddress(index) {
+        setAddresses((prev) => prev.filter((_, i) => i !== index));
+    }
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
@@ -58,22 +67,29 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 .split(",")
                 .map((c) => c.trim())
                 .filter(Boolean);
+            // An update merges only the fields in its body, so a field the user cleared is sent as an
+            // explicit `null` (an omitted/undefined one would keep its stored value); a create just omits it.
+            const cleared = contact ? null : undefined;
             const input = {
                 displayName: displayName.trim(),
-                givenName: givenName.trim() || undefined,
-                surname: surname.trim() || undefined,
-                company: company.trim() || undefined,
-                jobTitle: jobTitle.trim() || undefined,
-                notes: notes.trim() || undefined,
+                givenName: givenName.trim() || cleared,
+                surname: surname.trim() || cleared,
+                company: company.trim() || cleared,
+                jobTitle: jobTitle.trim() || cleared,
+                notes: notes.trim() || cleared,
                 favorite,
                 categories,
                 emails,
                 phones,
-                addresses: address ? [address] : [],
+                addresses,
             };
             let saved;
             if (contact) {
-                saved = await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input });
+                saved = await updateContact({
+                    uid: contact.uid,
+                    version: contact.version,
+                    ...input,
+                });
             }
             else {
                 const targetFolderUid = targetMailboxUid === mailboxUid ? folderUid : await findWellKnownFolderUid(targetMailboxUid, "contacts");
@@ -81,8 +97,14 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     setError("That mailbox has no Contacts folder.");
                     return;
                 }
-                saved = await createContact({ mailboxUid: targetMailboxUid, folderUid: targetFolderUid, ...input });
+                saved = await createContact({
+                    mailboxUid: targetMailboxUid,
+                    folderUid: targetFolderUid,
+                    ...input,
+                });
             }
+            // A message opened later in this page load must see the changed contact's signing keys.
+            clearPinnedSignerCache();
             onSaved(saved);
         }
         catch (err) {
@@ -92,5 +114,5 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             setSaving(false);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: address ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => setAddress({ ...address, street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => setAddress({ ...address, city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => setAddress({ ...address, state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => setAddress({ ...address, postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => setAddress({ ...address, country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => setAddress({ ...address, type: e.target.value }), "aria-label": "Address type", children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => setAddress(null), className: "self-start text-xs font-medium text-danger hover:underline", children: "Remove address" })] })) : (_jsx("button", { type: "button", onClick: () => setAddress({ type: "home" }), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
 }

package/dist/apps/shared/components/contacts/ContactsSidebar.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+export type ContactsView = {
+    type: "all";
+} | {
+    type: "favorites";
+} | {
+    type: "list";
+    uid: string;
+    name: string;
+} | {
+    type: "deleted";
+} | {
+    type: "category";
+    name: string;
+};
+export declare function contactsViewKey(view: ContactsView): string;
+export interface ContactsSidebarProps {
+    mailboxUid?: string;
+    /** The caller's own (non-deleted) contacts — used to compute counts and the distinct category list.
+     * Deliberately not fetched again here; the parent already has this loaded for the main table. */
+    contacts: Contact[];
+    active: ContactsView;
+    onSelect: (view: ContactsView) => void;
+    /** Whether to offer the "Deleted" view - restapi only honors `deleted=true` for a caller with delete and
+     * update rights on the mailbox (anyone else silently gets the live contacts), so the parent hides it
+     * otherwise. Defaults to `true`. */
+    showDeleted?: boolean;
+    /** Bumped by the parent whenever a contact-list membership changes, so a newly-created/renamed list
+     * shows up without a full page reload. */
+    refreshToken?: number;
+}
+/**
+ * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Your contact
+ * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
+ * distinct `categories` values across the loaded contacts — no separate category registry exists
+ * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
+ * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
+ */
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted }: ContactsSidebarProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactsSidebar.js

@@ -43,7 +43,7 @@ function NavItem({ label, count, active, onClick, swatch, }) {
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken }) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }) {
     const [lists, setLists] = useState([]);
     const [listsError, setListsError] = useState(null);
     const [addingList, setAddingList] = useState(false);
@@ -100,6 +100,6 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
     // `Drawer` (see MailShell/ContactsShell 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: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _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: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact 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" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _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: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact 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" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
     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 contacts menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Contacts", 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: "Contacts", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/contacts/ContactsToolbar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface ContactsToolbarProps {
+    selectedCount: number;
+    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
+     * to act (and read) as a removal instead of an addition. */
+    allSelectedFavorited: boolean;
+    onNewContact: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onEmail: () => void;
+    onToggleFavorite: () => void;
+    onAddCategory: () => void;
+    onExportVCard: () => void;
+    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
+     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
+    onImportFile: (file: File) => void;
+}
+/**
+ * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, }: ContactsToolbarProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/KeyChangeReview.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { type KeyConflict } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+export interface KeyChangeReviewProps {
+    /** The mailbox whose contact holds the pinned key. */
+    mailboxUid: string;
+    /** The contact's address `resolveKeyConflict()` looks the contact up by; absent hides the actions. */
+    address?: string;
+    useType: "sign" | "encrypt";
+    /** Who the key belongs to, for the advice ("confirm with <name>"). */
+    ownerName: string;
+    /** The currently pinned key and when it was first trusted; absent (couldn't be loaded) hides the actions. */
+    current?: {
+        fingerprint: string;
+        since: number;
+    };
+    /** The new key: its fingerprint, the addresses its certificate names, and when and how it was recorded (absent when
+     * it's only known from the message being read). */
+    proposed: {
+        fingerprint: string;
+        emails?: string[];
+        observedAt?: number;
+        source?: KeyConflict["source"];
+    };
+    /** For accepting a key seen in a message: its certificate. Omitted, accepting pins the recorded conflict's key. */
+    certificate?: string;
+    /** Whether "Keep current key" applies - only when a conflict for this exact key is recorded. */
+    canReject: boolean;
+    /** `false` when the reader is known to lack the rights to change the contact's keys. */
+    canResolve?: boolean;
+    /** After a successful accept or reject - the caller refreshes what it shows. */
+    onResolved: (action: "accept" | "reject") => void;
+    /** After a 409: the pinned key changed meanwhile. The caller reloads and says so (`KEY_CHANGE_STALE_MESSAGE`). */
+    onPinnedKeyChanged: () => void;
+}
+/**
+ * The old-versus-new comparison for a changed contact key, with Accept new key (confirmed in a dialog) and Keep current
+ * key, calling `resolveKeyConflict()` against the pinned fingerprint shown. Shared by a message's "signing key changed"
+ * notice and a contact's recorded key conflicts.
+ */
+export default function KeyChangeReview({ mailboxUid, address, useType, ownerName, current, proposed, certificate, canReject, canResolve, onResolved, onPinnedKeyChanged, }: KeyChangeReviewProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/KeyChangeReview.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { PinnedKeyChangedError, resolveKeyConflict } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { conflictSourceLabel, formatDate, groupFingerprint, keyChangeErrorMessage } from "./contactKeys.js";
+/**
+ * The old-versus-new comparison for a changed contact key, with Accept new key (confirmed in a dialog) and Keep current
+ * key, calling `resolveKeyConflict()` against the pinned fingerprint shown. Shared by a message's "signing key changed"
+ * notice and a contact's recorded key conflicts.
+ */
+export default function KeyChangeReview({ mailboxUid, address, useType, ownerName, current, proposed, certificate, canReject, canResolve, onResolved, onPinnedKeyChanged, }) {
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const [forbidden, setForbidden] = useState(false);
+    const kind = useType === "sign" ? "signing" : "encryption";
+    const actionable = !!address && !!current && canResolve !== false && !forbidden;
+    async function resolve(action) {
+        setBusy(action);
+        setError(null);
+        try {
+            await resolveKeyConflict(mailboxUid, {
+                address: address,
+                useType,
+                action,
+                expectedPinnedFingerprint: current.fingerprint,
+                ...(action === "accept" && certificate !== undefined ? { certificate } : {}),
+            });
+            setConfirmOpen(false);
+            onResolved(action);
+        }
+        catch (err) {
+            setConfirmOpen(false);
+            if (err instanceof PinnedKeyChangedError) {
+                onPinnedKeyChanged();
+                return;
+            }
+            if (err instanceof ApiRequestError && err.status === 403) {
+                setForbidden(true);
+            }
+            setError(keyChangeErrorMessage(err));
+        }
+        finally {
+            setBusy(null);
+        }
+    }
+    const proposedSeen = proposed.observedAt !== undefined
+        ? `First seen ${formatDate(proposed.observedAt)}${proposed.source ? `, ${conflictSourceLabel(proposed.source)}` : ""}`
+        : "Only seen in this message";
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { className: "rounded-sm bg-surface p-2", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Current key" }), current ? (_jsxs("dd", { children: [_jsx("span", { className: "font-mono text-xs break-all", children: groupFingerprint(current.fingerprint) }), _jsxs("span", { className: "block text-xs text-text-muted", children: ["First seen ", formatDate(current.since)] })] })) : (_jsx("dd", { className: "text-xs text-text-muted", children: "The key you trust couldn\u2019t be loaded." }))] }), _jsxs("div", { className: "rounded-sm bg-surface p-2", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "New key" }), _jsxs("dd", { children: [_jsx("span", { className: "font-mono text-xs break-all", children: groupFingerprint(proposed.fingerprint) }), proposed.emails && (_jsxs("span", { className: "block text-xs text-text-muted", children: ["Certificate for ", proposed.emails.length > 0 ? proposed.emails.join(", ") : "no email address"] })), _jsx("span", { className: "block text-xs text-text-muted", children: proposedSeen })] })] })] }), _jsxs("p", { children: ["This is routine when ", ownerName, " renews a certificate, but it can also mean someone is impersonating them. Confirm the new fingerprint with ", ownerName, " another way, such as a phone call, before accepting it."] }), error && _jsx(Alert, { children: error }), actionable && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", disabled: busy !== null, onClick: () => {
+                            setError(null);
+                            setConfirmOpen(true);
+                        }, children: "Accept new key" }), canReject && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: busy === "reject", disabled: busy !== null, onClick: () => resolve("reject"), children: "Keep current key" }))] })), _jsx(Modal, { open: confirmOpen, onClose: () => busy === null && setConfirmOpen(false), title: "Accept the new key?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: [useType === "sign"
+                                    ? `Mail from ${address} signed with this key will show as verified.`
+                                    : `Mail you send to ${address} will be encrypted to this key.`, " ", "The current ", kind, " key moves to this contact\u2019s key history."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "New key fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: groupFingerprint(proposed.fingerprint) })] }), _jsxs("p", { className: "text-text-muted", children: ["Only accept it once you\u2019ve confirmed this fingerprint with ", ownerName, "."] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: busy === "accept", disabled: busy !== null, onClick: () => resolve("accept"), children: "Accept new key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy !== null, onClick: () => setConfirmOpen(false), children: "Cancel" })] })] }) })] }));
+}

package/dist/apps/shared/components/contacts/contactKeys.d.ts

@@ -0,0 +1,29 @@
+import type { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import { type KeyConflict, type PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+export declare const KEY_CHANGE_STALE_MESSAGE = "This contact's keys changed while you were looking; reload to see the latest.";
+export declare const KEY_CHANGE_INVALID_MESSAGE = "The new key isn't a valid, current certificate for this address, so it can't be accepted. Nothing was changed.";
+export declare const KEY_CHANGE_FORBIDDEN_MESSAGE = "You don't have permission to change this contact's keys.";
+export declare const KEY_CHANGE_NOT_FOUND_MESSAGE = "There's no key change to resolve for this address any more. It may already have been resolved, or the contact was removed.";
+export declare const KEY_CHANGE_GENERIC_MESSAGE = "Couldn't update this contact's keys. Try again.";
+/** The error text for a failed `resolveKeyConflict()` other than `PinnedKeyChangedError` (which the caller reloads
+ * on and reports with `KEY_CHANGE_STALE_MESSAGE`). */
+export declare function keyChangeErrorMessage(err: unknown): string;
+/** Groups a fingerprint into 4-character blocks (`ab12 cd34 ...`), ignoring any separators it came with, so it can be
+ * read out and compared over another channel. */
+export declare function groupFingerprint(fingerprint: string): string;
+/** Whether two fingerprints name the same key (case and separators ignored). */
+export declare function sameFingerprint(a: string | undefined, b: string | undefined): boolean;
+/** A revoked key's label: `"superseded"` for a routine replacement, `"revoked"` for a compromised key or one revoked
+ * with no reason; `undefined` when the key isn't revoked. */
+export declare function revocationLabel(key: PublicKey): "superseded" | "revoked" | undefined;
+/** Where a key conflict was observed, for display. */
+export declare function conflictSourceLabel(source: KeyConflict["source"]): string;
+/** restapi records `keysFirstSeen` on a contact but react-shared's `Contact` type doesn't carry it. */
+type ContactWithFirstSeen = Pick<Contact, "previousKeys"> & {
+    keysFirstSeen?: number;
+};
+/** When `key` (one of `contact`'s pinned keys) started being trusted: when it replaced the newest previous key of its
+ * use, else the contact's `keysFirstSeen`, else the key's own `notBefore`. */
+export declare function keyPinnedSince(contact: ContactWithFirstSeen, key: PublicKey): number;
+export declare function formatDate(ms: number): string;
+export {};

package/dist/apps/shared/components/contacts/contactKeys.js

@@ -0,0 +1,64 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Display and error helpers for a contact's pinned keys and key changes (`KeyChangeReview`, `ContactDetailPane`,
+ * `MessageDetailPane`). */
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { PinnedKeyChangedError } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+export const KEY_CHANGE_STALE_MESSAGE = "This contact's keys changed while you were looking; reload to see the latest.";
+export const KEY_CHANGE_INVALID_MESSAGE = "The new key isn't a valid, current certificate for this address, so it can't be accepted. Nothing was changed.";
+export const KEY_CHANGE_FORBIDDEN_MESSAGE = "You don't have permission to change this contact's keys.";
+export const KEY_CHANGE_NOT_FOUND_MESSAGE = "There's no key change to resolve for this address any more. It may already have been resolved, or the contact was removed.";
+export const KEY_CHANGE_GENERIC_MESSAGE = "Couldn't update this contact's keys. Try again.";
+/** The error text for a failed `resolveKeyConflict()` other than `PinnedKeyChangedError` (which the caller reloads
+ * on and reports with `KEY_CHANGE_STALE_MESSAGE`). */
+export function keyChangeErrorMessage(err) {
+    if (err instanceof PinnedKeyChangedError) {
+        return KEY_CHANGE_STALE_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 400) {
+        return KEY_CHANGE_INVALID_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 403) {
+        return KEY_CHANGE_FORBIDDEN_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 404) {
+        return KEY_CHANGE_NOT_FOUND_MESSAGE;
+    }
+    return KEY_CHANGE_GENERIC_MESSAGE;
+}
+/** Groups a fingerprint into 4-character blocks (`ab12 cd34 ...`), ignoring any separators it came with, so it can be
+ * read out and compared over another channel. */
+export function groupFingerprint(fingerprint) {
+    const compact = fingerprint.replace(/[\s:]/g, "").toLowerCase();
+    return compact.match(/.{1,4}/g)?.join(" ") ?? compact;
+}
+/** Whether two fingerprints name the same key (case and separators ignored). */
+export function sameFingerprint(a, b) {
+    return a !== undefined && b !== undefined && a.replace(/[\s:]/g, "").toLowerCase() === b.replace(/[\s:]/g, "").toLowerCase();
+}
+/** A revoked key's label: `"superseded"` for a routine replacement, `"revoked"` for a compromised key or one revoked
+ * with no reason; `undefined` when the key isn't revoked. */
+export function revocationLabel(key) {
+    if (!key.revokedAt) {
+        return undefined;
+    }
+    return key.revocationReason === "superseded" ? "superseded" : "revoked";
+}
+/** Where a key conflict was observed, for display. */
+export function conflictSourceLabel(source) {
+    return source === "header" ? "from an incoming message" : "by key discovery";
+}
+/** When `key` (one of `contact`'s pinned keys) started being trusted: when it replaced the newest previous key of its
+ * use, else the contact's `keysFirstSeen`, else the key's own `notBefore`. */
+export function keyPinnedSince(contact, key) {
+    const replaced = (contact.previousKeys ?? []).filter((previous) => previous.useType === key.useType).map((previous) => previous.replacedAt);
+    if (replaced.length > 0) {
+        return Math.max(...replaced);
+    }
+    return contact.keysFirstSeen ?? key.notBefore;
+}
+export function formatDate(ms) {
+    return new Date(ms).toLocaleDateString();
+}

package/dist/apps/shared/components/contacts/layout/ContactsShell.d.ts

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { AppShellProps } from "../../layout/AppShell.js";
+export type ContactsShellProps = Omit<AppShellProps, "active">;
+export interface ContactsShellContextValue {
+    /** The mailbox currently selected (`?mailboxUid=`, or the caller's first accessible mailbox). */
+    mailboxUid?: string;
+    /** The selected mailbox's single `contacts`-type folder. */
+    folderUid?: string;
+    mailboxes: Mailbox[];
+}
+/** Reads the mailbox/folder Contacts is currently showing, as resolved by the enclosing `ContactsShell`. */
+export declare function useContactsShell(): ContactsShellContextValue;
+/**
+ * The Contacts app's shell: unlike `MailShell` (a folder tree, since a mailbox has many mail folders),
+ * a mailbox has exactly one well-known `contacts` folder — see `BaseMailboxRoute.create()`'s eager
+ * provisioning in `@rapidmx/restapi`, which guarantees it exists for every mailbox. This shell's own
+ * sidebar is therefore just a mailbox switcher (when the caller has more than one); the actual contact
+ * list/detail UI is `apps/www/contacts/index.tsx`'s own content, rendered as `children` here.
+ */
+export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<ContactsShellProps>): React.JSX.Element;

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -24,7 +24,7 @@ export function useContactsShell() {
  * sidebar is therefore just a mailbox switcher (when the caller has more than one); the actual contact
  * list/detail UI is `apps/www/contacts/index.tsx`'s own content, rendered as `children` here.
  */
-export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
@@ -89,5 +89,5 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
                             }, 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(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
-    return (_jsx(AppShell, { active: "contacts", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+    return (_jsx(AppShell, { active: "contacts", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/components/escrow/layout/EscrowShell.d.ts

@@ -0,0 +1,25 @@
+import "../../../styles/app.css";
+import React, { PropsWithChildren } from "react";
+export type EscrowSection = "matters" | "auditLog";
+export interface EscrowShellProps {
+    active: EscrowSection;
+    userUid?: string;
+    authServerUrl?: string;
+}
+/**
+ * Gates every `apps/escrow` page behind "is this an authenticated caller at all" — deliberately **not**
+ * the same "does a canary endpoint 403 me" pattern `AdminShell` uses for the trusted `admin` role.
+ * `specs/end-to-end_encryption.md`'s "Separation of duties" makes holder-ness a per-`EscrowScope` grant
+ * (`EscrowScope.holderUserUids`), checked directly against `holderUserUids` in every restapi route that
+ * needs it (`requireEscrowHolder()`) — never a role, and never global. There is no canary endpoint a
+ * non-holder gets a clean 403 from: `GET /escrow/matters` (`BaseMatterRoute.find()`) returns `200 []` for
+ * *any* authenticated caller who holds no scope at all, the same as it would for a holder of zero matters
+ * — so unlike `AdminShell`, this shell cannot distinguish "holds nothing" from "holds no scope at all" up
+ * front, and does not try to. It only confirms the caller is signed in and the API is reachable; every
+ * actual holder-gated action (create a Matter, approve/deny a request, read material) is enforced
+ * server-side and surfaces its own 403 `ApiRequestError` on the specific page that attempted it, same as
+ * any other gated action elsewhere in this codebase. A non-holder who reaches `/escrow` simply sees an
+ * empty Matters list and gets a real error if they try to act on something they don't hold — this is a
+ * deliberate, documented scope trim rather than an oversight (see this session's own report on it).
+ */
+export default function EscrowShell({ active, userUid, authServerUrl, children }: PropsWithChildren<EscrowShellProps>): React.JSX.Element;

package/dist/apps/shared/components/escrow/layout/EscrowShell.js

@@ -9,11 +9,12 @@ import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
-import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
 import UserMenu from "../../layout/UserMenu.js";
+import { signOutOfConsole } from "../../admin/signOut.js";
+const DEFAULT_ICON_SRC = "/images/logo.svg";
 const NAV_ITEMS = [
     { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
     { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
@@ -37,8 +38,25 @@ const NAV_ITEMS = [
 export default function EscrowShell({ active, userUid, authServerUrl, children }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
-    const { branding, iconSrc } = useBranding();
+    const [iconSrc, setIconSrc] = useState(DEFAULT_ICON_SRC);
     useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // Only the icon is taken from branding here. The escrow console deliberately skips `useBranding()`, which
+    // would inject the custom stylesheet, and never renders the admin-configured header/footer HTML - this
+    // console handles escrow key material, so no admin-supplied markup or CSS runs on it.
+    useEffect(() => {
+        let cancelled = false;
+        getBranding()
+            .then((branding) => {
+            if (!cancelled)
+                setIconSrc(branding.iconUrl || branding.logoUrl || DEFAULT_ICON_SRC);
+        })
+            .catch(() => {
+            // Decorative only - keep the default icon.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
     useEffect(() => {
         if (!userUid) {
             return;
@@ -53,7 +71,8 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
         });
     }, [userUid]);
     function handleSignOut() {
-        window.location.href = authServerUrl ?? "/";
+        // Ends the auth-server session and tells other tabs, not just navigates - see `signOutOfConsole()`.
+        void signOutOfConsole(authServerUrl);
     }
     let content;
     if (!userUid || status === "checking") {
@@ -71,5 +90,5 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
                                 ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: NAV_ITEMS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(BrandingHeader, { branding: branding }), content, _jsx(BrandingFooter, { branding: branding })] }));
+    return _jsx(_Fragment, { children: content });
 }

package/dist/apps/shared/components/forms/StringListField.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface StringListFieldProps {
+    label: string;
+    /** Associates the label with the add-input via `htmlFor`/`id`, same as `FormField` — required so the
+     * field is reachable via `getByLabelText()` in tests and by assistive tech, not just visually. */
+    id: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+}
+/**
+ * A plain, controlled add/remove list-of-strings editor — the same visual add-row/per-item-remove shape
+ * `MemberListCard` already established for a `DistributionList`'s `memberAddresses`, but operating on a
+ * local `value`/`onChange` pair rather than persisting itself via its own API call. `MemberListCard`
+ * isn't reusable here as-is: `EscrowScope.holderUserUids` (at least one required) and
+ * `Matter.custodianMailboxUids` (also non-empty) are both required *at creation time*, before there's any
+ * uid yet to `PUT` against — this needs to compose into an ordinary create/edit form's own local state
+ * instead, same as every other field on those forms.
+ */
+export default function StringListField({ label, id, values, onChange, placeholder, emptyMessage, disabled, }: StringListFieldProps): React.JSX.Element;