@rapidmx/web-client 0.4.0 → 0.6.0

package/dist/apps/shared/search/searchTier2.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Tier 2 (`specs/search.md` §6) - the local encrypted index's public entry point, mirroring
+ * `@rapidmx/react-shared`'s `searchTier3.ts#searchEncryptedCandidates()` in shape: given a parsed query
+ * and this session's unlocked keys, return already-scored, already-sourced results plus how much of the
+ * mailbox the local index actually covers right now.
+ *
+ * Returns `{ results: [], coverage: undefined }` - never throws, never rejects - both when `unlocked` is
+ * absent (nothing is indexed without a master key to derive the index key from, the same "silently
+ * contributes nothing" degradation `searchTier3.ts`'s own doc comment describes for its identical case)
+ * and when anything about the local index itself fails (Worker/WASM/OPFS unsupported or unavailable in
+ * this browser, a corrupted index mid-rebuild, a query timeout). This tier's own storage engine is
+ * strictly best-effort infrastructure Tier 1 doesn't depend on - a caller `Promise.all()`-ing this
+ * alongside Tier 1/Tier 3 (`apps/www/index.tsx`'s own search orchestration) must never see the *whole
+ * search* fail just because this one, most novel piece had a bad moment.
+ */
+import type { UnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import type { ParsedSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
+import type { SearchResult } from "@rapidmx/react-shared/search/searchApi.js";
+import type { Coverage } from "./localIndexWorker.js";
+export interface Tier2SearchOutcome {
+    results: SearchResult[];
+    /** `undefined` when `unlocked` was absent - there's no local index to report coverage for at all in
+     * that case, distinct from a real, empty (just-built) index. */
+    coverage?: Coverage;
+    /** `true` when at least one more match exists beyond `results` - §8's composite pagination cursor's
+     * own per-tier continuation signal. Always `false` alongside the `unlocked`-absent/error
+     * degradations below - there is nothing more to page through either way. */
+    hasMore: boolean;
+}
+export declare function searchLocalIndex(mailboxUid: string, parsed: ParsedSearchQuery, unlocked: UnlockedKeys | undefined, limit?: number, offset?: number): Promise<Tier2SearchOutcome>;

package/dist/apps/www/_404.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function NotFoundPage(): React.JSX.Element;

package/dist/apps/www/_500.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function ErrorPage(): React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+export interface LayoutProps {
+    /**
+     * Supplied by `WwwRoute`'s `fetchProps()` override (`src/mongo/routes/wwwRoute.ts`/
+     * `src/sql/routes/wwwRoute.ts`) - `@rapidrest/react` spreads the same merged page props onto this
+     * layout as onto the page it wraps, so it renders correctly server-side on the very first byte of the
+     * response: no client-side flash from the stock defaults below, and a crawler reading the raw HTML
+     * sees the real branding too. `undefined` only on the framework's unwrapped `_500` fallback path,
+     * which doesn't receive props at all - falling back to the stock defaults there is acceptable.
+     */
+    branding?: Branding;
+}
+export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>): React.JSX.Element;

package/dist/apps/www/calendar/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CalendarShellProps } from "../../shared/components/calendar/layout/CalendarShell.js";
+export default function CalendarPage(props: CalendarShellProps): React.JSX.Element;

package/dist/apps/www/calendar/index.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { addDays, addMonths, addWeeks, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, startOfDay, startOfMonth, startOfWeek, } from "date-fns";
+import { addDays, addMonths, addWeeks, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, parseISO, startOfDay, startOfMonth, startOfWeek, } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "@rapidmx/react-shared/calendar/calendarMutations.js";
@@ -16,6 +16,7 @@ import { expandAllOccurrences } from "@rapidmx/react-shared/calendar/recurrence.
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import CalendarShell, { useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
 import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
+import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import EventModal from "../../shared/components/calendar/EventModal.js";
 import MiniDatePicker from "@rapidmx/react-shared/components/pickers/MiniDatePicker.js";
 import MonthView from "../../shared/components/calendar/MonthView.js";
@@ -24,11 +25,11 @@ import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 export default function CalendarPage(props) {
-    return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, {}) }));
+    return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, { userUid: props.userUid }) }));
 }
 const VIEW_TYPES = ["month", "week", "workWeek", "day", "split"];
 const VIEW_LABELS = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
