@rapidmx/web-client 0.35.0 → 0.36.0

package/apps/www/calendar/index.tsx

@@ -25,15 +25,26 @@ import { ApiRequestError } from "../../../lib/util/api.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
 import { CalendarEvent, getCalendarEvent, listCalendarEvents } from "../../../lib/calendar/calendarApi.js";
+import { openSealedEvent, openSealedEvents } from "../../shared/calendar/sealedEvents.js";
 import { useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calendarMutations.js";
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { CalendarOccurrence, expandAllOccurrences, expandOccurrences } from "../../../lib/calendar/recurrence.js";
 import { useDayKey } from "../../../lib/calendar/useDayKey.js";
-import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
+import {
+    allOccurrences,
+    initialMatchIndex,
+    occurrencesInRange,
+    searchOccurrences,
+    searchTerms,
+    stepSequenceIndex,
+} from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
-import CalendarShell, { CalendarShellProps, useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
+import CalendarShell, {
+    CalendarShellProps,
+    useCalendarShell,
+} from "../../shared/components/calendar/layout/CalendarShell.js";
 import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
 import CalendarSearchBox from "../../shared/components/calendar/CalendarSearchBox.js";
 import { ActiveOccurrenceContext } from "../../shared/components/calendar/activeOccurrence.js";
@@ -49,7 +60,13 @@ import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
-import { CALENDAR_VIEWS, CalendarView, getStoredCalendarView, isCalendarView, storeCalendarView } from "../../shared/components/calendar/calendarView.js";
+import {
+    CALENDAR_VIEWS,
+    CalendarView,
+    getStoredCalendarView,
+    isCalendarView,
+    storeCalendarView,
+} from "../../shared/components/calendar/calendarView.js";
 import { SlideFrom } from "../../shared/components/calendar/SlideIn.js";
 import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
 import { nextHalfHour } from "../../shared/components/calendar/timePicker.js";
@@ -78,7 +95,14 @@ function CalendarPage(props: CalendarShellProps) {
 }
 
 type ViewType = CalendarView;
-const VIEW_LABELS: Record<ViewType, string> = { list: "List", month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+const VIEW_LABELS: Record<ViewType, string> = {
+    list: "List",
+    month: "Month",
+    week: "Week",
+    workWeek: "Work Week",
+    day: "Day",
+    split: "Split",
+};
 /** The shortcut that switches to a view (Outlook's Ctrl+Alt+1-4, the List one more); the split view has none. */
 const VIEW_SHORTCUTS: Partial<Record<ViewType, ShortcutDef>> = {
     list: SHORTCUTS.calendar.list,
@@ -89,7 +113,15 @@ const VIEW_SHORTCUTS: Partial<Record<ViewType, ShortcutDef>> = {
 };
 
 /** One of the view switcher's buttons, with its shortcut in the tooltip. */
-function ViewButton({ view, current, onSelect }: { view: ViewType; current: ViewType; onSelect: (view: ViewType) => void }) {
+function ViewButton({
+    view,
+    current,
+    onSelect,
+}: {
+    view: ViewType;
+    current: ViewType;
+    onSelect: (view: ViewType) => void;
+}) {
     const shortcut = VIEW_SHORTCUTS[view];
     const hint = useShortcutProps(VIEW_LABELS[view], shortcut ?? SHORTCUTS.calendar.day, !!shortcut);
     return (
@@ -124,7 +156,8 @@ interface ModalState {
 }
 
 function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHref?: string }) {
-    const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
+    const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } =
+        useCalendarShell();
     const client = useApiClient();
     // `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
@@ -133,7 +166,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // dnd-kit's own documented pattern for this exact conflict.
     const sensors = useSensors(
         useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
-        useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }),
+        useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } })
     );
 
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -194,7 +227,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const checkedFolderUids = checkedFolderUidsState ?? new Set(calendarFolders.map((f) => f.uid));
     const folderColors = useMemo(
         () => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorFor(f)])),
-        [calendarFolders, colorFor],
+        [calendarFolders, colorFor]
     );
 
     function toggleCalendar(toggledUid: string) {
@@ -257,7 +290,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         }
         setLoading(true);
         setError(null);
