@rapidmx/web-client 0.22.0 → 0.24.0

package/dist/apps/shared/components/mail/invite/inviteFormat.js

@@ -1,3 +1,4 @@
+import { describeTimeZone, deviceTimeZone } from "../../../../../lib/util/timeZone.js";
 import { APP_HREFS } from "../../../navigation/appHrefs.js";
 /** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
  * or by name, since mail clients disagree about which one they set (`text/calendar`, `application/ics`, or a bare `.ics` as octet-stream). */
@@ -43,15 +44,15 @@ export function formatInviteWhen(invite) {
     }
     const date = new Intl.DateTimeFormat(undefined, DAY_FORMAT);
     const time = new Intl.DateTimeFormat(undefined, CLOCK_FORMAT);
-    // The zone is named once, after the last time shown: the times are the reader's own, not the organizer's.
-    const timeAndZone = new Intl.DateTimeFormat(undefined, { ...CLOCK_FORMAT, timeZoneName: "short" });
+    // The zone is named once, in full, after the last time shown: the times are the reader's own, not the organizer's.
+    const zone = describeTimeZone(deviceTimeZone(), end ?? start);
     const startDay = date.format(start);
     if (!end) {
-        return `${startDay}, ${timeAndZone.format(start)}`;
+        return `${startDay}, ${time.format(start)} • ${zone}`;
     }
     return startDay === date.format(end)