-function CalendarContent() {
+function CalendarContent({ userUid }) {
     const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
     // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
     // scroll gesture on a touch device. `MouseSensor` (a small `distance` — desktop drags still start
@@ -55,7 +56,9 @@ function CalendarContent() {
             setView(requestedView);
         }
         const requestedDate = params.get("date");
-        const parsedDate = requestedDate ? new Date(requestedDate) : null;
+        // `parseISO()`, not `new Date()` - `?date=2026-06-16` is a local calendar day, but `new Date()` reads a
+        // date-only string as UTC midnight, i.e. the previous day anywhere west of UTC.
+        const parsedDate = requestedDate ? parseISO(requestedDate) : null;
         if (parsedDate && !isNaN(parsedDate.getTime())) {
             setViewDate(startOfDay(parsedDate));
         }
@@ -100,7 +103,13 @@ function CalendarContent() {
         const end = endOfDay(viewDate);
         return { rangeStart: start, rangeEnd: end, days: [start] };
     }, [view, viewDate]);
+    // Only the most recent reload() may apply its results - toggling calendars (or saving/dragging an event)
+    // while an earlier, slower fetch is still in flight must not let that stale response overwrite newer
+    // events. (No date range is passed: `listCalendarEvents()` deliberately fetches the whole calendar and
+    // filters client-side - see its own doc comment on the server-side range query it works around.)
+    const reloadSeqRef = useRef(0);
     function reload() {
+        const seq = ++reloadSeqRef.current;
         const targets = calendarFolders.filter((f) => checkedFolderUids.has(f.uid));
         if (targets.length === 0) {
             setEvents([]);
@@ -111,6 +120,9 @@ function CalendarContent() {
         setError(null);
         void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid)))
             .then((results) => {
+            if (seq !== reloadSeqRef.current) {
+                return;
+            }
             const loaded = [];
             const failures = [];
             results.forEach((result, i) => {
@@ -137,7 +149,11 @@ function CalendarContent() {
                 setError(`Could not load events for: ${failures.map((f) => f.name).join(", ")}.`);
             }
         })
-            .finally(() => setLoading(false));
+            .finally(() => {
+            if (seq === reloadSeqRef.current) {
+                setLoading(false);
+            }
+        });
     }
     // Keyed on stable string summaries (not the array/set objects themselves, which are new references
     // every render) so this only re-fires when the actual set of folders to fetch changes.
@@ -215,10 +231,12 @@ function CalendarContent() {
     const modalFolderUid = modal ? (modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid) : undefined;
     const modalMailboxUid = calendarFolders.find((f) => f.uid === modalFolderUid)?.mailboxUid ?? mailboxUid;
     const modalMailbox = mailboxes.find((mb) => mb.uid === modalMailboxUid);
-    // Mailboxes a new event can be created in - only those with at least one calendar.
+    // Mailboxes a new event can be created in - only those with at least one calendar that the caller can
+    // write to (a view-only share is left out; see writableMailboxes.ts).
+    const writableMailboxes = useWritableMailboxes(mailboxes, userUid, modalMailboxUid);
     const mailboxOptions = useMemo(() => mailboxCalendars
-        .filter((mc) => mc.calendarFolders.length > 0)
-        .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })), [mailboxCalendars]);
+        .filter((mc) => mc.calendarFolders.length > 0 && writableMailboxes.some((mb) => mb.uid === mc.mailbox.uid))
+        .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })), [mailboxCalendars, writableMailboxes]);
     const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => setViewDate(startOfDay(date)) }), _jsx(CalendarListSidebar, { mailboxCalendars: mailboxCalendars, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar, colorFor: colorFor })] }));
     return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx("div", { className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-3 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "md:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: () => openNewEvent(), className: "!w-auto shrink-0", children: "+ New event" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex gap-1 overflow-x-auto", children: VIEW_TYPES.map((v) => (_jsx("button", { type: "button", onClick: () => setView(v), className: [
                                         "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
@@ -226,5 +244,5 @@ function CalendarContent() {
                                         (v === "workWeek" || v === "split") && "hidden md:inline-block",
                                     ]
                                         .filter(Boolean)
-                                        .join(" "), children: VIEW_LABELS[v] }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), actionError && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: actionError }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, organizerAddress: modalMailbox.primarySmtpAddress, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
+                                        .join(" "), children: VIEW_LABELS[v] }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), actionError && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: actionError }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
 }

