@rapidmx/web-client 0.4.0 → 0.6.0

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
 import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { recurrenceUntilDateKey, recurrenceUntilInstant } from "./allDay.js";
 const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const INPUT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const FREQ_LABEL = {
@@ -21,20 +23,30 @@ function endConditionOf(rule) {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange }) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO" }) {
     function handleEnable(enabled) {
-        onChange(enabled ? { freq: "weekly", interval: 1, byDay: ["MO"], exceptions: [] } : null);
+        onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
     // `update`/`toggleDay` are only ever invoked from handlers rendered inside the `{value && (...)}`
     // block below, so `value` is always non-null here — no defensive null check needed.
     function update(patch) {
         onChange({ ...value, ...patch });
     }
+    // A weekly rule always keeps at least one weekday: with none left, rrule would repeat every day instead.
     function toggleDay(day) {
         const current = value.byDay ?? [];
+        if (current.length === 1 && current[0] === day) {
+            return;
+        }
         const next = current.includes(day) ? current.filter((d) => d !== day) : [...current, day];
         update({ byDay: next });
     }
+    // react-shared passes `byDay` to rrule for every frequency, so a weekday list left over from Weekly would
+    // turn "every day" into "every Monday". Leaving Weekly drops it; entering Weekly starts on the event's own
+    // start weekday (a select only reports an actual change, so this is never Weekly -> Weekly).
+    function handleFrequency(freq) {
+        update({ freq, byDay: freq === "weekly" ? [startWeekday] : undefined });
+    }
     function handleEndCondition(condition) {
         if (condition === "never") {
             update({ count: undefined, until: undefined });
@@ -43,13 +55,36 @@ export default function RecurrenceEditor({ value, onChange }) {
             update({ count: 10, until: undefined });
         }
         else {
-            update({ until: new Date().toISOString(), count: undefined });
+            update({ until: recurrenceUntilInstant(format(new Date(), "yyyy-MM-dd"), allDay), count: undefined });
         }
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] }), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => update({ interval: Number(e.target.value) }), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => update({ freq: e.target.value }), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
+    /** A positive whole number from a number input, or `null` while it's empty (a user clearing the field
+     * to type a new value) — the rule keeps its previous value then, rather than becoming 0/NaN. */
+    function parsePositive(raw) {
+        if (raw.trim() === "")
+            return null;
+        const n = Math.floor(Number(raw));
+        return n >= 1 ? n : 1;
+    }
+    function handleInterval(raw) {
+        const interval = parsePositive(raw);
+        if (interval !== null)
+            update({ interval });
+    }
+    function handleCount(raw) {
+        const count = parsePositive(raw);
+        if (count !== null)
+            update({ count });
+    }
+    function handleUntil(raw) {
+        // A cleared (or partially typed) date input reports "" — keep the previous end date.
+        if (/^\d{4}-\d{2}-\d{2}$/.test(raw))
+            update({ until: recurrenceUntilInstant(raw, allDay) });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] }), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => handleInterval(e.target.value), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => handleFrequency(e.target.value), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
                                 "w-9 h-9 rounded-full text-xs font-semibold border",
                                 (value.byDay ?? []).includes(day)
                                     ? "bg-primary text-white border-primary"
                                     : "bg-surface text-text-muted border-border hover:border-primary",
