@rapidmx/web-client 0.35.0 → 0.37.0

package/dist/apps/shared/components/calendar/EventEditor.js

@@ -6,13 +6,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { format } from "date-fns";
 import { ApiRequestError } from "../../../../lib/util/api.js";
+import { KeysLockedError } from "../../../../lib/crypto/masterKey.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { createCalendarEvent, getCalendarEvent, guestPermissionsOf, updateCalendarEvent, visibilityOf, } from "../../../../lib/calendar/calendarApi.js";
 import { createVideoMeeting, getVideoMeeting, updateVideoMeeting, } from "../../../../lib/videoconf/videoMeetingsApi.js";
 import { detachOccurrence, saveEventSeries } from "../../../../lib/calendar/calendarMutations.js";
+import { isProtectedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import { followMeetingKeyExpiry, meetingKeyExpiry, organizerJoinLink, protectMeeting, rememberMeetingKey } from "../../../../lib/videoconf/protectedMeetings.js";
 import { toDatetimeLocal } from "../../../../lib/util/dateInput.js";
 import { deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
-import { fromEventWallClock, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
+import { useKeysLocked } from "../../zeroAccess/useKeysLocked.js";
+import { fromEventWallClock, seriesEndDate, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
 import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import EventExpandedForm from "./EventExpandedForm.js";
@@ -33,6 +37,22 @@ export const VIDEO_LOCATION_PLACEHOLDER = "Video call — link in this invitatio
 /** The plugin's own title bound (`BaseVideoMeetingRoute`'s `MAX_TITLE_LENGTH`) - a longer title is a 400, so
  * an over-long event title is trimmed to fit rather than failing the whole meeting. */
 const MAX_MEETING_TITLE_LENGTH = 200;
+/** Who a video meeting minted for an event with `guests` invites: every attendee with an address but the organizer. */
+function meetingInviteesOf(guests, organizerAddress) {
+    const organizerAddressLower = organizerAddress.toLowerCase();
+    return guests
+        .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
+        .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+}
+/** The content a save of `fields` invites with, for the server to send a protected event's invitations with. */
+function invitationContentOfFields(fields) {
+    return {
+        title: fields.title,
+        location: fields.location || undefined,
+        description: fields.description || undefined,
+        descriptionHtml: fields.descriptionHtml || undefined,
+    };
+}
 const MS_PER_MINUTE = 60000;
 const MS_PER_HOUR = 3600000;
 const MS_PER_DAY = 86400000;
@@ -183,16 +203,26 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
     const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
     const [videoError, setVideoError] = useState(null);
+    /** Why the meeting just made isn't protected end to end - shown beside the toggle, not as an error. */
+    const [videoNotice, setVideoNotice] = useState(null);
     // The event as this modal last persisted it. Set only when a save got the event stored but could not
     // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
     // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
     const [savedEvent, setSavedEvent] = useState(null);
+    // `savedEvent` as of the last render, for sending deferred invitations when the dialog goes away (`flushDeferredInvitations()`).
+    const savedEventRef = useRef(null);
+    savedEventRef.current = savedEvent;
     // Whether that stored record is a series saved with `toSeriesFields()`: its master's dates are not the form's (the occurrence's), so a retry
     // must not send them - the first save already applied any change of time.
     const savedAsSeries = useRef(false);
     // A meeting minted for this event whose link onto the event could not be saved. A retry reuses it rather than minting a second one,
     // which would send the invitees a second set of join links and leave this one orphaned.
     const mintedMeeting = useRef(null);
+    // The content of a new event whose invitations its create deferred (`invitationContent: { defer: true }`) to the save that links its
+    // video meeting, so attendees get one invitation, with the link - until a save has sent them. That save carries this content too, for
+    // a protected event this device couldn't open; and should the meeting never be linked, a retry without video, or closing the dialog
+    // (`flushDeferredInvitations()`), sends them without it - best effort, since the dialog can also be left in ways that don't pass here.
+    const deferredInvitations = useRef(null);
     const [editScope, setEditScope] = useState("occurrence");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
@@ -209,7 +239,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         }
         let cancelled = false;
         void getVideoMeeting(uid, client)
-            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .then(organizerJoinLink)
             .catch(() => null)
             .then((url) => {
             if (!cancelled) {
@@ -220,6 +250,15 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             cancelled = true;
         };
     }, [occurrence?.videoMeetingUid, client]);
+    // A protected meeting's links carry its key after `#`, opened (or made) with the organizer's mailbox keys: they go when any mailbox locks
+    // - this dialog can be saving to another mailbox than the event's. A meeting made here but not yet linked keeps its uid, so a retry
+    // doesn't make a second one; it is linked without a link to show.
+    useKeysLocked(() => {
+        setOrganizerJoinUrl((url) => (url?.includes("#") ? null : url));
+        if (mintedMeeting.current?.organizerJoinUrl?.includes("#")) {
+            mintedMeeting.current = { uid: mintedMeeting.current.uid, organizerJoinUrl: null };
+        }
+    });
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
     dirtyRef.current = occurrence
@@ -335,10 +374,16 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
      *
      * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
      * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
+     *
+     * `rescheduled`: the save changed the event's times or recurrence. A protected meeting's key is discarded an hour after the end it
+     * was made for, so a linked meeting's key expiry then follows the saved event's (series') new end - best effort.
      */
-    async function applyVideoConferencing(saved, guests) {
-        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
+    async function applyVideoConferencing(saved, guests, rescheduled) {
+        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way, but for the key expiry.
         if (videoEnabled === !!videoMeetingUid) {
+            if (videoEnabled && rescheduled && saved.videoMeetingUid) {
+                await followMeetingKeyExpiry(saved.videoMeetingUid, seriesEndDate(saved), client);
+            }
             return { event: saved, failed: false };
         }
         // Detaching a single occurrence (`detachOccurrence()`, react-shared's `calendarMutations.ts`)
@@ -357,25 +402,30 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         }
         try {
             if (videoEnabled) {
-                const organizerAddressLower = saved.organizer.address.toLowerCase();
-                const invitees = guests
-                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
-                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+                const invitees = meetingInviteesOf(guests, saved.organizer.address);
                 if (invitees.length === 0) {
                     setVideoError("Add at least one attendee other than yourself to add video conferencing.");
                     return { event: saved, failed: true };
                 }
                 if (!mintedMeeting.current) {
+                    // Protected end to end when the organizer's mailbox has zero-access: its title and names sealed, its key in every link.
+                    const title = saved.title.slice(0, MAX_MEETING_TITLE_LENGTH);
+                    const secured = await protectMeeting(saved.mailboxUid, title, invitees, meetingKeyExpiry(seriesEndDate(saved)));
                     const result = await createVideoMeeting({
                         mailboxUid: saved.mailboxUid,
-                        title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                        ...(secured
+                            ? { protection: secured.protection, invitees: secured.invitees }
+                            : // Stored readable: a protected event's real title never goes there.
+                                { title: isProtectedRecord(saved) ? "Meeting" : title, invitees }),
                         visibility: "private",
                         calendarEventUid: saved.uid,
                         startTime: saved.startDate,
                         endTime: saved.endDate,
-                        invitees,
                     }, client);
-                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: result.organizerJoinUrl ?? null };
+                    rememberMeetingKey(result.meeting.uid, secured?.fragment ?? null, saved.mailboxUid);
+                    setVideoNotice(secured ? null : "This meeting isn't end-to-end protected because zero-access encryption is off (or locked) for your mailbox.");
+                    const organizerUrl = result.organizerJoinUrl ?? null;
+                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: organizerUrl && secured ? `${organizerUrl}#${secured.fragment}` : organizerUrl };
                 }
                 const meeting = mintedMeeting.current;
                 const patched = await updateCalendarEvent({
@@ -383,8 +433,11 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     version: saved.version,
                     location: VIDEO_LOCATION_PLACEHOLDER,
                     videoMeetingUid: meeting.uid,
-                }, client);
+                    // The invitations the create deferred go out with this save.
+                    ...(deferredInvitations.current ? { invitationContent: { ...deferredInvitations.current, location: VIDEO_LOCATION_PLACEHOLDER } } : {}),
+                }, client, saved);
                 mintedMeeting.current = null;
+                deferredInvitations.current = null;
                 setVideoMeetingUid(meeting.uid);
                 setOrganizerJoinUrl(meeting.organizerJoinUrl);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
@@ -395,7 +448,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
             // leave the placeholder (and the link to the now-cancelled meeting) in place.
             const patch = { location: restoredLocation || null, videoMeetingUid: null };
-            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...patch }, client);
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...patch }, client, saved);
             setVideoMeetingUid(undefined);
             setOrganizerJoinUrl(undefined);
             update({ location: restoredLocation });