package/dist/apps/www/contacts/[uid].d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
+ * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
+ * equivalent "new contact" route — an unsaved contact has no uid to route on, so creation stays an
+ * in-place mode-switch on every device (see `apps/www/contacts/index.tsx`'s `handleNew`).
+ */
+export default function ContactDetailPage(props: ContactsShellProps & {
+    params: {
+        uid: string;
+    };
+}): React.JSX.Element;

package/dist/apps/www/contacts/[uid].js

@@ -10,6 +10,7 @@ import ContactsShell from "../../shared/components/contacts/layout/ContactsShell
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
  * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
@@ -23,6 +24,9 @@ function ContactDetailContent({ uid }) {
     const [contact, setContact] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    // Kept apart from the load `error` - a failed delete must leave the contact on screen (with the
+    // reason) rather than replacing the whole page with an error as if it had never loaded.
+    const [deleteError, setDeleteError] = useState(null);
     const [mode, setMode] = useState("view");
     useEffect(() => {
         setLoading(true);
@@ -37,14 +41,21 @@ function ContactDetailContent({ uid }) {
     // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
     // never runs with a stale/absent contact — no redundant null check needed here.
     async function handleDelete(contact) {
+        setDeleteError(null);
         try {
             await deleteContact(contact.uid, contact.version);
+            // A deleted contact's pinned signing keys must stop vouching for signatures.
+            clearPinnedSignerCache();
             window.location.href = "/contacts";
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
         }
     }
+    // After a key change was resolved (or found stale): re-read the contact, keeping the one shown if that fails.
+    function handleKeysChanged() {
+        getContact(uid).then(setContact, () => undefined);
+    }
     if (loading) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
     }
@@ -58,5 +69,5 @@ function ContactDetailContent({ uid }) {
                         setMode("view");
                     }, onCancel: () => setMode("view") })] }));
     }
-    return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref }) }));
+    return (_jsxs("div", { className: "p-6", children: [deleteError && _jsx(Alert, { children: deleteError }), _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref, onKeysChanged: handleKeysChanged })] }));
 }

package/dist/apps/www/contacts/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
+export default function ContactsPage(props: ContactsShellProps): React.JSX.Element;

package/dist/apps/www/contacts/index.js

@@ -15,25 +15,40 @@ import ContactsToolbar from "../../shared/components/contacts/ContactsToolbar.js
 import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
+import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
+import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/listAllPages.js";
+import { clearPinnedSignerCache } from "../../shared/components/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";
 export default function ContactsPage(props) {
-    return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, {}) }));
+    return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, { userUid: props.userUid }) }));
 }
+/** Shown in the Deleted view when the server answered `?deleted=true` with live contacts (see `canViewDeleted`). */
+const DELETED_NOT_PERMITTED_MESSAGE = "You don't have permission to view deleted contacts in this folder.";
 function primaryInfo(contact) {
     return contact.emails[0]?.address ?? contact.phones[0]?.phoneNumber ?? "";
 }
+/** How long an export's object URL is kept alive after the click - some browsers are still reading the
+ * blob after `click()` returns, so revoking it synchronously can cancel the download. */
+const VCARD_DOWNLOAD_URL_LIFETIME_MS = 60000;
 function downloadTextFile(filename, content) {
     const blob = new Blob([content], { type: "text/vcard" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
     a.download = filename;
+    document.body.appendChild(a);
     a.click();
-    URL.revokeObjectURL(url);
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), VCARD_DOWNLOAD_URL_LIFETIME_MS);
 }