-        ? `${startDay}, ${time.format(start)} - ${timeAndZone.format(end)}`
-        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${timeAndZone.format(end)}`;
+        ? `${startDay}, ${time.format(start)} - ${time.format(end)} • ${zone}`
+        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${time.format(end)} • ${zone}`;
 }
 /** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */
 export function formatRowStart(invite) {

package/dist/apps/shared/components/mail/reading/conversationPrint.d.ts

@@ -0,0 +1,15 @@
+import { type Message } from "../../../../../lib/mail/mailApi.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import type { PrintableMessage } from "./printMessage.js";
+/** The header lines printed above a message's body. */
+export declare function printHeaders(message: Message, from: string): PrintableMessage["headers"];
+/**
+ * The messages of `message`'s conversation that came before it, newest first - the order they follow it in a printed conversation. A conversation
+ * the server has no id for (or one that can't be read) has none: the message prints alone.
+ */
+export declare function olderConversationMessages(message: Message, client?: ApiClient): Promise<Message[]>;
+/**
+ * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
+ * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext.
+ */
+export declare function printableOlderMessage(message: Message): Promise<PrintableMessage>;

package/dist/apps/shared/components/mail/reading/conversationPrint.js

@@ -0,0 +1,69 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { getUnlockedKeys } from "../../../../../lib/crypto/keySession.js";
+import { listConversationMessages } from "../../../../../lib/mail/conversationsApi.js";
+import { formatMailAddress } from "../../../../../lib/mail/mailAddress.js";
+import { getMessageRawContent, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { fetchBodyContent } from "./bodyContent.js";
+import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./EncryptedPreview.js";
+const format = (list) => list.map((r) => formatMailAddress(r)).join(", ");
+/** The header lines printed above a message's body. */
+export function printHeaders(message, from) {
+    return [
+        { name: "From", value: from },
+        { name: "To", value: format(message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")) },
+        { name: "Cc", value: format(message.recipients.filter((r) => r.type === "cc")) },
+        { name: "Date", value: new Date(message.receivedDate).toLocaleString() },
+    ];
+}
+/**
+ * The messages of `message`'s conversation that came before it, newest first - the order they follow it in a printed conversation. A conversation
+ * the server has no id for (or one that can't be read) has none: the message prints alone.
+ */
+export async function olderConversationMessages(message, client) {
+    if (!message.conversationId) {
+        return [];
+    }
+    const thread = await listConversationMessages(message.mailboxUid, message.conversationId, { limit: 500 }, client);
+    const sent = new Date(message.receivedDate).getTime();
+    return thread
+        .filter((other) => other.uid !== message.uid && new Date(other.receivedDate).getTime() <= sent)
+        .sort((a, b) => new Date(b.receivedDate).getTime() - new Date(a.receivedDate).getTime());
+}
+/**
+ * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
+ * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext.
+ */
+export async function printableOlderMessage(message) {
+    const attachments = await listAttachments(message.folderUid, message.uid).catch(() => []);
+    if (message.encrypted) {
+        const unlocked = getUnlockedKeys(message.mailboxUid);
+        if (unlocked) {
+            const { evaluateMessageSecurity } = await import("../../../../../lib/crypto/messageSecurity.js");
+            const security = await evaluateMessageSecurity(await getMessageRawContent(message.uid), unlocked);
+            const content = security.text !== undefined ? { kind: "text", text: security.text } : security.html !== undefined ? { kind: "html", html: security.html } : undefined;
+            if (content) {
+                return {
+                    subject: (message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? security.subject : undefined) || displaySubject(message.subject) || "(no subject)",
+                    headers: printHeaders(message, formatMailAddress(message.from)),
+                    content,
+                    attachments,
+                    inlineParts: security.attachments,
+                };
+            }
+        }
+        return {
+            subject: displaySubject(message.subject) || "(no subject)",
+            headers: printHeaders(message, formatMailAddress(message.from)),
+            content: { kind: "text", text: "This message is encrypted and could not be decrypted, so it is not printed." },
+        };
+    }
+    return {
+        subject: message.subject || "(no subject)",
+        headers: printHeaders(message, formatMailAddress(message.from)),
+        content: await fetchBodyContent(message.uid, message.version),
+        attachments,
+    };
+}

package/dist/apps/shared/components/mail/reading/printMessage.d.ts

@@ -2,7 +2,7 @@ import type { Attachment } from "../../../../../lib/mail/mailApi.js";
 import type { MimeAttachment } from "../../../../../lib/crypto/mime.js";
 import { BodyContent } from "./bodyContent.js";
 /**
- * Printing one message: a document of its own - the message's header lines, and under them the same sanitized body the reading pane draws -
+ * Printing a message, and the conversation it belongs to: a document of its own - each message's header lines, and under them the same sanitized body the reading pane draws -
  * shown in a frame that nobody sees and printed from there, so the print is the message and not the app around it.
  *
  * The frame is as isolated as the reading pane's own (`frameDocument.ts`): the body has been through `prepareBodyHtml()`, the document
@@ -26,5 +26,11 @@ export declare function escapeHtml(text: string): string;
  * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
  */
 export declare function buildPrintDocument(message: PrintableMessage): string | undefined;
+/**
+ * The document to print for a conversation: `subject` as the title, then each of `messages` in the order given (the message that was asked for
+ * first, then the ones before it), each under its own header lines and set apart from the last. A message whose subject differs from the title
+ * says so under its rule. Only the first message is required to be printable: a later one too large to prepare is replaced by a note saying so.
+ */
+export declare function buildConversationPrintDocument(subject: string, messages: PrintableMessage[]): string | undefined;
 /** Prints `html` (from `buildPrintDocument()`) from a frame nobody sees, and removes the frame when the print is over. */
 export declare function printDocument(html: string): void;

package/dist/apps/shared/components/mail/reading/printMessage.js

@@ -9,6 +9,8 @@ dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12
 dt{font-weight:600;color:#444}
 dd{margin:0;overflow-wrap:anywhere}
 hr{border:0;border-top:1px solid #999;margin:0 0 16px}
+h2{font-size:16px;margin:0 0 12px}
+.rr-older{margin-top:28px;padding-top:20px;border-top:2px solid #000;break-inside:auto}
 #rr-body{overflow-wrap:break-word}
 #rr-body img{max-width:100%;height:auto}
 #rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
@@ -16,10 +18,8 @@ hr{border:0;border-top:1px solid #999;margin:0 0 16px}
 export function escapeHtml(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-/**
- * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
- */
-export function buildPrintDocument(message) {
+/** One message's header lines and body, or `undefined` for a body too large to prepare (the pane does not draw it either). */
+function renderSection(message) {
     let body;
     let imageSource;
     if (message.content.kind === "html") {
@@ -38,13 +38,40 @@ export function buildPrintDocument(message) {
         .filter((header) => header.value !== "")
         .map((header) => `<dt>${escapeHtml(header.name)}</dt><dd>${escapeHtml(header.value)}</dd>`)
         .join("");
+    return { html: `<dl>${lines}</dl><hr>${body}`, imageSource };
+}
+/**
+ * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
+ */
+export function buildPrintDocument(message) {
+    return buildConversationPrintDocument(message.subject, [message]);
+}
+/**
+ * The document to print for a conversation: `subject` as the title, then each of `messages` in the order given (the message that was asked for
+ * first, then the ones before it), each under its own header lines and set apart from the last. A message whose subject differs from the title
+ * says so under its rule. Only the first message is required to be printable: a later one too large to prepare is replaced by a note saying so.
+ */
+export function buildConversationPrintDocument(subject, messages) {
+    const sections = [];
+    let imageSource;
+    for (const [index, message] of messages.entries()) {
+        const section = renderSection(message);
+        if (section === undefined && index === 0) {
+            return undefined;
+        }
+        imageSource ?? (imageSource = section?.imageSource);
+        const html = section?.html ?? `<p>${escapeHtml(`"${message.subject}" is too large to print here.`)}</p>`;
+        sections.push(index === 0
+            ? html
+            : `<div class="rr-older">${message.subject !== subject ? `<h2>${escapeHtml(message.subject)}</h2>` : ""}${html}</div>`);
+    }
     return [
         "<!doctype html>",
         '<html lang="en"><head><meta charset="utf-8">',
         `<meta http-equiv="Content-Security-Policy" content="${frameCsp(imageSource)}">`,
-        `<title>${escapeHtml(message.subject)}</title>`,
+        `<title>${escapeHtml(subject)}</title>`,
         `<style>${PRINT_CSS}</style></head>`,
-        `<body><h1>${escapeHtml(message.subject)}</h1><dl>${lines}</dl><hr>${body}</body></html>`,
+        `<body><h1>${escapeHtml(subject)}</h1>${sections.join("")}</body></html>`,
     ].join("");
 }
 /** How long a print frame is kept when the browser never says it has finished with it (`afterprint`). */

package/dist/apps/shared/keyboard/keymap.d.ts

@@ -107,6 +107,12 @@ export declare const SHORTCUTS: {
             label: string;
             scope: "mail";
         };
+        readonly permanentDelete: {
+            id: string;
+            keys: string[];
+            label: string;
+            scope: "mail";
+        };
         readonly archive: {
             id: string;
             keys: string[];

package/dist/apps/shared/keyboard/keymap.js

@@ -38,6 +38,7 @@ export const SHORTCUTS = {
         replyAll: def({ id: "mail.replyAll", keys: ["mod+shift+r"], label: "Reply all", scope: "mail" }),
         forward: def({ id: "mail.forward", keys: ["mod+shift+f"], label: "Forward", scope: "mail" }),
         delete: def({ id: "mail.delete", keys: ["mod+d", "delete"], label: "Delete", scope: "mail" }),
+        permanentDelete: def({ id: "mail.permanentDelete", keys: ["shift+delete"], label: "Delete permanently", scope: "mail" }),
         archive: def({ id: "mail.archive", keys: ["e", "backspace"], label: "Archive", scope: "mail" }),
         move: def({ id: "mail.move", keys: ["mod+shift+v"], label: "Move to folder", scope: "mail" }),
         markRead: def({ id: "mail.markRead", keys: ["ctrl+q"], label: "Mark as read", scope: "mail" }),

package/dist/apps/shared/mail/decryptedMessages.d.ts

@@ -0,0 +1,27 @@
+/**
+ * What this device has recovered of encrypted messages by decrypting them: the real subject (the server only ever holds RFC 9788's `[...]`
+ * placeholder) and a short preview. Shared by every view that draws a message - the message list, the conversation list and the reading pane -
+ * so a message decrypted in one shows its subject in all of them. Held in memory only, keyed by message uid, and dropped for a mailbox the moment
+ * its keys are locked, exactly like the decrypted content it came from.
+ */
+export interface DecryptedMessage {
+    mailboxUid: string;
+    subject?: string;
+    preview?: string;
+}
+/** Plain text of decrypted HTML for a one-line preview. Only ever feeds text display, never markup. */
+export declare function previewOf(html: string): string;
+/** Remembers what was recovered of one message. Ignored when there is nothing new to show. */
+export declare function rememberDecrypted(uid: string, mailboxUid: string, found: {
+    subject?: string;
+    preview?: string;
+}): void;
+/** Every message decrypted so far, by uid; a new object whenever any changes. */
+export declare function useDecryptedMessages(): Record<string, DecryptedMessage>;
+/** A number that changes whenever a mailbox is unlocked - a dependency for effects that decrypt what they can. */
+export declare function useUnlockEpoch(): number;
+/**
+ * Decrypts one message to recover its subject and preview, when its mailbox's keys are unlocked and it isn't already known. Best effort: a
+ * message that can't be fetched or opened is simply left as it was. Never prompts.
+ */
+export declare function decryptForDisplay(uid: string, mailboxUid: string): Promise<void>;

package/dist/apps/shared/mail/decryptedMessages.js

@@ -0,0 +1,97 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useSyncExternalStore } from "react";
+import { getUnlockedKeys, subscribeKeySession } from "../../../lib/crypto/keySession.js";
+import { getMessageRawContent } from "../../../lib/mail/mailApi.js";
+const PREVIEW_MAX_LENGTH = 160;
+let entries = {};
+/** Bumped whenever a mailbox's keys are unlocked, so a view can retry decrypting what it couldn't before. */
+let unlockEpoch = 0;
+const listeners = new Set();
+const inFlight = new Set();
+function emit() {
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}
+subscribeKeySession(({ mailboxUid, state }) => {
+    if (state === "locked") {
+        const kept = Object.fromEntries(Object.entries(entries).filter(([, entry]) => entry.mailboxUid !== mailboxUid));
+        if (Object.keys(kept).length !== Object.keys(entries).length) {
+            entries = kept;
+        }
+    }
+    else {
+        unlockEpoch++;
+    }
+    emit();
+});
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Plain text of decrypted HTML for a one-line preview. Only ever feeds text display, never markup. */
+export function previewOf(html) {
+    return html
+        .replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, " ")
+        .replace(/<[^>]+>/g, " ")
+        .replace(/&nbsp;/gi, " ")
+        .replace(/&amp;/gi, "&")
+        .replace(/&lt;/gi, "<")
+        .replace(/&gt;/gi, ">")
+        .replace(/&quot;/gi, '"')
+        .replace(/&#0*39;/gi, "'")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, PREVIEW_MAX_LENGTH);
+}
+/** Remembers what was recovered of one message. Ignored when there is nothing new to show. */
+export function rememberDecrypted(uid, mailboxUid, found) {
+    if (!found.subject && !found.preview) {
+        return;
+    }
+    const current = entries[uid];
+    if (current && current.subject === found.subject && current.preview === found.preview) {
+        return;
+    }
+    entries = { ...entries, [uid]: { mailboxUid, subject: found.subject, preview: found.preview } };
+    emit();
+}
+/** Every message decrypted so far, by uid; a new object whenever any changes. */
+export function useDecryptedMessages() {
+    return useSyncExternalStore(subscribe, () => entries);
+}
+/** A number that changes whenever a mailbox is unlocked - a dependency for effects that decrypt what they can. */
+export function useUnlockEpoch() {
+    return useSyncExternalStore(subscribe, () => unlockEpoch);
+}
+/**
+ * Decrypts one message to recover its subject and preview, when its mailbox's keys are unlocked and it isn't already known. Best effort: a
+ * message that can't be fetched or opened is simply left as it was. Never prompts.
+ */
+export async function decryptForDisplay(uid, mailboxUid) {
+    const unlocked = getUnlockedKeys(mailboxUid);
+    if (!unlocked || entries[uid] || inFlight.has(uid)) {
+        return;
+    }
+    inFlight.add(uid);
+    try {
+        const rawMime = await getMessageRawContent(uid);
+        const { evaluateMessageSecurity } = await import("../../../lib/crypto/messageSecurity.js");
+        const security = await evaluateMessageSecurity(rawMime, unlocked);
+        // A lock while this ran: the result must not go back on screen.
+        if (getUnlockedKeys(mailboxUid) === unlocked) {
+            rememberDecrypted(uid, mailboxUid, { subject: security.subject, preview: security.html ? previewOf(security.html) : security.text?.slice(0, PREVIEW_MAX_LENGTH) });
+        }
+    }
+    catch {
+        // Left as the placeholder.
+    }
+    finally {
+        inFlight.delete(uid);
+    }
+}

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

@@ -31,6 +31,7 @@ import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
+import { nextHalfHour } from "../../shared/components/calendar/timePicker.js";
 import { useSwipeSlide } from "../../shared/gestures/useSwipeSlide.js";
 import { useEnterSlide } from "../../shared/gestures/useEnterSlide.js";
 import { useWheelPaging } from "../../shared/gestures/useWheelPaging.js";
@@ -275,10 +276,12 @@ function CalendarContent({ userUid, bookingHref }) {
         if (!mailboxUid || !folderUid) {
             return;
         }
+        // With nothing clicked, the next half hour, for an hour.
+        const from = start ?? nextHalfHour(new Date());
         setModal({
             occurrence: null,
-            initialStart: start ?? new Date(),
-            initialEnd: end ?? new Date(Date.now() + 30 * 60000),
+            initialStart: from,
+            initialEnd: end ?? new Date(from.getTime() + 60 * 60000),
             targetFolderUid,
             anchor,
             initialAllDay,

package/dist/apps/www/index.js

@@ -32,6 +32,7 @@ import { setReadStateMany } from "../shared/mail/messageReadState.js";
 import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
+import { rememberDecrypted } from "../shared/mail/decryptedMessages.js";
 import ConversationList, { conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
 import InviteRowChip from "../shared/components/mail/invite/InviteRowChip.js";
@@ -101,6 +102,7 @@ async function decryptEncryptedRows(messages, unlocked) {
                 return null;
             }
             const preview = security.html ? stripHtmlToText(security.html).slice(0, LIST_PREVIEW_MAX_LENGTH) : undefined;
+            rememberDecrypted(message.uid, message.mailboxUid, { subject: security.subject, preview });
             return [message.uid, { subject: security.subject, preview }];
         }
         catch {
@@ -2076,11 +2078,19 @@ function InboxContent({ userUid }) {
         }
         await actOnKeyboardTargets(targets.filter((message) => !inDeletedItems(message)), (chosen) => moveToFolderOfType(chosen, "deleted_items", "Deleted Items"), true);
     }
+    /** Shift+Delete, from the keyboard: permanently deletes the targets wherever they are, after the same confirmation as Delete in Deleted Items. */
+    async function permanentDeleteFromKeyboard() {
+        const targets = await keyboardTargets();
+        if (targets.length > 0 && (await purgeChosen(targets)) && threadPane && !selectMode) {
+            closeOpenThread();
+        }
+    }
     useShortcut(SHORTCUTS.mail.next, () => selectNeighbour(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previous, () => selectNeighbour(-1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.nextUnread, () => selectNextUnread(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previousUnread, () => selectNextUnread(-1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.delete, () => void deleteFromKeyboard(), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.permanentDelete, () => void permanentDeleteFromKeyboard(), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.markRead, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, true, { patch: patchListedMessage, track: trackMessageChange }), false, isUnread), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.markUnread, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, false, { patch: patchListedMessage, track: trackMessageChange }), false, (message) => !isUnread(message)), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.flag, () => 

package/dist/apps/www/settings/profile/index.js

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import { useMemo, useState } from "react";
 import { freeBusyVisibilityOf, isSharedWithMe, updateMailbox } from "../../../../lib/mail/mailApi.js";
-import { DEFAULT_TIME_ZONE, deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
+import TimeZonePicker from "../../../../lib/components/pickers/TimeZonePicker.js";
+import { DEFAULT_TIME_ZONE, describeTimeZone, deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
 import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Button from "../../../../lib/components/buttons/Button.js";
@@ -112,13 +113,13 @@ function ProfileContent() {
                                         setDisplayName(e.target.value);
                                         setNameError(null);
                                         setSaved(false);
-                                    }, "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? "profile-display-name-error" : "profile-display-name-help" }), nameError && (_jsx("p", { id: "profile-display-name-error", role: "alert", className: "mt-1 text-xs text-danger", children: nameError })), _jsx("p", { id: "profile-display-name-help", className: "mt-1 text-xs text-text-muted", children: "The sender name on mail you send, shown to recipients beside your address (for example \u201CJane Doe\u201D). It can\u2019t contain an \u201C@\u201D." })] }), _jsxs(FormField, { label: "Time zone", htmlFor: "profile-time-zone", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { id: "profile-time-zone", className: SELECT_CLASS, value: timezone, onChange: (e) => {
-                                                setTimezone(e.target.value);
+                                    }, "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? "profile-display-name-error" : "profile-display-name-help" }), nameError && (_jsx("p", { id: "profile-display-name-error", role: "alert", className: "mt-1 text-xs text-danger", children: nameError })), _jsx("p", { id: "profile-display-name-help", className: "mt-1 text-xs text-text-muted", children: "The sender name on mail you send, shown to recipients beside your address (for example \u201CJane Doe\u201D). It can\u2019t contain an \u201C@\u201D." })] }), _jsxs(FormField, { label: "Time zone", htmlFor: "profile-time-zone", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(TimeZonePicker, { id: "profile-time-zone", className: SELECT_CLASS, value: timezone, zones: zones, onChange: (zone) => {
+                                                setTimezone(zone);
                                                 setSaved(false);
-                                            }, "aria-describedby": "profile-time-zone-help", children: zones.map((zone) => (_jsx("option", { value: zone, children: zone }, zone))) }), timezone !== deviceZone && (_jsxs(Button, { type: "button", variant: "text", className: "!w-auto", onClick: () => {
+                                            }, "aria-describedby": "profile-time-zone-help" }), timezone !== deviceZone && (_jsxs(Button, { type: "button", variant: "text", className: "!w-auto", onClick: () => {
                                                 setTimezone(deviceZone);
                                                 setSaved(false);
-                                            }, children: ["Use this device\u2019s time zone (", deviceZone, ")"] }))] }), zoneWasPreselected && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Your mailbox has no time zone chosen yet; this device\u2019s is preselected. Save to keep it." })), _jsx("p", { id: "profile-time-zone-help", className: "mt-1 text-xs text-text-muted", children: "How calendar times and reminders are shown and scheduled for this mailbox, such as when an event or a reminder falls." })] }), _jsxs(FormField, { label: "Free/busy visibility", htmlFor: "profile-free-busy", children: [_jsx("select", { id: "profile-free-busy", className: SELECT_CLASS, value: freeBusy, disabled: !canChangeFreeBusy, onChange: (e) => {
+                                            }, children: ["Use this device\u2019s time zone (", describeTimeZone(deviceZone), ")"] }))] }), zoneWasPreselected && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Your mailbox has no time zone chosen yet; this device\u2019s is preselected. Save to keep it." })), _jsx("p", { id: "profile-time-zone-help", className: "mt-1 text-xs text-text-muted", children: "How calendar times and reminders are shown and scheduled for this mailbox, such as when an event or a reminder falls." })] }), _jsxs(FormField, { label: "Free/busy visibility", htmlFor: "profile-free-busy", children: [_jsx("select", { id: "profile-free-busy", className: SELECT_CLASS, value: freeBusy, disabled: !canChangeFreeBusy, onChange: (e) => {
                                         setFreeBusy(e.target.value);
                                         setSaved(false);
                                     }, "aria-describedby": "profile-free-busy-help", children: FREE_BUSY_CHOICES.map((choice) => (_jsx("option", { value: choice.value, children: choice.label }, choice.value))) }), _jsx("p", { id: "profile-free-busy-help", className: "mt-1 text-xs text-text-muted", children: FREE_BUSY_CHOICES.find((choice) => choice.value === freeBusy).help }), _jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Who can see the hours you are busy when they look for a time to meet - never the title, place or guests of an event." }), !canChangeFreeBusy && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "This mailbox is shared with you: only its owner can change who sees its free/busy times." }))] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));

package/dist/lib/auth/session.d.ts

@@ -17,6 +17,18 @@ export declare const SESSION_RELOAD_GUARD_MS: number;
  * @returns `true` when a refresh was made, `false` when one was not needed.
  */
 export declare function refreshSession(authServerUrl: string, force?: boolean): Promise<boolean>;
+/** How long the outcome of a recovery is reused for: requests that fail together share one refresh, and a session that will not come back is not asked again at once. */
+export declare const SESSION_RECOVERY_COOLDOWN_MS: number;
+/**
+ * Renews the session because a request was refused for lack of one, whatever this browser's record of the last refresh says. Every request
+ * refused at about the same time shares one refresh, and its outcome is reused for `SESSION_RECOVERY_COOLDOWN_MS`. A refusal also clears the record of
+ * the last refresh, so the next regular check asks again (and sends the browser to sign-in if the refresh token is truly gone).
+ *
+ * @returns Whether the session was renewed.
+ */
+export declare function recoverSession(authServerUrl: string): Promise<boolean>;
+/** Forgets what recoveries have done (for tests). */
+export declare function resetSessionRecovery(): void;
 /**
  * Redirects the browser to auth-server's sign-in page when `userUid` is absent, carrying the current URL as
  * `return_to` so auth-server can send the browser back here afterward. A no-op once `userUid` is present.
@@ -51,7 +63,8 @@ export interface SessionRefreshOptions {
  * lifetime, or reopened later): attempts one silent refresh and reloads so the server renders the page with the new
  * cookie. If the refresh is refused (the refresh token expired or was revoked, or there was none), or a reload just
  * made still found no session, redirects to sign-in as `useRedirectIfUnauthenticated()` does.
- * - `userUid` set: refreshes once the token is `SESSION_REFRESH_AFTER_MS` old (and right away when this browser has no
+ * - `userUid` set: also renews the session when a request is refused for lack of one (`apiFetch()` asks `recoverSession()` and sends the request
+ * again), so a token that ran out while timers were stopped costs nothing. Refreshes once the token is `SESSION_REFRESH_AFTER_MS` old (and right away when this browser has no
  * record of a recent refresh, since the page's token age is unknown), checked every `SESSION_REFRESH_CHECK_MS` and
  * whenever the tab becomes visible or the network returns, because a sleeping laptop stops timers. A failure that is
  * not a rejection is simply retried at the next check. A rejection (`401`/`403`: the refresh token expired or was

package/dist/lib/auth/session.js

@@ -15,7 +15,7 @@
  * sign-out already has.
  */
 import { useEffect, useRef } from "react";
-import { ApiRequestError, authApiFetch } from "../util/api.js";
+import { ApiRequestError, authApiFetch, setApiSessionRecovery } from "../util/api.js";
 import { useApiClient } from "../util/apiClientContext.js";
 /** An access token's age at which it is refreshed. The token lives an hour; the margin leaves time to retry a failed refresh. */
 export const SESSION_REFRESH_AFTER_MS = 45 * 60 * 1000;
@@ -71,6 +71,38 @@ export async function refreshSession(authServerUrl, force = false) {
     const locks = typeof navigator === "undefined" ? undefined : navigator.locks;
     return locks ? locks.request(LOCK_NAME, run) : run();
 }
+/** How long the outcome of a recovery is reused for: requests that fail together share one refresh, and a session that will not come back is not asked again at once. */
+export const SESSION_RECOVERY_COOLDOWN_MS = 10 * 1000;
+let recovery;
+let lastRecovery;
+/**
+ * Renews the session because a request was refused for lack of one, whatever this browser's record of the last refresh says. Every request
+ * refused at about the same time shares one refresh, and its outcome is reused for `SESSION_RECOVERY_COOLDOWN_MS`. A refusal also clears the record of
+ * the last refresh, so the next regular check asks again (and sends the browser to sign-in if the refresh token is truly gone).
+ *
+ * @returns Whether the session was renewed.
+ */
+export function recoverSession(authServerUrl) {
+    if (lastRecovery && Date.now() - lastRecovery.at < SESSION_RECOVERY_COOLDOWN_MS) {
+        return Promise.resolve(lastRecovery.renewed);
+    }
+    recovery ?? (recovery = refreshSession(authServerUrl, true)
+        .then(() => true, () => {
+        writeTimestamp(() => localStorage, REFRESHED_AT_KEY, 0);
+        return false;
+    })
+        .then((renewed) => {
+        lastRecovery = { at: Date.now(), renewed };
+        recovery = undefined;
+        return renewed;
+    }));
+    return recovery;
+}
+/** Forgets what recoveries have done (for tests). */
+export function resetSessionRecovery() {
+    recovery = undefined;
+    lastRecovery = undefined;
+}
 /** Whether `err` says auth-server rejected the refresh token itself, as opposed to a failure worth retrying. */
 function isAuthRejection(err) {
     return err instanceof ApiRequestError && (err.status === 401 || err.status === 403);
@@ -106,7 +138,8 @@ export function useRedirectIfUnauthenticated(userUid, authServerUrl) {
  * lifetime, or reopened later): attempts one silent refresh and reloads so the server renders the page with the new
  * cookie. If the refresh is refused (the refresh token expired or was revoked, or there was none), or a reload just
  * made still found no session, redirects to sign-in as `useRedirectIfUnauthenticated()` does.
- * - `userUid` set: refreshes once the token is `SESSION_REFRESH_AFTER_MS` old (and right away when this browser has no
+ * - `userUid` set: also renews the session when a request is refused for lack of one (`apiFetch()` asks `recoverSession()` and sends the request
+ * again), so a token that ran out while timers were stopped costs nothing. Refreshes once the token is `SESSION_REFRESH_AFTER_MS` old (and right away when this browser has no
  * record of a recent refresh, since the page's token age is unknown), checked every `SESSION_REFRESH_CHECK_MS` and
  * whenever the tab becomes visible or the network returns, because a sleeping laptop stops timers. A failure that is
  * not a rejection is simply retried at the next check. A rejection (`401`/`403`: the refresh token expired or was
@@ -143,7 +176,8 @@ export function useSessionRefresh(userUid, authServerUrl, options = {}) {
                 window.location.href = signInUrl(authServerUrl);
                 return;
             }
-            refreshSession(authServerUrl)
+            // Forced: the page has no session, so what this browser remembers of the last refresh says nothing about whether one is due.
+            refreshSession(authServerUrl, true)
                 .then(() => {
                 if (!cancelled) {
                     writeTimestamp(() => sessionStorage, RELOADED_AT_KEY, Date.now());
@@ -162,6 +196,8 @@ export function useSessionRefresh(userUid, authServerUrl, options = {}) {
         if (paused) {
             return;
         }
+        // A request the server refuses for lack of a session renews it (see `apiFetch()`), instead of waiting for the next check.
+        setApiSessionRecovery(() => recoverSession(authServerUrl));
         let leaving = false;
         let inFlight = false;
         const leave = async () => {
@@ -202,6 +238,7 @@ export function useSessionRefresh(userUid, authServerUrl, options = {}) {
         window.addEventListener("online", check);
         return () => {
             cancelled = true;
+            setApiSessionRecovery(undefined);
             window.clearInterval(interval);
             document.removeEventListener("visibilitychange", onVisible);
             window.removeEventListener("online", check);

package/dist/lib/components/pickers/TimeZonePicker.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface TimeZonePickerProps {
+    id?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    /** The chosen zone (an IANA id). */
+    value: string;
+    /** The zones to choose between; the list orders them itself. */
+    zones: string[];
+    onChange: (zone: string) => void;
+    /** The date each zone's offset is read on (daylight saving); now unless a date matters. */
+    at?: Date;
+    className?: string;
+}
+/**
+ * A time zone chooser that lists zones as "Los Angeles, America (GMT-07:00)", west to east and then by city, and has a search box in the list: typing narrows it to the zones whose
+ * name or offset contains every word typed ("berlin", "gmt+9", "america indiana"). A button showing the chosen zone opens it; the arrow keys move
+ * through the list, Enter chooses, and Escape (or a click elsewhere) closes it without changing anything.
+ */
+export default function TimeZonePicker({ id, "aria-label": label, "aria-describedby": describedBy, value, zones, onChange, at, className }: TimeZonePickerProps): React.JSX.Element;