@@ -486,6 +539,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             autoReplyEnabled: values.autoReplyEnabled,
             autoReplyMessage: values.autoReplyEnabled ? values.autoReplyMessage : cleared,
         };
+        // A save that will link a new video meeting to the event right after. A new event's invitations wait for that save (restapi sends a
+        // protected one's at save time), so they go out once, with the link and its keys.
+        const willLinkMeeting = videoEnabled && !videoMeetingUid && meetingInviteesOf(merged.attendees, effectiveOrganizerAddress).length > 0;
         setSaving(true);
         try {
             let saved;
@@ -504,7 +560,16 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     delete retryFields.timezone;
                     delete retryFields.allDay;
                 }
-                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...retryFields }, client);
+                // A create's deferred invitations still wait for the meeting's link; without one to link, this save sends them.
+                const deferred = deferredInvitations.current;
+                if (deferred) {
+                    deferredInvitations.current = invitationContentOfFields(fields);
+                    retryFields.invitationContent = willLinkMeeting ? { defer: true } : deferredInvitations.current;
+                }
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...retryFields }, client, savedEvent);
+                if (deferred && !willLinkMeeting) {
+                    deferredInvitations.current = null;
+                }
             }
             else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
@@ -513,7 +578,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     folderUid: values.targetFolderUid,
                     ...fields,
                     organizer: { address: effectiveOrganizerAddress, type: "to" },