-        void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid, client)))
+        void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid, client).then(openSealedEvents)))
             .then((results) => {
                 if (seq !== reloadSeqRef.current) {
                     return;
@@ -295,7 +328,10 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     // 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.
-    const calendarFolderUidsKey = calendarFolders.map((f) => f.uid).sort().join(",");
+    const calendarFolderUidsKey = calendarFolders
+        .map((f) => f.uid)
+        .sort()
+        .join(",");
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
 
@@ -317,23 +353,25 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                 setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
                 return;
             }
-            void getCalendarEvent(uid, client).then(
-                (fresh) => {
-                    if (checkedFolderUidsRef.current.has(fresh.folderUid)) {
-                        setEvents((previous) =>
-                            previous.some((existing) => existing.uid === fresh.uid)
-                                ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
-                                : [...previous, fresh],
-                        );
-                    }
-                },
-                (err: unknown) => {
-                    if (err instanceof ApiRequestError && err.status === 404) {
-                        setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
+            void getCalendarEvent(uid, client)
+                .then(openSealedEvent)
+                .then(
+                    (fresh) => {
+                        if (checkedFolderUidsRef.current.has(fresh.folderUid)) {
+                            setEvents((previous) =>
+                                previous.some((existing) => existing.uid === fresh.uid)
+                                    ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
+                                    : [...previous, fresh]
+                            );
+                        }
+                    },
+                    (err: unknown) => {
+                        if (err instanceof ApiRequestError && err.status === 404) {
+                            setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
+                        }
                     }
-                },
-            );
-        },
+                );
+        }
     );
 
     // Search: `searchText` is the box, `query` what it held once typing paused (or Enter was pressed) and is what is searched for. A search covers every
@@ -361,7 +399,10 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     // What an open event card steps through, in order: the matches while a search runs, else every event of the checked calendars (bounded as a
     // search is). The List holds only what is from today on, so that is all its card steps through. Worked out only when something needs it.
-    const everything = useMemo(() => (view === "list" || modal?.occurrence ? allOccurrences(events) : []), [events, view, !!modal?.occurrence]);
+    const everything = useMemo(
+        () => (view === "list" || modal?.occurrence ? allOccurrences(events) : []),
+        [events, view, !!modal?.occurrence]
+    );
     const sequence = useMemo(() => {
         if (searching) {
             return matches;
@@ -377,7 +418,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         if (view === "list") {
             return sequence;
         }
-        return searching ? occurrencesInRange(matches, rangeStart, rangeEnd) : expandAllOccurrences(events, rangeStart, rangeEnd);
+        return searching
+            ? occurrencesInRange(matches, rangeStart, rangeEnd)
+            : expandAllOccurrences(events, rangeStart, rangeEnd);
     }, [events, matches, searching, view, sequence, rangeStart, rangeEnd]);
 
     /** Points at `match`, moving the view to the day it is on unless the view already shows it. */
@@ -397,7 +440,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // calendar do not.
     const stepFrom = modal?.occurrence;
     const stepIndex = (direction: 1 | -1) =>
-        stepSequenceIndex(sequence, stepFrom?.occurrenceKey ?? activeKey, stepFrom ? new Date(stepFrom.startDate) : undefined, direction, searching);
+        stepSequenceIndex(
+            sequence,
+            stepFrom?.occurrenceKey ?? activeKey,
+            stepFrom ? new Date(stepFrom.startDate) : undefined,
+            direction,
+            searching
+        );
 
     function stepMatch(direction: 1 | -1) {
         const next = sequence[stepIndex(direction)];
@@ -433,17 +482,22 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             searchedQueryRef.current = query;
             // The List holds every match: it starts at the first from the day being viewed on rather than the first of all.
             const from = startOfDay(viewDate);
-            showMatch(matches[view === "list" ? initialMatchIndex(matches, from, rangeEnd, from) : initialMatchIndex(matches, rangeStart, rangeEnd, from)]);
+            showMatch(
+                matches[
+                    view === "list"
+                        ? initialMatchIndex(matches, from, rangeEnd, from)
+                        : initialMatchIndex(matches, rangeStart, rangeEnd, from)
+                ]
+            );
         }
     }, [matches, query, searching]);
 
-
     const splitColumns = useMemo(
         () =>
             calendarFolders
                 .filter((f) => checkedFolderUids.has(f.uid))
                 .map((f) => ({ folderUid: f.uid, name: f.name, color: colorFor(f) })),
-        [calendarFolders, checkedFolderUidsKey, colorFor],
+        [calendarFolders, checkedFolderUidsKey, colorFor]
     );
 
     function shiftView(direction: 1 | -1) {
@@ -457,7 +511,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                 ? addMonths(d, direction)
                 : view === "week" || view === "workWeek"
                   ? addWeeks(d, direction)
-                  : addDays(d, direction),
+                  : addDays(d, direction)
         );
     }
 