-function ContactsContent() {
+function ContactsContent({ userUid }) {
     const { folderUid, mailboxUid, mailboxes } = useContactsShell();
+    // The new-contact form's Mailbox choices - view-only shares are left out (see writableMailboxes.ts).
+    const writableMailboxes = useWritableMailboxes(mailboxes, userUid, mailboxUid);
     const { openCompose } = useCompose();
     const isMobile = useIsMobile();
     const [contacts, setContacts] = useState([]);
@@ -42,6 +57,9 @@ function ContactsContent() {
     const [deletedError, setDeletedError] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    // Set when `listAllPages()` stopped at its page cap - the list shown isn't every contact.
+    const [truncated, setTruncated] = useState(false);
+    const [deletedTruncated, setDeletedTruncated] = useState(false);
     const [query, setQuery] = useState("");
     const [view, setView] = useState({ type: "all" });
     const [sortColumn, setSortColumn] = useState("name");
@@ -51,6 +69,7 @@ function ContactsContent() {
     const [mode, setMode] = useState("view");
     // Set after a contact is created in a different mailbox than the one this list shows.
     const [savedElsewhere, setSavedElsewhere] = useState(null);
+    const [confirmingBulkDelete, setConfirmingBulkDelete] = useState(false);
     /** Returns a promise so bulk actions (below) can wait for the refreshed list before re-asserting their
      * own error message — this always clears `error` first (a legitimate reset for a fresh fetch attempt),
      * which would otherwise silently wipe out a bulk action's own just-set failure message before the user
@@ -58,27 +77,69 @@ function ContactsContent() {
     function reload() {
         if (!folderUid) {
             setContacts([]);
+            setTruncated(false);
             setLoading(false);
             return Promise.resolve();
         }
         setLoading(true);
         setError(null);
-        return listContacts(folderUid, { limit: 500 })
-            .then(setContacts)
+        return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }))
+            .then((result) => {
+            setContacts(result.items);
+            setTruncated(result.truncated);
+        })
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load contacts."))
             .finally(() => setLoading(false));
     }
     useEffect(() => {
         void reload();
     }, [folderUid]);
+    // restapi only honors `?deleted=true` for a caller with both delete and update rights on the contacts *folder*
+    // (its ACL, which inherits the mailbox's but can carry its own records) - anyone else silently gets the *live*
+    // contacts back, which the Deleted view would then present as deleted. There is no client API for the caller's
+    // access to a folder, so the mailbox-level check below is only a first gate (an owner always passes; anyone else
+    // asks the server; unknown - still loading, or the check failed - hides the view), and the Deleted view's own
+    // load below detects the server ignoring the filter. `ContactsShell` only renders this with a resolved mailbox,
+    // and switching mailboxes is a full page load, so `mailboxUid` never changes under this component.
+    const ownsMailbox = mailboxes.some((mb) => mb.uid === mailboxUid && mb.ownerUserUid !== undefined && mb.ownerUserUid === userUid);
+    const [delegateCanViewDeleted, setDelegateCanViewDeleted] = useState(false);
+    // Resolving a contact's key change needs update rights on the mailbox - `undefined` while unknown.
+    const [delegateCanUpdate, setDelegateCanUpdate] = useState(undefined);
+    useEffect(() => {
+        if (ownsMailbox) {
+            return;
+        }
+        let cancelled = false;
+        getMyMailboxAccess(mailboxUid).then((access) => {
+            if (!cancelled) {
+                setDelegateCanViewDeleted(access.canDelete && access.canUpdate);
+                setDelegateCanUpdate(access.canUpdate);
+            }
+        }, () => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [ownsMailbox]);
+    const canViewDeleted = ownsMailbox || delegateCanViewDeleted;
     useEffect(() => {
         if (view.type !== "deleted" || !folderUid) {
             return;
         }
         setDeletedLoading(true);
         setDeletedError(null);
-        listDeletedContacts(folderUid, { limit: 500 })
-            .then(setDeletedContacts)
+        listAllPages((page) => listDeletedContacts(folderUid, { limit: LIST_PAGE_SIZE, page }))
+            .then((result) => {
+            // A server that dropped the `deleted` filter (no delete+update right on this folder) answers with live
+            // contacts, which must never be listed as deleted.
+            if (result.items.some((c) => c.deleted !== true)) {
+                setDeletedContacts([]);
+                setDeletedTruncated(false);
+                setDeletedError(DELETED_NOT_PERMITTED_MESSAGE);
+                return;
+            }
+            setDeletedContacts(result.items);
+            setDeletedTruncated(result.truncated);
+        })
             .catch((err) => setDeletedError(err instanceof ApiRequestError ? err.message : "Could not load deleted contacts."))
             .finally(() => setDeletedLoading(false));
         // Re-fetches every time the Deleted view is (re-)selected, matching this page's own `reload()`
@@ -175,6 +236,8 @@ function ContactsContent() {
     async function handleDelete(contact) {
         try {
             await deleteContact(contact.uid, contact.version);
+            // Trusted signer pins come from contacts - a deleted contact's keys must stop vouching for signatures.
+            clearPinnedSignerCache();
             setSelectedUid(null);
             setMode("view");
             void reload();
@@ -184,6 +247,7 @@ function ContactsContent() {
         }
     }
     async function handleBulkDelete() {
+        setConfirmingBulkDelete(false);
         let bulkError = null;
         for (const contact of checkedContacts) {
             try {
@@ -193,6 +257,7 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not delete one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         setCheckedUids(new Set());
         await reload();
         setError(bulkError);
@@ -222,6 +287,7 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
@@ -234,12 +300,15 @@ function ContactsContent() {
         for (const contact of checkedContacts) {
             const categories = Array.from(new Set([...(contact.categories ?? []), category.trim()]));
             try {
-                await updateContact({ ...contact, categories });
+                // Only the changed field - sending the whole fetched contact back includes server-managed
+                // fields restapi rejects, and would overwrite any concurrent edit to the other fields.
+                await updateContact({ uid: contact.uid, version: contact.version, categories });
             }
             catch (err) {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
@@ -261,11 +330,12 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not import one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
-    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView }), _jsxs("div", { className: [
+    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted }), _jsxs("div", { className: [
                     "w-full md:w-96 shrink-0 md:border-r border-border md:flex flex-col min-h-0",
                     mode === "new" ? "hidden md:flex" : "flex",
-                ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: handleBulkDelete, onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 overflow-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "px-3 py-2 text-text-muted truncate", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: mailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected) })) : (_jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }))] })] }));
+                ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 overflow-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "px-3 py-2 text-text-muted truncate", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate })) : (_jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }))] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] })] }));
 }

package/dist/apps/www/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MailShellProps } from "../shared/components/mail/layout/MailShell.js";
+export default function InboxPage(props: MailShellProps): React.JSX.Element;