+                    ...(willLinkMeeting ? { invitationContent: { defer: true } } : {}),
                 }, client);
+                deferredInvitations.current = willLinkMeeting ? invitationContentOfFields(fields) : null;
             }
             else if (editingSingleOccurrence) {
                 saved = await detachOccurrence(occurrence, fields, client);
@@ -525,9 +592,15 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             }
             else {
-                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...fields }, client);
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...fields }, client, occurrence);
             }
-            const video = await applyVideoConferencing(saved, merged.attendees);
+            // Against the record this save started from: a false positive only costs a look at the meeting.
+            const before = savedEvent ?? occurrence;
+            const rescheduled = !!before &&
+                (!sameMinute(before.startDate, startDate) ||
+                    !sameMinute(before.endDate, endDate) ||
+                    JSON.stringify(before.recurrenceRule ?? null) !== JSON.stringify(fields.recurrenceRule ?? null));
+            const video = await applyVideoConferencing(saved, merged.attendees, rescheduled);
             if (video.failed) {
                 // The event itself is saved - keep the modal open on the inline error so the video meeting
                 // can be retried (or the toggle put back) rather than closing over it.
@@ -542,12 +615,35 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             onSaved();
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this event.");
+            // `KeysLockedError`: one occurrence of a protected event, detached while the mailbox is locked (nothing was written).
+            setError(err instanceof ApiRequestError || err instanceof KeysLockedError ? err.message : "Could not save this event.");
         }
         finally {
             setSaving(false);
         }
     }
+    /** Sends the invitations a create deferred when the dialog is closed before a save sent them (the video meeting couldn't be linked):
+     * a save of no change, carrying their content. Best effort - the event is stored either way, and a failure leaves them pending until
+     * the event is saved again. Only a protected event's are sent at save time; restapi's scheduling job sends any other's. */
+    async function flushDeferredInvitations() {
+        const content = deferredInvitations.current;
+        const stored = savedEventRef.current;
+        deferredInvitations.current = null;
+        if (!content || !stored || !isProtectedRecord(stored)) {
+            return;
+        }
+        try {
+            await updateCalendarEvent({ uid: stored.uid, version: stored.version, invitationContent: content }, client, stored);
+        }
+        catch {
+            // Left pending: the next save of the event sends them.
+        }
+    }
+    // However the dialog goes away - its own close button waits for this, an Escape or a click outside a new event's popover doesn't pass
+    // through it - deferred invitations still pending are sent.
+    const flushOnUnmount = useRef(flushDeferredInvitations);
+    flushOnUnmount.current = flushDeferredInvitations;
+    useEffect(() => () => void flushOnUnmount.current(), []);
     // Same scheme allow-list `calendarReminders.ts#joinMeetingUrl()` already applies to a reminder's own
     // `location` field - reused here rather than duplicated so a video-conferencing plugin (or a stray
     // manual edit of `videoMeetingUid`'s otherwise-plugin-owned join link) can't smuggle a `javascript:`/
@@ -583,6 +679,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         joinUrl,
         organizerJoinUrl,
         videoError,
+        videoNotice,
         editScope,
         setEditScope,
         showEditScope: !!occurrence?.isRecurringOccurrence,
@@ -590,7 +687,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         saving,
         onSubmit: (event) => void handleSubmit(event),
         // Once something was stored, leaving is a save as far as the calendar behind is concerned: it has to reload.
-        onCancel: () => (savedEvent ? onSaved() : onCancel()),
+        onCancel: () => (savedEvent ? void flushDeferredInvitations().then(onSaved) : onCancel()),
     };
     // A new event has the tabs, whose Event face is the quick popover or the full card; an existing event is always the full card.
     return quickCreate ? (_jsx(QuickCreateFaces, { c: controller, layout: layout, onExpand: onExpand, config: quickCreate, dirtyRef: dirtyRef, organizerAddress: effectiveOrganizerAddress })) : (_jsx(EventExpandedForm, { c: controller }));

package/dist/apps/shared/components/calendar/EventFormParts.js