@@ -476,7 +530,8 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const wheelSlide = useEnterSlide();
     /** Where the scroller of the page a wheel step arrived at starts: its top after going on, its bottom after going back. */
     const arrivalEdge = useRef<WheelEdge | null>(null);
-    const scrollerOf = (): HTMLElement | null => swipe.ref.current?.querySelector<HTMLElement>("[data-calendar-scroller]") ?? null;
+    const scrollerOf = (): HTMLElement | null =>
+        swipe.ref.current?.querySelector<HTMLElement>("[data-calendar-scroller]") ?? null;
     useWheelPaging(swipe.ref, {
         enabled: !isMobile && !dragging && !modal && view !== "list",
         getScroller: () => (view === "month" ? null : scrollerOf()),
@@ -498,7 +553,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // Brings the match being pointed at into sight (the views scroll their own hours; the page may too).
     useEffect(() => {
         const marked = Array.from(swipe.ref.current!.querySelectorAll<HTMLElement>("[data-occurrence-key]"));
-        marked.find((el) => el.dataset.occurrenceKey === activeKey)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        marked
+            .find((el) => el.dataset.occurrenceKey === activeKey)
+            ?.scrollIntoView({ block: "nearest", inline: "nearest" });
     }, [activeKey, view === "list" ? null : viewDate, view, loading]);
 
     // The List scrolls to `viewDate` when this changes (Today, a day picked in the mini calendar), even when it is the date it already has.
@@ -514,7 +571,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         setViewDate(startOfDay(date));
     }
 
-    function openNewEvent(start?: Date, end?: Date, targetFolderUid?: string, anchor?: EventAnchor, initialAllDay?: boolean) {
+    function openNewEvent(
+        start?: Date,
+        end?: Date,
+        targetFolderUid?: string,
+        anchor?: EventAnchor,
+        initialAllDay?: boolean
+    ) {
         if (!mailboxUid || !folderUid) {
             return;
         }
@@ -558,10 +621,17 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         const requestedStart = new Date(params.get("start") ?? "");
         navigateTo("/calendar", { replace: true });
         getCalendarEvent(eventUid, client)
+            .then(openSealedEvent)
             .then((event) => {
                 const from = isNaN(requestedStart.getTime()) ? new Date(event.startDate) : requestedStart;
-                const candidates = expandOccurrences(event, new Date(from.getTime() - 86_400_000), new Date(from.getTime() + 86_400_000));
-                const match = candidates.find((occurrence) => new Date(occurrence.startDate).getTime() === from.getTime()) ?? candidates[0];
+                const candidates = expandOccurrences(
+                    event,
+                    new Date(from.getTime() - 86_400_000),
+                    new Date(from.getTime() + 86_400_000)
+                );
+                const match =
+                    candidates.find((occurrence) => new Date(occurrence.startDate).getTime() === from.getTime()) ??
+                    candidates[0];
                 if (match) {
                     setViewDate(occurrenceDay(match));
                     openEvent(match);
@@ -625,9 +695,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             ? "Upcoming events"
             : view === "month"
               ? format(viewDate, "MMMM yyyy")
-            : view === "week" || view === "workWeek"
-              ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
-              : format(viewDate, "EEEE, MMMM d, yyyy");
+              : view === "week" || view === "workWeek"
+                ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
+                : format(viewDate, "EEEE, MMMM d, yyyy");
 
     const modalFolderUid = modal ? (modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid) : undefined;
     const modalMailboxUid = calendarFolders.find((f) => f.uid === modalFolderUid)?.mailboxUid ?? mailboxUid;
@@ -638,9 +708,14 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const mailboxOptions = useMemo(
         () =>
             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],
+                .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 = (
@@ -664,7 +739,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     return (
         <div className="flex-1 min-w-0 flex min-h-0">
-            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
+            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">
+                {sidebarContent}
+            </div>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Calendars" fullScreen>
                 <div className="flex flex-col">{sidebarContent}</div>
             </Drawer>
@@ -681,18 +758,42 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                     </button>
                     {/* On a phone New event is the floating button at the bottom of the page instead, as in Mail. */}
                     {!isMobile && (
-                        <Button type="button" onClick={(e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below"))} className="!w-auto shrink-0" {...newEventHint}>
+                        <Button
+                            type="button"
+                            onClick={(e) =>
+                                openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below"))
+                            }
+                            className="!w-auto shrink-0"
+                            {...newEventHint}
+                        >
                             + New event
                         </Button>
                     )}
                     <div className="flex items-center gap-1">
-                        <button type="button" onClick={() => shiftView(-1)} aria-label="Previous" {...previousHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={() => shiftView(-1)}
+                            aria-label="Previous"
+                            {...previousHint}
+                            className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             &lsaquo;
                         </button>
-                        <button type="button" onClick={goToday} {...todayHint} className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={goToday}
+                            {...todayHint}
+                            className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             Today
                         </button>
-                        <button type="button" onClick={() => shiftView(1)} aria-label="Next" {...nextHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={() => shiftView(1)}
+                            aria-label="Next"
+                            {...nextHint}
+                            className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             &rsaquo;
                         </button>
                     </div>
@@ -722,8 +823,17 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                     </div>
                 )}
 
-                <div ref={swipe.ref} className="flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden" {...swipe.handlers} style={swipe.style}>
-                    <div data-swipe-phase={swipe.phase} className="flex-1 min-w-0 flex flex-col min-h-0" style={swipe.contentStyle}>
+                <div
+                    ref={swipe.ref}
+                    className="flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden"
+                    {...swipe.handlers}
+                    style={swipe.style}
+                >
+                    <div
+                        data-swipe-phase={swipe.phase}
+                        className="flex-1 min-w-0 flex flex-col min-h-0"
+                        style={swipe.contentStyle}
+                    >
                         <div className="flex-1 min-w-0 flex flex-col min-h-0" style={wheelSlide.style}>
                             {loading ? (
                                 <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>
@@ -751,7 +861,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 folderColors={folderColors}
                                                 onSelectDay={handleSelectDay}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor, true)}
+                                                onSelectSlot={(start, end, anchor) =>
+                                                    openNewEvent(start, end, undefined, anchor, true)
+                                                }
                                             />
                                         ) : view === "split" ? (
                                             <SplitDayView
@@ -759,7 +871,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 columns={splitColumns}
                                                 occurrences={occurrences}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor)}
+                                                onSelectSlot={(start, end, targetFolderUid, anchor) =>
+                                                    openNewEvent(start, end, targetFolderUid, anchor)
+                                                }
                                             />
                                         ) : (
                                             <TimeGridView
@@ -767,7 +881,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 occurrences={occurrences}
                                                 folderColors={folderColors}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor)}
+                                                onSelectSlot={(start, end, anchor) =>
+                                                    openNewEvent(start, end, undefined, anchor)
+                                                }
                                             />
                                         )}
                                     </DndContext>
@@ -787,7 +903,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                         onClose={closeModal}
                         mailboxUid={modalMailbox.uid}
                         folderUid={modalFolderUid!}
-                        calendars={calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name }))}
+                        calendars={calendarFolders
+                            .filter((f) => f.mailboxUid === modalMailbox.uid)
+                            .map((f) => ({ uid: f.uid, name: f.name }))}
                         mailboxOptions={mailboxOptions}
                         folderColors={folderColors}
                         organizerAddress={modalMailbox.primarySmtpAddress}
@@ -816,7 +934,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                 )}
                 {/* The phone layout's New event: the old toolbar button's action (its quick form is a bottom sheet there, so no anchor), offered
                     only where that button could act - a calendar to put the event in - and not while the editor or its sheet is open. */}