-                            ].join(" "), children: _jsx("span", { "aria-hidden": "true", children: WEEKDAY_LABELS[day][0] }) }, day))) })), _jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Ends" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", checked: endConditionOf(value) === "never", onChange: () => handleEndCondition("never") }), "Never"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "After", checked: endConditionOf(value) === "count", onChange: () => handleEndCondition("count") }), "After", _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.count ?? 10, disabled: endConditionOf(value) !== "count", onChange: (e) => update({ count: Number(e.target.value) }), "aria-label": "Number of occurrences" }), "occurrences"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "On", checked: endConditionOf(value) === "until", onChange: () => handleEndCondition("until") }), "On", _jsx("input", { type: "date", className: INPUT_CLASS, value: value.until ? value.until.slice(0, 10) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => update({ until: new Date(e.target.value).toISOString() }), "aria-label": "End date" })] })] }), ((value.freq !== "weekly" || (value.byDay ?? []).length > 0)) && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Repeats ", describeRecurrence(value), "."] }))] }))] }));
+                            ].join(" "), children: _jsx("span", { "aria-hidden": "true", children: WEEKDAY_LABELS[day][0] }) }, day))) })), _jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Ends" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", checked: endConditionOf(value) === "never", onChange: () => handleEndCondition("never") }), "Never"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "After", checked: endConditionOf(value) === "count", onChange: () => handleEndCondition("count") }), "After", _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.count ?? 10, disabled: endConditionOf(value) !== "count", onChange: (e) => handleCount(e.target.value), "aria-label": "Number of occurrences" }), "occurrences"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "On", checked: endConditionOf(value) === "until", onChange: () => handleEndCondition("until") }), "On", _jsx("input", { type: "date", className: INPUT_CLASS, value: value.until ? recurrenceUntilDateKey(value.until, allDay) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => handleUntil(e.target.value), "aria-label": "End date" })] })] }), (value.freq !== "weekly" || (value.byDay ?? []).length > 0) && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Repeats ", describeRecurrence(value), "."] }))] }))] }));
 }

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

@@ -0,0 +1,19 @@
+import React, { RefObject } from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+export interface ResourcePickerProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    onSelect: (mailbox: Mailbox) => void;
+    /** Addresses already added as attendees (lowercased by the caller) — excluded from the list so the
+     * same room/equipment mailbox can't be picked twice. */
+    excludeAddresses: string[];
+}
+/**
+ * A searchable dropdown of bookable resource mailboxes (rooms/equipment), for adding one as a `"resource"`
+ * attendee in `EventModal` without typing its raw address. Fetches the caller's full visible resource-mailbox
+ * list once on open and filters it client-side by name/address as the reader types — the same
+ * "fetch-flat-list, filter-client-side" contract every other list endpoint in this codebase already uses
+ * (see `calendarApi.ts`'s `listCalendarEvents` doc comment), since there is no dedicated server-side search
+ * endpoint for mailboxes and the resource-mailbox count in any one org is expected to be small.
+ */
+export default function ResourcePicker({ anchorRef, onClose, onSelect, excludeAddresses }: ResourcePickerProps): React.JSX.Element;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+export interface SplitDayColumn {
+    folderUid: string;
+    name: string;
+    color: string;
+}
+export interface SplitDayViewProps {
+    day: Date;
+    columns: SplitDayColumn[];
+    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
+     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+}
+/**
+ * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
+ * events across calendars can be compared side by side. A deliberately separate component from
+ * `TimeGridView` rather than a generalization of it — it shares that component's visual language
+ * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
+ * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
+ * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
+ * click-only (select an event, or click a slot to create one already targeted at that column's
+ * calendar) — a practical scope cut, not an oversight.
+ */
+export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps): React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addMinutes, format, isSameDay, startOfDay } from "date-fns";
+import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { occursOnDay } from "./allDay.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -15,7 +16,7 @@ const HOURS = Array.from({ length: 24 }, (_, h) => h);
  * calendar) — a practical scope cut, not an oversight.
  */
 export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }) {
-    const dayOccurrences = occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day));
+    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
     const dayStart = startOfDay(day);
     return (_jsxs("div", { role: "region", "aria-label": "Split view", className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), columns.map((col) => (_jsxs("div", { className: "flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border", children: [_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: col.color } }), _jsx("span", { className: "text-xs font-semibold truncate", children: col.name })] }, col.folderUid)))] }), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), columns.map((col) => (_jsx(SplitColumn, { column: col, dayStart: dayStart, occurrences: dayOccurrences.filter((occ) => occ.folderUid === col.folderUid), onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, col.folderUid)))] })] }));
 }