@@ -33,7 +33,7 @@ export function LocationRow({ c }) {
 /** "Add video conferencing" and, once the event has a meeting, the button that joins it. */
 export function VideoConferencingRow({ c }) {
     const { values } = c;
-    return (_jsxs(IconRow, { icon: _jsx(HiOutlineVideoCamera, { size: 20 }), children: [_jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: values.videoEnabled, onChange: (e) => c.update({ videoEnabled: e.target.checked }) }), "Add video conferencing"] }), values.videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), c.videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mb-1", children: c.videoError })), c.videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !c.joinUrl, onClick: () => window.open(c.joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !c.joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: c.organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] })), c.videoMeetingUid && c.joinUrl && (_jsxs("div", { className: "mb-1 flex items-center gap-1 min-w-0 text-xs text-text-muted", children: [_jsx("a", { href: c.joinUrl, target: "_blank", rel: "noopener noreferrer", className: "break-all underline hover:text-text", children: c.joinUrl }), _jsx(CopyIconButton, { value: c.joinUrl, label: "Copy the video call link", className: "shrink-0" })] }))] }));
+    return (_jsxs(IconRow, { icon: _jsx(HiOutlineVideoCamera, { size: 20 }), children: [_jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: values.videoEnabled, onChange: (e) => c.update({ videoEnabled: e.target.checked }) }), "Add video conferencing"] }), values.videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), c.videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mb-1", children: c.videoError })), c.videoNotice && _jsx("p", { className: "text-xs text-text-muted mb-1", children: c.videoNotice }), c.videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !c.joinUrl, onClick: () => window.open(c.joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !c.joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: c.organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] })), c.videoMeetingUid && c.joinUrl && (_jsxs("div", { className: "mb-1 flex items-center gap-1 min-w-0 text-xs text-text-muted", children: [_jsx("a", { href: c.joinUrl, target: "_blank", rel: "noopener noreferrer", className: "break-all underline hover:text-text", children: c.joinUrl }), _jsx(CopyIconButton, { value: c.joinUrl, label: "Copy the video call link", className: "shrink-0" })] }))] }));
 }
 /**
  * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and

package/dist/apps/shared/components/calendar/EventModal.d.ts

@@ -82,4 +82,4 @@ export interface EventModalProps {
  * Editing or deleting a recurring event's occurrence offers a choice between "this event" and "the entire series" (see
  * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }: EventModalProps): React.JSX.Element | null;
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence: listedOccurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }: EventModalProps): React.JSX.Element | null;

package/dist/apps/shared/components/calendar/EventModal.js

@@ -13,6 +13,9 @@ import EventEditor from "./EventEditor.js";
 import EventMatchNav from "./EventMatchNav.js";
 import EventShell from "./EventShell.js";
 import SlideIn from "./SlideIn.js";
+import { isOpenedRecord, isProtectedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import { useOpenedRecord } from "../../zeroAccess/useOpenedRecord.js";
+import { fullyOpenedEvent } from "../../../../lib/calendar/calendarApi.js";
 export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
 /** How wide each face of the dialog gets, in px. */
 const QUICK_WIDTH = 450;
@@ -34,7 +37,7 @@ const TASK_FORM_WIDTH = 560;
  * Editing or deleting a recurring event's occurrence offers a choice between "this event" and "the entire series" (see
  * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }) {
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence: listedOccurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }) {
     const isMobile = useIsMobile();
     // An existing event: Modify was pressed. A new event: More options was.
     const [editing, setEditing] = useState(false);
@@ -47,10 +50,20 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     // Escape or the close button on a form that holds something asks before throwing it away.
     const [confirmingDiscard, setConfirmingDiscard] = useState(false);
     // An event on a calendar shared with the reader view-only cannot be changed, deleted or answered.
-    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === occurrence?.mailboxUid)?.mailbox);
+    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === listedOccurrence?.mailboxUid)?.mailbox);
+    // A protected event from a list has only what the views draw opened (`EVENT_LIST_FIELDS`): the card shows and the form edits all of it, so
+    // the rest is opened first - a form seeded from a placeholder description would save it over the real one. Opened as a write opens it
+    // (`fullyOpenedEvent()`): the title opened from its sealed content stays, never replaced by an older per-field one the card, a reply and
+    // a save would then carry.
+    const partlyOpened = !!listedOccurrence && isProtectedRecord(listedOccurrence) && !isOpenedRecord(listedOccurrence);
+    const opening = useOpenedRecord(partlyOpened ? listedOccurrence : undefined, fullyOpenedEvent);
+    const occurrence = partlyOpened ? opening.record : listedOccurrence;
     if (!open) {
         return null;
     }
+    if (partlyOpened && !opening.ready) {
+        return (_jsx(EventShell, { variant: "card", label: "Event details", focusKey: "opening", anchor: anchor, width: DETAILS_WIDTH, onClose: onClose, children: _jsx("p", { className: "text-sm text-text-muted p-4", children: "Opening this event\u2026" }) }));
+    }
     if (syncWarning) {
         return (_jsxs(Modal, { open: open, onClose: onSaved, title: "Series saved", children: [_jsx("p", { role: "alert", className: "text-sm mb-4", children: "The series was saved, but some occurrences you had changed individually couldn\u2019t be moved with it. They may now appear twice - check the calendar and delete any duplicate." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: onSaved, children: "OK" })] }));
     }