-                {isMobile && mailboxUid && folderUid && !modal && <FloatingActionButton label="New event" icon={HiOutlinePlus} onClick={() => openNewEvent()} />}
+                {isMobile && mailboxUid && folderUid && !modal && (
+                    <FloatingActionButton label="New event" icon={HiOutlinePlus} onClick={() => openNewEvent()} />
+                )}
             </div>
         </div>
     );

package/apps/www/index.tsx

@@ -160,11 +160,18 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
         DECRYPT_CONCURRENCY,
         async (message): Promise<[string, DecryptedRow] | null> => {
             try {
-                const rawMime = await getMessageRawContent(message.uid);
                 // Loaded here, on first use: the S/MIME code (PKI.js, ASN.1, X.509) is over half a megabyte and an inbox with
                 // no encrypted mail in it never needs it.
-                const { evaluateMessageSecurity } = await (securityModule ??= import("../../lib/crypto/messageSecurity.js"));
-                const security = await evaluateMessageSecurity(rawMime, unlocked);
+                const securityApi = await (securityModule ??= import("../../lib/crypto/messageSecurity.js"));
+                // A message sealed at rest carries its subject and preview sealed on the row: no download needed.
+                const summary = message.zeroAccess ? await securityApi.openZeroAccessSummary(message.zeroAccess.sealedSummary, unlocked.zeroAccessKeys) : undefined;
+                if (summary) {
+                    const preview = summary.preview.slice(0, LIST_PREVIEW_MAX_LENGTH);
+                    rememberDecrypted(message.uid, message.mailboxUid, { subject: summary.subject, preview });
+                    return [message.uid, { subject: summary.subject, preview }];
+                }
+                const rawMime = await getMessageRawContent(message.uid);
+                const security = await securityApi.evaluateMessageSecurity(rawMime, unlocked);
                 if (!security.subject && !security.html) {
                     markDecryptFailed(message.uid);
                     return null;

package/apps/www/settings/encryption/index.tsx

@@ -51,6 +51,8 @@ import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
+import ZeroAccessSetting from "../../../shared/components/settings/ZeroAccessSetting.js";
+import KeyExportSetting from "../../../shared/components/settings/KeyExportSetting.js";
 import SigningCertificateCard, { SigningCertificateMode } from "../../../shared/components/settings/SigningCertificateCard.js";
 import { readStoredSignEnrollment, storeSignEnrollment } from "../../../shared/signing/enrollmentStorage.js";
 import {
@@ -975,6 +977,9 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                     )}
                 </div>
 
+                <ZeroAccessSetting mailbox={mailbox} canManage={canManageKeys} />
+                <KeyExportSetting mailbox={mailbox} canManage={canManageKeys} />
+
                 <div>
                     <h2 className="text-sm font-semibold mb-2">Digital signatures</h2>
                     {activeSigningKey && signingStatus !== "pending" && (

package/apps/www/settings/privacy/index.tsx

@@ -174,7 +174,8 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
             <p className="text-xs text-text-muted mb-3">
                 Requests a copy of <strong>{mailboxLabel}</strong>&rsquo;s messages, contacts, calendar, tasks, and notes. This runs
                 in the background and can take a few minutes — check back here for a download link once it&rsquo;s
-                ready.
+                ready. Mail stored with zero-access encryption is exported encrypted: open it in a mail app that has your
+                exported keys (Settings &rsaquo; Encryption).
             </p>
 
             <form onSubmit={handleCreate} className="flex items-end gap-3 mb-5">

package/dist/apps/escrow/matters/[uid].js

@@ -182,7 +182,7 @@ function MatterDetailContent({ uid }) {
         try {
             const material = await getAccessRequestMaterial(request.uid);
             if (seq === materialSeq.current)
-                setMaterialText(JSON.stringify(material.masterKeyWraps, null, 2));
+                setMaterialText(JSON.stringify(material, null, 2));
         }
         catch (err) {
             if (seq === materialSeq.current) {
@@ -270,5 +270,5 @@ function MatterDetailContent({ uid }) {
                                                         ? "bg-surface-alt text-text-muted"
                                                         : "bg-success text-white",
                                             ].join(" "), children: request.status })] }), actionErrors[request.uid] && _jsx(Alert, { children: actionErrors[request.uid] }), _jsxs("div", { className: "flex gap-3 mt-3", children: [!matter.closedAt && request.status === "pending" && (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", className: "!w-auto", loading: actingOn[request.uid], disabled: actingOn[request.uid], onClick: () => setApproveTarget(request), children: "Approve" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: actingOn[request.uid], disabled: actingOn[request.uid], onClick: () => setDenyTarget(request), children: "Deny" })] })), !matter.closedAt && (request.status === "approved" || request.status === "fulfilled") && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => handleGetMaterial(request), children: "Get material" }))] })] }, request.uid))) })), _jsx(LoadMoreButton, { list: requests, label: "Load more access requests" })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide", children: "Export this matter" }), !matter.closedAt && (_jsx(Button, { type: "button", className: "!w-auto", loading: creatingExport, disabled: creatingExport, onClick: handleCreateExport, children: "+ New export" }))] }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Exports messages (narrowed to this matter\u2019s own date range), plus full contacts, calendar events, tasks, and notes, from every custodian mailbox actually assigned to this matter\u2019s escrow scope, as one combined NDJSON file." }), exportError && _jsx(Alert, { children: exportError }), exportRequests.loadError && _jsx(Alert, { children: exportRequests.loadError }), matterExportRequests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: exportRequests.loading ? "Loading…" : "No export requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: matterExportRequests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [new Date(request.dateCreated).toLocaleString(), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: statusLabel(request.status) }), !matter.closedAt && request.status === "ready" && (_jsx("a", { href: matterExportRequestDownloadUrl(request.uid), className: "text-primary-dark hover:underline font-medium", children: "Download" }))] })] }, request.uid))) }))] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-3", children: "Search this matter\u2019s custodians" }), matter.closedAt ? (_jsx("p", { className: "text-sm text-text-muted", children: "This matter is closed, so its custodians can no longer be searched or exported." })) : (_jsxs("form", { onSubmit: handleSearch, className: "flex gap-3 mb-4", children: [_jsx("input", { "aria-label": "Search this matter", className: INPUT_CLASS, value: searchText, onChange: (e) => setSearchText(e.target.value), placeholder: "Free text or an operator filter, e.g. from:alice@example.com" }), _jsx(Button, { type: "submit", className: "!w-auto shrink-0", loading: searching, disabled: searching || !searchText.trim(), children: "Search" })] })), searchError && _jsx(Alert, { children: searchError }), searchResults &&