@@ -26,8 +27,13 @@ function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlo
             }), occurrences.map((occurrence) => {
                 const start = new Date(occurrence.startDate);
                 const end = new Date(occurrence.endDate);
-                const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
+                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
+                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
+                const dayEnd = addDays(dayStart, 1).getTime();
+                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
+                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
+                const top = ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+                const height = Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
                 const isFree = occurrence.busyStatus === "free";
                 return (_jsxs("div", { onClick: () => onSelectEvent(occurrence), style: {
                         position: "absolute",

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+export interface TimeGridViewProps {
+    /** One day for the Day view, seven for the Week view, five for the Work Week view. */
+    days: Date[];
+    /** Already expanded for the visible range — see `recurrence.ts`'s `expandAllOccurrences`. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
+    onSelectSlot: (start: Date, end: Date) => void;
+}
+/** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
+ * differ only in how many day columns are shown), with a day-header row and all-day events in a
+ * header strip above it. */
+export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }: TimeGridViewProps): React.JSX.Element;

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
+import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
 import { eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { occursOnDay, startsOnDay } from "./allDay.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -13,20 +14,37 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
     const allDayEvents = occurrences.filter((occ) => occ.allDay);
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
     return (_jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
-                            .filter((occ) => isSameDay(new Date(occ.startDate), day))
-                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
+                            .filter((occ) => occursOnDay(occ, day))
+                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
 }
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     const dayStart = startOfDay(day);
     return (_jsxs("div", { className: ["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" "), children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
                 const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
                 return _jsx(TimeSlot, { start: slotStart, onSelectSlot: onSelectSlot }, i);
-            }), occurrences.map((occurrence) => (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
+            }), occurrences.map((occurrence) => startsOnDay(occurrence, day) ? (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)) : (_jsx(ContinuationBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
 }
 function TimeSlot({ start, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
     return (_jsx("button", { ref: setNodeRef, type: "button", onClick: () => onSelectSlot(start, addMinutes(start, SLOT_MINUTES)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
 }
+/** A block's position within its day column. A multi-day event is drawn in every day column it
+ * overlaps, clipped to that day. */
+function blockGeometry(occurrence, dayStart) {
+    const visibleStart = Math.max(new Date(occurrence.startDate).getTime(), dayStart.getTime());
+    const visibleEnd = Math.min(new Date(occurrence.endDate).getTime(), addDays(dayStart, 1).getTime());
+    return {
+        top: ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX,
+        height: Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16),
+    };
+}
+/** A multi-day event's block in a day column after its first: clickable, but not draggable/resizable
+ * (its drag ids are already taken by the start day's block). */
+function ContinuationBlock({ occurrence, color, dayStart, onSelect, }) {
+    const isFree = occurrence.busyStatus === "free";
+    const { top, height } = blockGeometry(occurrence, dayStart);
+    return (_jsx("div", { onClick: () => onSelect(occurrence), style: { position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : ""].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
+}
 function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
@@ -34,13 +52,11 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     });
     const isFree = occurrence.busyStatus === "free";
     const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+    const { top, height } = blockGeometry(occurrence, dayStart);
     // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
     // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
     // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
     // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
-    const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
     return (_jsxs("div", { ref: setNodeRef, onClick: () => onSelect(occurrence), style: {
             position: "absolute",
             top,

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

@@ -0,0 +1,51 @@
+import { WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export declare function allDayDateKey(iso: string): string;
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export declare function allDayInstant(dateKey: string): string;
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export declare function addDaysToKey(dateKey: string, days: number): string;
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export declare function localDateKey(day: Date): string;
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export declare function recurrenceUntilInstant(dateKey: string, allDay: boolean): string;
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export declare function recurrenceUntilDateKey(until: string, allDay: boolean): string;
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export declare function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined;
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export declare function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean;
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export declare function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean;

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

@@ -0,0 +1,111 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+const MS_PER_DAY = 86400000;
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export function allDayDateKey(iso) {
+    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
+    return new Date(rounded).toISOString().slice(0, 10);
+}
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export function allDayInstant(dateKey) {
+    return `${dateKey}T00:00:00.000Z`;
+}
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey, days) {
+    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
+}
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export function localDateKey(day) {
+    return format(day, "yyyy-MM-dd");
+}
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export function recurrenceUntilInstant(dateKey, allDay) {
+    if (allDay) {
+        return `${dateKey}T23:59:59.999Z`;
+    }
+    const [y, m, d] = dateKey.split("-").map(Number);
+    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
+}
+/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
+const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
+/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
+const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export function recurrenceUntilDateKey(until, allDay) {
+    if (allDay) {
+        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
+        if (stored) {
+            return stored[1];
+        }
+    }
+    return format(new Date(until), "yyyy-MM-dd");
+}
+/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
+const JS_WEEKDAY_CODES = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export function startWeekdayCode(start, allDay, timezone) {
+    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
+    if (Number.isNaN(ms)) {
+        return undefined;
+    }
+    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
+}
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export function occursOnDay(occurrence, day) {
+    if (occurrence.allDay) {
+        const key = localDateKey(day);
+        const startKey = allDayDateKey(occurrence.startDate);
+        const endKey = allDayDateKey(occurrence.endDate);
+        return key === startKey || (key > startKey && key < endKey);
+    }
+    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    if (start.getTime() === end.getTime()) {
+        return start >= dayStart && start < dayEnd;
+    }
+    return start < dayEnd && end > dayStart;
+}
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export function startsOnDay(occurrence, day) {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.d.ts

@@ -0,0 +1,40 @@
+import React, { PropsWithChildren } from "react";
+import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { AppShellProps } from "../../layout/AppShell.js";
+export type CalendarShellProps = Omit<AppShellProps, "active">;
+/** One mailbox's own `calendar`-type folders. `error` is set (and `calendarFolders` left empty) when that
+ * mailbox's own `listFolders()` failed - one mailbox's failure never hides every other mailbox's calendars. */
+export interface MailboxCalendars {
+    mailbox: Mailbox;
+    calendarFolders: Folder[];
+    error?: string;
+}
+export interface CalendarShellContextValue {
+    /** The default mailbox for "+ New event" (`?mailboxUid=` if accessible, else the caller's own mailbox,
+     * else the first accessible one) - every accessible mailbox's calendars are shown regardless. */
+    mailboxUid?: string;
+    /** `mailboxUid`'s first `calendar`-type folder - the default target for "+ New event". */
+    folderUid?: string;
+    /** Every accessible mailbox's `calendar`-type folders, flattened - the set of calendars that can be
+     * checked/shown (see `CalendarListSidebar`). Each folder's own `mailboxUid` says which mailbox it's in. */
+    calendarFolders: Folder[];
+    /** The same folders, grouped per mailbox, for the sidebar's per-mailbox sections. */
+    mailboxCalendars: MailboxCalendars[];
+    mailboxes: Mailbox[];
+    /** Re-fetches every mailbox's folders (e.g. after creating a new calendar) without a full reload. */
+    reloadFolders: () => void;
+    /** The display color for a calendar folder: its own `color`, else the default for the caller's own
+     * mailbox, else its mailbox's `accentColorForMailbox()` - so a shared mailbox's calendar is visually
+     * distinct from the caller's own even when neither has a color set. */
+    colorFor: (folder: Folder) => string;
+}
+/** Reads the calendars the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
+export declare function useCalendarShell(): CalendarShellContextValue;
+/**
+ * The Calendar app's shell. Fetches every accessible mailbox's calendar folders in parallel so shared
+ * mailboxes' calendars show alongside the caller's own, each mailbox color-coded (see `colorFor`) - there
+ * is no mailbox switcher. The actual view being looked at (month/week/day, and which one) is *not* shell
+ * state — it lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between
+ * views/dates must be instant (no full page reload) and this framework has no client-side router.
+ */
+export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<CalendarShellProps>): React.JSX.Element;

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -29,7 +29,7 @@ export function useCalendarShell() {
  * state — it lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between
  * views/dates must be instant (no full page reload) and this framework has no client-side router.
  */
-export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
@@ -62,7 +62,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
             return;
         }
         let cancelled = false;
-        Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
+        void Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
             .then((folders) => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))
             .catch((err) => ({
             mailbox,
@@ -100,5 +100,5 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
     else if (userUid && status === "ready") {
         inner = (_jsx("div", { className: "flex-1 min-w-0 flex flex-col", children: _jsx(CalendarShellContext.Provider, { value: contextValue, children: children }) }));
     }
-    return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+    return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, pluginNav: pluginNav, children: inner }));
 }

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+export interface ContactDetailPaneProps {
+    contact: Contact;
+    onEdit: () => void;
+    onDelete: () => void;
+    /** Present only on the mobile detail route — renders a "back to contacts" link above the header. Absent
+     * on the desktop inline pane, which never navigates away (selecting a different contact just swaps
+     * `contact` in place). */
+    backHref?: string;
+    /** Called after one of the contact's key changes was accepted or kept, or turned out to be stale - the caller
+     * re-reads the contact. */
+    onKeysChanged?: () => void;
+    /** `false` when the reader is known not to be able to change this contact's keys (the actions are hidden); `undefined`
+     * when unknown (they're hidden after a 403). */
+    canResolveKeys?: boolean;
+}
+/**
+ * A contact's read-only detail view. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`,
+ * 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, backHref, onKeysChanged, canResolveKeys }: ContactDetailPaneProps): React.JSX.Element;

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

@@ -1,20 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
+import KeyChangeReview from "./KeyChangeReview.js";
+import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.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. */
 function formatFingerprint(fingerprint) {
     return fingerprint.match(/.{1,4}/g)?.join(" ") ?? fingerprint;
 }
+/** A revoked key's reason: a superseded key was routinely replaced, a revoked one must not be trusted. */
+function RevocationBadge({ label }) {
+    if (!label) {
+        return null;
+    }
+    return _jsxs("span", { className: label === "superseded" ? "text-text-muted" : "text-danger", children: [" (", label, ")"] });
+}
 /**
  * A contact's read-only detail view. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`,
  * 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, backHref }) {
-    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: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", 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: onDelete, 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, " ", _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 || contact.keyConflict ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), contact.keyConflict && (_jsx("div", { className: "mb-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["A different encryption key was observed for this contact on", " ", new Date(contact.keyConflict.observedAt).toLocaleDateString(), ". The previously verified key below is still the one in use \u2014 this is routine after a device change or reinstall, but it\u2019s also what a real attack looks like, so verify the new fingerprint with ", contact.displayName, " ", "directly (e.g. by phone) before trusting it. There is no automatic way to accept or reject this yet."] }), _jsxs("p", { className: "font-mono text-xs", children: ["Newly observed: ", formatFingerprint(contact.keyConflict.observedFingerprint)] })] }) })), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, canResolveKeys }) {
+    // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
+    const [keyNotice, setKeyNotice] = useState(null);
+    const notice = keyNotice?.contactUid === contact.uid ? keyNotice.text : null;
+    const keyConflicts = contact.keyConflicts ?? [];
+    const previousKeys = contact.previousKeys ?? [];
+    // Pinned signing keys vouch for signatures, so the pinned-signer cache is dropped along with re-reading the contact.
+    function refresh(text) {
+        setKeyNotice({ contactUid: contact.uid, text });
+        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: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", 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: onDelete, 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, " ", _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: {
+                                                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));
+                            }), 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), key.revokedAt && _jsx("span", { className: "text-danger", children: " (revoked)" })] }, key.fingerprint)))] })) : null] })] }));
+                                    : "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] })] }));
 }