package/dist/apps/shared/components/calendar/RequestChangeForm.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { InvitationContent } from "../../../../lib/calendar/protectedEvents.js";
 /** The event a guest asks about: what it says now (the form starts from it and sends only what differs) and which row of it the request is for. */
 export interface ChangeSubject {
     /** The event's uid on this mailbox (`CalendarEvent.uid`, or `MessageInvite.calendarEventUid`): the row the organizer's answer will come back to. */
@@ -15,6 +16,8 @@ export interface ChangeSubject {
     descriptionHtml?: string | null;
     /** Everyone already invited, whatever the case, so a guest is not added twice. */
     guestAddresses: string[];
+    /** The event's real title, location and description, for the server to name it by when its stored copy is protected (`invitationContentOf()`). */
+    invitationContent?: InvitationContent;
 }
 export interface RequestChangeFormProps {
     subject: ChangeSubject;

package/dist/apps/shared/components/calendar/RequestChangeForm.js

@@ -112,7 +112,7 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
         }
         setSending(true);
         try {
-            await requestEventChange(subject.uid, request, client);
+            await requestEventChange(subject.uid, request, client, subject.invitationContent);
             notify({
                 kind: "success",
                 title: "Your change was sent to the organizer",

package/dist/apps/shared/components/calendar/eventForm.d.ts

@@ -85,6 +85,8 @@ export interface EventFormController {
     /** `undefined` while it is being fetched, `null` once it is known there is none. */
     organizerJoinUrl: string | null | undefined;
     videoError: string | null;
+    /** Why the video meeting isn't protected end to end, when it isn't. */
+    videoNotice?: string | null;
     editScope: EditScope;
     setEditScope: (scope: EditScope) => void;
     /** Whether the "Apply changes to" choice is offered (editing an occurrence of a recurring event). */

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

@@ -27,6 +27,9 @@ import { useCompose } from "../mail/compose/ComposeContext.js";
 import { formatInviteWhen } from "../mail/invite/inviteFormat.js";
 import { contactScope, createContactFor, findContact, loadFolders, loadParticipantCard, loadRecentMessages, loadUpcomingEvents, scopeMailboxes, } from "./contactCardData.js";
 import { contactInputFor, isExternalAddress, ownDomains, participantName } from "./participantDetails.js";
+import { openSealedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import { isSealedRecord } from "../../../../lib/zeroAccess/sealedMoves.js";
+import { useKeysLocked } from "../../zeroAccess/useKeysLocked.js";
 /**
  * One piece of the card's data. `load` is `undefined` while what it needs is still coming (it stays loading), and runs once when it is there; a
  * failure is this section's error and nothing else's. `upstream` is the section this one needs: its error is this one's too.
@@ -134,11 +137,19 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
             }
         }
     }
+    // The contact and the upcoming events are shown opened: a lock of the mailbox whose sealed content they hold takes the card off screen,
+    // as the calendar page closes a protected event's card - its state would keep what the lock cleared everywhere else.
+    useKeysLocked((locked) => {
+        const shown = [stored, ...(events.status === "ready" ? events.data : [])];
+        if (shown.some((record) => record?.mailboxUid === locked && isSealedRecord(record))) {
+            onClose();
+        }
+    });
     // Not while a picture is being changed: that goes against the version the star would replace.
     const [photoBusy, setPhotoBusy] = useState(false);
     async function handleToggleFavorite(current) {
         try {
-            const next = await setContactFavorite(current, !current.favorite, client);
+            const next = await openSealedRecord(await setContactFavorite(current, !current.favorite, client));
             if (mounted.current) {
                 setChanged(next);
             }

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

@@ -24,4 +24,5 @@ export interface ContactDetailPaneProps {
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps): React.JSX.Element;
+/** The pane for `props.contact` with all its protected details opened (a list hands over a contact with only what it shows opened). */
+export default function ContactDetailPane(props: ContactDetailPaneProps): React.JSX.Element;

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

@@ -4,17 +4,23 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import { setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { setContactFavorite, updateContact } from "../../../../lib/contacts/contactsApi.js";
 import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import FavoriteStarButton from "./FavoriteStarButton.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
 import ContactPhotoAvatar from "../../../../lib/components/avatar/ContactPhotoAvatar.js";
 import ContactPhotoEditor from "./ContactPhotoEditor.js";
 import KeyChangeReview from "./KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { isOpenPgpKey, keyFormat, OPENPGP_KEY_TYPE, trustSigner } from "../../../../lib/crypto/keyvaultApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import ProtectedMark from "../../zeroAccess/ProtectedMark.js";
+import { useOpenedRecord } from "../../zeroAccess/useOpenedRecord.js";
+import { isOpenedRecord, isProtectedRecord, openSealedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
 /** Groups a hex fingerprint into 4-character blocks (`ab12 cd34 ...`) for out-of-band verification -
  * the spec's own use case ("compare this over the phone") is materially easier with a grouped string
  * than one 64-character run. */
@@ -33,7 +39,17 @@ function RevocationBadge({ label }) {
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite = true, backHref, onKeysChanged, onChanged, canResolveKeys }) {
+/** The pane for `props.contact` with all its protected details opened (a list hands over a contact with only what it shows opened). */
+export default function ContactDetailPane(props) {
+    const { record, ready } = useOpenedRecord(props.contact);
+    const { onChanged } = props;
+    // The server answers a change with the protected details sealed: what goes back to the list is opened again.
+    const openedOnChanged = onChanged && ((changed) => void openSealedRecord(changed).then(onChanged));
+    // A protected contact that can't be opened here shows placeholders: an edit would save them over the real details.
+    const editLocked = ready && isProtectedRecord(record) && !isOpenedRecord(record);
+    return _jsx(ContactDetailPaneView, { ...props, contact: record, onChanged: openedOnChanged, editLocked: editLocked });
+}
+function ContactDetailPaneView({ contact, onEdit, onDelete, canWrite = true, backHref, onKeysChanged, onChanged, canResolveKeys, editLocked, }) {
     const client = useApiClient();
     // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
     const [keyNotice, setKeyNotice] = useState(null);
@@ -60,20 +76,98 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
         clearPinnedSignerCache();
         onKeysChanged?.();
     }
-    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [canResolveKeys === false ? (_jsx(ContactPhotoAvatar, { displayName: contact.displayName, size: 48, contact: contact, email: contact.emails[0]?.address })) : (_jsx(ContactPhotoEditor, { contact: contact, displayName: contact.displayName, size: 48, badgeSize: "sm", email: contact.emails[0]?.address, onChanged: (changed) => onChanged?.(changed), onBusyChange: setPhotoBusy })), _jsxs("div", { children: [_jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [contact.displayName, _jsx(FavoriteStarButton, { favorite: !!contact.favorite, disabled: photoBusy, onToggle: () => void handleToggleFavorite(), className: "ml-1 align-middle" })] }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), canWrite && (_jsx("div", { className: "flex flex-wrap justify-end gap-2 shrink-0", children: confirmingDelete ? (_jsxs(_Fragment, { children: [_jsx("span", { role: "alert", className: "self-center text-sm", children: "Delete this contact?" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Yes, delete" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDeleteUid(null), children: "Keep" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: () => setConfirmingDeleteUid(contact.uid), children: "Delete" })] })) }))] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, _jsx(CopyIconButton, { value: e.address, label: "Copy email address", className: "mx-0.5" }), " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
+    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [canResolveKeys === false ? (_jsx(ContactPhotoAvatar, { displayName: contact.displayName, size: 48, contact: contact, email: contact.emails[0]?.address })) : (_jsx(ContactPhotoEditor, { contact: contact, displayName: contact.displayName, size: 48, badgeSize: "sm", email: contact.emails[0]?.address, onChanged: (changed) => onChanged?.(changed), onBusyChange: setPhotoBusy })), _jsxs("div", { children: [_jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [contact.displayName, _jsx(ProtectedMark, { record: contact }), _jsx(FavoriteStarButton, { favorite: !!contact.favorite, disabled: photoBusy, onToggle: () => void handleToggleFavorite(), className: "ml-1 align-middle" })] }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), canWrite && (_jsx("div", { className: "flex flex-wrap justify-end gap-2 shrink-0", children: confirmingDelete ? (_jsxs(_Fragment, { children: [_jsx("span", { role: "alert", className: "self-center text-sm", children: "Delete this contact?" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Yes, delete" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDeleteUid(null), children: "Keep" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, disabled: editLocked, title: editLocked ? "This contact is protected: unlock your mailbox to edit it" : undefined, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: () => setConfirmingDeleteUid(contact.uid), children: "Delete" })] })) }))] }), editLocked && canWrite && (_jsx("p", { role: "status", className: "text-sm text-text-muted", children: "This contact is protected and can\u2019t be edited while your mailbox is locked. Unlock it to edit." })), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, _jsx(CopyIconButton, { value: e.address, label: "Copy email address", className: "mx-0.5" }), " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
                         contact.encryptPreference ||
                         keyConflicts.length > 0 ||
-                        previousKeys.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), notice && (_jsx("p", { role: "status", className: "mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text", children: notice })), keyConflicts.map((conflict) => {
-                                const pinned = contact.keys?.find((key) => key.useType === conflict.useType);
-                                const kind = conflict.useType === "sign" ? "signing" : "encryption";
-                                return (_jsxs("section", { "aria-label": `${conflict.useType === "sign" ? "Signing" : "Encryption"} key change`, className: "mb-3 py-3 px-3 rounded-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsxs("h2", { className: "font-semibold", children: ["A different ", kind, " key was seen for ", contact.displayName] }), _jsx("p", { children: "The current key stays in use until you decide what to do with the new one." }), _jsx(KeyChangeReview, { mailboxUid: contact.mailboxUid, address: contact.emails[0]?.address, useType: conflict.useType, ownerName: contact.displayName, current: pinned && { fingerprint: pinned.fingerprint, since: keyPinnedSince(contact, pinned) }, proposed: {
+                        previousKeys.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), isProtectedRecord(contact) && (_jsx("p", { className: "mb-2 text-xs text-text-muted", children: "This contact\u2019s details are protected by zero-access encryption. Its email addresses aren\u2019t - the server needs them to deliver mail and to find this contact\u2019s encryption keys." })), notice && (_jsx("p", { role: "status", className: "mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text", children: notice })), keyConflicts.map((conflict) => {
+                                // Each format's key is pinned on its own: an OpenPGP key's conflict is with the pinned OpenPGP key.
+                                const openPgp = isOpenPgpKey(conflict.observedKey);
+                                const pinned = contact.keys?.find((key) => key.useType === conflict.useType && keyFormat(key) === keyFormat(conflict.observedKey));
+                                const kind = openPgp ? "OpenPGP" : conflict.useType === "sign" ? "signing" : "encryption";
+                                return (_jsxs("section", { "aria-label": `${openPgp ? "OpenPGP" : conflict.useType === "sign" ? "Signing" : "Encryption"} key change`, className: "mb-3 py-3 px-3 rounded-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsxs("h2", { className: "font-semibold", children: ["A different ", kind, " key was seen for ", contact.displayName] }), _jsx("p", { children: "The current key stays in use until you decide what to do with the new one." }), _jsx(KeyChangeReview, { mailboxUid: contact.mailboxUid, address: contact.emails[0]?.address, useType: conflict.useType, ...(openPgp ? { keyType: "openpgp" } : {}), ownerName: contact.displayName, current: pinned && { fingerprint: pinned.fingerprint, since: keyPinnedSince(contact, pinned) }, proposed: {
                                                 fingerprint: conflict.observedKey.fingerprint,
                                                 observedAt: conflict.observedAt,
                                                 source: conflict.source,
                                             }, canReject: true, canResolve: canResolveKeys, onResolved: (action) => refresh(action === "accept"
                                                 ? `The new ${kind} key is now trusted for ${contact.displayName}.`
-                                                : `You kept the current ${kind} key for ${contact.displayName}.`), onPinnedKeyChanged: () => refresh(KEY_CHANGE_STALE_MESSAGE) })] }, conflict.useType));
+                                                : `You kept the current ${kind} key for ${contact.displayName}.`), onPinnedKeyChanged: () => refresh(KEY_CHANGE_STALE_MESSAGE) })] }, `${conflict.useType}:${keyFormat(conflict.observedKey)}`));
                             }), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
                                     ? "This contact also encrypts to you — messages to them can be encrypted."
-                                    : "This contact has not indicated a mutual encryption preference." })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint), _jsx(RevocationBadge, { label: revocationLabel(key) })] }, key.fingerprint))), previousKeys.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-text-muted text-xs font-bold mb-1", children: "Key history" }), _jsx("ul", { "aria-label": "Key history", children: previousKeys.map((key) => (_jsxs("li", { className: "text-xs py-0.5", children: [_jsxs("span", { className: "font-mono", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint)] }), _jsx(RevocationBadge, { label: revocationLabel(key) }), _jsxs("span", { className: "text-text-muted", children: [" ", "\u00B7", " ", key.replacement === "automatic" ? "Renewed automatically" : "Replaced by you", " on", " ", formatDate(key.replacedAt)] })] }, `${key.useType}:${key.fingerprint}:${key.replacedAt}`))) })] }))] })) : null] })] }));
+                                    : "This contact has not indicated a mutual encryption preference." })), canWrite && contact.keys?.some((key) => isOpenPgpKey(key)) && (_jsx(PreferredFormatControl, { contact: contact, onChanged: onChanged })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [keyLabel(key), " key: ", formatFingerprint(key.fingerprint), _jsx(RevocationBadge, { label: revocationLabel(key) })] }, key.fingerprint))), previousKeys.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-text-muted text-xs font-bold mb-1", children: "Key history" }), _jsx("ul", { "aria-label": "Key history", children: previousKeys.map((key) => (_jsxs("li", { className: "text-xs py-0.5", children: [_jsxs("span", { className: "font-mono", children: [keyLabel(key), " key: ", formatFingerprint(key.fingerprint)] }), _jsx(RevocationBadge, { label: revocationLabel(key) }), _jsxs("span", { className: "text-text-muted", children: [" ", "\u00B7", " ", key.replacement === "automatic" ? "Renewed automatically" : "Replaced by you", " on", " ", formatDate(key.replacedAt)] })] }, `${key.useType}:${key.fingerprint}:${key.replacedAt}`))) })] }))] })) : null, canWrite && contact.emails[0]?.address && !contact.keys?.some((key) => isOpenPgpKey(key)) && (_jsx(OpenPgpKeyImport, { contact: contact, onImported: () => refresh("The OpenPGP key is now trusted for this contact.") }))] })] }));
+}
+const FORMAT_NAMES = { smime: "S/MIME", openpgp: "OpenPGP" };
+/** What "Automatic" picks for `contact` and why (restapi *Choosing the format*, after the user's own choice): what the address
+ * advertises, else what it was last seen using, else S/MIME. */
+function automaticFormat(contact) {
+    const advertised = contact.encryptPreference?.preferFormat;
+    if (advertised) {
+        return `${FORMAT_NAMES[advertised]}, which they asked for`;
+    }
+    const observed = contact.observedFormat?.format;
+    return observed ? `${FORMAT_NAMES[observed]}, which they used last` : "S/MIME when they have a certificate";
+}
+/**
+ * "Preferred format" for a contact who has an OpenPGP key: which format mail to them is encrypted in when they can receive both.
+ * Automatic follows what they advertise or last used; S/MIME or OpenPGP overrides that - e.g. for someone who reads OpenPGP mail
+ * but still has an S/MIME certificate from a former employer.
+ */
+function PreferredFormatControl({ contact, onChanged }) {
+    const client = useApiClient();
+    const [saving, setSaving] = useState(false);
+    async function save(value) {
+        setSaving(true);
+        try {
+            const changed = await updateContact({ uid: contact.uid, version: contact.version, preferredFormat: value === "smime" || value === "openpgp" ? value : null }, client);
+            onChanged?.(changed);
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't update this contact");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("label", { className: "flex flex-wrap items-center gap-2 text-sm my-1", children: [_jsx("span", { children: "Preferred format" }), _jsxs("select", { className: "border border-border rounded-sm py-1 px-2 bg-surface text-sm", value: contact.preferredFormat ?? "auto", disabled: saving, onChange: (e) => void save(e.target.value), children: [_jsxs("option", { value: "auto", children: ["Automatic (", automaticFormat(contact), ")"] }), _jsx("option", { value: "smime", children: "S/MIME" }), _jsx("option", { value: "openpgp", children: "OpenPGP" })] })] }));
+}
+/** What a pinned key is called: an OpenPGP certificate by its format (it signs and encrypts), an S/MIME one by its use. */
+function keyLabel(key) {
+    return isOpenPgpKey(key) ? "OpenPGP" : key.useType === "sign" ? "Signing" : "Encryption";
+}
+/**
+ * "Add OpenPGP key": pins an OpenPGP public key the user pasted (from the contact's website, a key they sent, a key server they
+ * trust) for the contact's first address - `trustSigner()` with `type: "openpgp"`, which restapi checks names that address. For an
+ * OpenPGP user whose domain publishes no Web Key Directory, this is how RapidMX can encrypt to them.
+ */
+function OpenPgpKeyImport({ contact, onImported }) {
+    const client = useApiClient();
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    if (!open) {
+        return (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setOpen(true), children: "Add OpenPGP key\u2026" }) }));
+    }
+    async function handleImport(e) {
+        e.preventDefault();
+        setBusy(true);
+        setError(null);
+        try {
+            await trustSigner(contact.mailboxUid, { address: contact.emails[0].address, certificate: text.trim(), type: OPENPGP_KEY_TYPE }, client);
+            clearPinnedSignerCache();
+            setOpen(false);
+            setText("");
+            onImported();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError && err.status === 400
+                ? `That isn't an OpenPGP public key for ${contact.emails[0].address} that can be used now.`
+                : err instanceof ApiRequestError && err.status === 409
+                    ? "A different OpenPGP key is already trusted for this contact."
+                    : "Couldn't add the key. Try again.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: (e) => void handleImport(e), className: "flex flex-col gap-2", children: [_jsxs("label", { className: "text-sm font-semibold", htmlFor: `openpgp-key-${contact.uid}`, children: ["OpenPGP public key for ", contact.emails[0].address] }), _jsx("textarea", { id: `openpgp-key-${contact.uid}`, className: "w-full text-xs font-mono border border-border rounded-sm py-1.5 px-2 bg-surface min-h-[8rem]", placeholder: "-----BEGIN PGP PUBLIC KEY BLOCK-----", value: text, onChange: (e) => setText(e.target.value), disabled: busy }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy || !text.trim(), children: "Add key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setOpen(false), disabled: busy, children: "Cancel" })] })] }));
 }