-                        (Object.keys(searchResults).length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No custodian mailboxes could be searched." })) : (_jsx("div", { className: "flex flex-col gap-4", children: Object.entries(searchResults).map(([mailboxUid, page]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold mb-2", children: mailboxUid }), page.results.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "No matches." })) : (_jsx("ul", { className: "flex flex-col gap-1", children: page.results.map((result) => (_jsxs("li", { className: "text-sm py-1 px-2 bg-surface-alt rounded-sm", children: [result.entityType, " \u00B7 ", result.entityUid, result.snippet && _jsxs("span", { className: "text-text-muted", children: [" \u2014 ", result.snippet] })] }, `${result.entityType}-${result.entityUid}`))) }))] }, mailboxUid))) })))] }), _jsxs(Modal, { open: confirmingClose, onClose: closeCloseModal, title: "Close matter", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Close ", _jsx("strong", { children: matter.name }), "? Once closed, no new access requests, exports, searches, or key material reads are allowed under it. This cannot be reopened here."] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4", children: [_jsx("dt", { className: "text-text-muted", children: "Custodians" }), _jsx("dd", { className: "break-all", children: matter.custodianMailboxUids.join(", ") }), _jsx("dt", { className: "text-text-muted", children: "Date range" }), _jsx("dd", { children: formatDateRange(matter) })] }), closeError && _jsx(Alert, { children: closeError }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: closing, onClick: closeCloseModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: closing, disabled: closing, onClick: handleClose, children: "Close matter" })] })] }), _jsxs(Modal, { open: approveTarget !== null, onClose: () => setApproveTarget(null), title: "Approve access request", children: [_jsx("p", { className: "text-sm mb-3", children: "Approving lets holders of this matter\u2019s escrow scope read the key material for this mailbox once enough holders have approved." }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4", children: [_jsx("dt", { className: "text-text-muted", children: "Matter" }), _jsx("dd", { children: matter.name }), _jsx("dt", { className: "text-text-muted", children: "Mailbox" }), _jsx("dd", { className: "break-all", children: approveTarget?.mailboxUid }), _jsx("dt", { className: "text-text-muted", children: "Date range" }), _jsx("dd", { children: formatDateRange(matter) }), _jsx("dt", { className: "text-text-muted", children: "Approvals" }), _jsxs("dd", { children: [approveTarget?.approvals.length, " of ", approveTarget?.requiredHoldersAtCreation, " so far, including requester ", approveTarget?.requestedByUserUid] })] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setApproveTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => void handleApprove(), children: "Approve request" })] })] }), _jsxs(Modal, { open: denyTarget !== null, onClose: () => setDenyTarget(null), title: "Deny access request", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Denying refuses this request for good: it can\u2019t be approved afterwards, and holders can\u2019t read the key material for mailbox ", _jsx("span", { className: "break-all font-semibold", children: denyTarget?.mailboxUid }), " through it. A new request has to be made to ask again."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setDenyTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void handleDeny(), children: "Deny request" })] })] }), _jsx(Modal, { open: showNewRequest, onClose: () => setShowNewRequest(false), title: "New access request", children: _jsxs("form", { onSubmit: handleCreateRequest, className: "flex flex-col gap-4", children: [newRequestError && _jsx(Alert, { children: newRequestError }), _jsx(FormField, { label: "Mailbox uid", htmlFor: "newRequestMailboxUid", children: _jsx("input", { id: "newRequestMailboxUid", type: "text", className: INPUT_CLASS, value: newRequestMailboxUid, onChange: (e) => setNewRequestMailboxUid(e.target.value) }) }), _jsx("p", { className: "text-xs text-text-muted", children: "Must be one of this matter's own custodian mailboxes, currently assigned to this matter's escrow scope. Your own creation counts as the first approval." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: creatingRequest, onClick: () => setShowNewRequest(false), children: "Cancel" }), _jsx(Button, { type: "submit", className: "!w-auto", loading: creatingRequest, disabled: creatingRequest, children: "Create request" })] })] }) }), _jsx(Modal, { open: materialFor !== null, onClose: closeMaterialModal, title: "Escrow key material", children: loadingMaterial ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : materialError ? (_jsx(Alert, { children: materialError })) : (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-text-muted mb-3", children: ["Still-encrypted master key wraps for ", _jsx("strong", { children: materialFor?.mailboxUid }), " \u2014 this server cannot decrypt these either. Copy the JSON below into your own offline tooling."] }), _jsx("pre", { className: "text-xs font-mono bg-surface-alt border border-border rounded-sm p-3 overflow-x-auto whitespace-pre-wrap break-all", children: materialText })] })) })] }));
+                        (Object.keys(searchResults).length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No custodian mailboxes could be searched." })) : (_jsx("div", { className: "flex flex-col gap-4", children: Object.entries(searchResults).map(([mailboxUid, page]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold mb-2", children: mailboxUid }), page.results.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "No matches." })) : (_jsx("ul", { className: "flex flex-col gap-1", children: page.results.map((result) => (_jsxs("li", { className: "text-sm py-1 px-2 bg-surface-alt rounded-sm", children: [result.entityType, " \u00B7 ", result.entityUid, result.snippet && _jsxs("span", { className: "text-text-muted", children: [" \u2014 ", result.snippet] })] }, `${result.entityType}-${result.entityUid}`))) }))] }, mailboxUid))) })))] }), _jsxs(Modal, { open: confirmingClose, onClose: closeCloseModal, title: "Close matter", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Close ", _jsx("strong", { children: matter.name }), "? Once closed, no new access requests, exports, searches, or key material reads are allowed under it. This cannot be reopened here."] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4", children: [_jsx("dt", { className: "text-text-muted", children: "Custodians" }), _jsx("dd", { className: "break-all", children: matter.custodianMailboxUids.join(", ") }), _jsx("dt", { className: "text-text-muted", children: "Date range" }), _jsx("dd", { children: formatDateRange(matter) })] }), closeError && _jsx(Alert, { children: closeError }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: closing, onClick: closeCloseModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: closing, disabled: closing, onClick: handleClose, children: "Close matter" })] })] }), _jsxs(Modal, { open: approveTarget !== null, onClose: () => setApproveTarget(null), title: "Approve access request", children: [_jsx("p", { className: "text-sm mb-3", children: "Approving lets holders of this matter\u2019s escrow scope read the key material for this mailbox once enough holders have approved." }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4", children: [_jsx("dt", { className: "text-text-muted", children: "Matter" }), _jsx("dd", { children: matter.name }), _jsx("dt", { className: "text-text-muted", children: "Mailbox" }), _jsx("dd", { className: "break-all", children: approveTarget?.mailboxUid }), _jsx("dt", { className: "text-text-muted", children: "Date range" }), _jsx("dd", { children: formatDateRange(matter) }), _jsx("dt", { className: "text-text-muted", children: "Approvals" }), _jsxs("dd", { children: [approveTarget?.approvals.length, " of ", approveTarget?.requiredHoldersAtCreation, " so far, including requester ", approveTarget?.requestedByUserUid] })] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setApproveTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => void handleApprove(), children: "Approve request" })] })] }), _jsxs(Modal, { open: denyTarget !== null, onClose: () => setDenyTarget(null), title: "Deny access request", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Denying refuses this request for good: it can\u2019t be approved afterwards, and holders can\u2019t read the key material for mailbox ", _jsx("span", { className: "break-all font-semibold", children: denyTarget?.mailboxUid }), " through it. A new request has to be made to ask again."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setDenyTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void handleDeny(), children: "Deny request" })] })] }), _jsx(Modal, { open: showNewRequest, onClose: () => setShowNewRequest(false), title: "New access request", children: _jsxs("form", { onSubmit: handleCreateRequest, className: "flex flex-col gap-4", children: [newRequestError && _jsx(Alert, { children: newRequestError }), _jsx(FormField, { label: "Mailbox uid", htmlFor: "newRequestMailboxUid", children: _jsx("input", { id: "newRequestMailboxUid", type: "text", className: INPUT_CLASS, value: newRequestMailboxUid, onChange: (e) => setNewRequestMailboxUid(e.target.value) }) }), _jsx("p", { className: "text-xs text-text-muted", children: "Must be one of this matter's own custodian mailboxes, currently assigned to this matter's escrow scope. Your own creation counts as the first approval." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: creatingRequest, onClick: () => setShowNewRequest(false), children: "Cancel" }), _jsx(Button, { type: "submit", className: "!w-auto", loading: creatingRequest, disabled: creatingRequest, children: "Create request" })] })] }) }), _jsx(Modal, { open: materialFor !== null, onClose: closeMaterialModal, title: "Escrow key material", children: loadingMaterial ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : materialError ? (_jsx(Alert, { children: materialError })) : (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-text-muted mb-3", children: ["Still-encrypted key material for ", _jsx("strong", { children: materialFor?.mailboxUid }), ": the escrow master key wrap, and the private keys that read its mail, sealed under that master key. This server cannot decrypt any of it either. Copy the JSON below into your own offline tooling."] }), _jsx("pre", { className: "text-xs font-mono bg-surface-alt border border-border rounded-sm p-3 overflow-x-auto whitespace-pre-wrap break-all", children: materialText })] })) })] }));
 }

package/dist/apps/shared/calendar/sealedEvents.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Calendar events the server made from invitations that reached a zero-access mailbox keep their title, location and description only
+ * sealed to the mailbox's zero-access key (`CalendarEvent.sealedContent`; the row's `title` is `[...]`). These are opened here with the
+ * mailbox's unlocked keys so the calendar shows the real ones; while the mailbox is locked the event keeps its placeholder. The
+ * decryption code is loaded only when a sealed event is actually seen.
+ */
+import type { CalendarEvent } from "../../../lib/calendar/calendarApi.js";
+/** Forgets every opened event (sign-out, or the test seam). */
+export declare function clearSealedEvents(): void;
+/** `events` with every sealed one this device can open shown with its real title, location and description. Never rejects. */
+export declare function openSealedEvents(events: CalendarEvent[]): Promise<CalendarEvent[]>;
+/** `openSealedEvents()` for one event. */
+export declare function openSealedEvent(event: CalendarEvent): Promise<CalendarEvent>;

package/dist/apps/shared/calendar/sealedEvents.js

@@ -0,0 +1,54 @@
+import { getUnlockedKeys } from "../../../lib/crypto/keySession.js";
+import { fromBase64 } from "../../../lib/crypto/encoding.js";
+import { onSigningOut } from "../components/mail/compose/composeFlushRegistry.js";
+/** Opened fields by sealed text - the same sealed content always opens to the same fields. Cleared with `clearSealedEvents()`. */
+const opened = new Map();
+/** Forgets every opened event (sign-out, or the test seam). */
+export function clearSealedEvents() {
+    opened.clear();
+}
+async function openFields(event) {
+    const sealed = event.sealedContent.sealed;
+    const known = opened.get(sealed);
+    if (known) {
+        return known;
+    }
+    const keys = getUnlockedKeys(event.mailboxUid)?.zeroAccessKeys;
+    if (!keys?.length) {
+        return undefined;
+    }
+    try {
+        const { decryptEnvelopedDataWithKeys } = await import("../../../lib/crypto/smime.js");
+        const fields = JSON.parse(new TextDecoder().decode(await decryptEnvelopedDataWithKeys(fromBase64(sealed), keys)));
+        const text = (value) => (typeof value === "string" ? value : undefined);
+        const result = {
+            title: text(fields.title) ?? event.title,
+            location: text(fields.location),
+            description: text(fields.description) ?? null,
+            descriptionHtml: text(fields.descriptionHtml) ?? null,
+        };
+        opened.set(sealed, result);
+        return result;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** `events` with every sealed one this device can open shown with its real title, location and description. Never rejects. */
+export async function openSealedEvents(events) {
+    if (!events.some((event) => event.sealedContent)) {
+        return events;
+    }
+    return Promise.all(events.map(async (event) => {
+        if (!event.sealedContent) {
+            return event;
+        }
+        const fields = await openFields(event);
+        return fields ? { ...event, ...fields } : event;
+    }));
+}
+/** `openSealedEvents()` for one event. */
+export async function openSealedEvent(event) {
+    return (await openSealedEvents([event]))[0];
+}
+onSigningOut(clearSealedEvents);