@rapidmx/web-client 0.23.0 → 0.24.0

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

@@ -169,6 +169,19 @@ export function formatStoredWhen(startDate, endDate, allDay, now = new Date()) {
     }
     return formatWhen(new Date(startDate), new Date(endDate), false, now);
 }
+/** The date the form's start falls on, for reading a zone's offset as it will be for the event (daylight saving); now while there is no date. */
+export function zoneDate(start) {
+    const day = new Date(`${start.slice(0, 10)}T12:00:00Z`);
+    return Number.isNaN(day.getTime()) ? new Date() : day;
+}
+/** `formatWhen()` for a stored timed event as `zone`'s clock reads it, whatever zone the viewer is in. */
+export function formatStoredWhenInZone(startDate, endDate, zone, now = new Date()) {
+    const onZoneClock = (iso) => {
+        const wall = new Date(toEventWallClock(new Date(iso).getTime(), zone, false));
+        return new Date(wall.getUTCFullYear(), wall.getUTCMonth(), wall.getUTCDate(), wall.getUTCHours(), wall.getUTCMinutes());
+    };
+    return formatWhen(onZoneClock(startDate), onZoneClock(endDate), false, now);
+}
 /** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
  * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
  * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */

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

@@ -0,0 +1,31 @@
+/** The step between the times a time field offers. */
+export declare const TIME_STEP_MINUTES = 15;
+/**
+ * The start a new event gets when nothing was clicked: the next half hour (11:12 becomes 11:30; a time already on the half hour stays), with the
+ * event lasting an hour from there.
+ */
+export declare function nextHalfHour(now: Date): Date;
+/** `HH:mm` (24 hour) as a 12 hour clock reading: "13:05" is "1:05 PM". */
+export declare function formatTimeOfDay(time: string): string;
+/**
+ * What was typed into a time field as `HH:mm`, or `null` when it isn't a time. Takes 24 hour and 12 hour readings, with or without the colon and
+ * the space: "15:45", "3:45 pm", "3:45p", "345pm", "1130" and a bare hour such as "9" (9:00) are all times.
+ */
+export declare function parseTimeInput(text: string): string | null;
+/** Every time of a day, a quarter hour apart, as `HH:mm`. */
+export declare function dayTimes(): string[];
+/** A length of time as a menu says it: "15 mins", "1 hr", "1.5 hrs", "2 hrs". */
+export declare function formatDuration(minutes: number): string;
+export interface EndTimeOption {
+    /** The end as `YYYY-MM-DDTHH:mm`. */
+    value: string;
+    /** The time of day, as a 12 hour clock reading. */
+    label: string;
+    /** How long the event would last, "(1.5 hrs)". */
+    hint: string;
+}
+/**
+ * The ends a time field offers for an event starting at `start` (`YYYY-MM-DDTHH:mm`): each quarter hour on the clock after the start, up to a
+ * day later, with the length of the event that end would make.
+ */
+export declare function endTimeOptions(start: string): EndTimeOption[];

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

@@ -0,0 +1,89 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+/** The step between the times a time field offers. */
+export const TIME_STEP_MINUTES = 15;
+const MS_PER_MINUTE = 60000;
+/**
+ * The start a new event gets when nothing was clicked: the next half hour (11:12 becomes 11:30; a time already on the half hour stays), with the
+ * event lasting an hour from there.
+ */
+export function nextHalfHour(now) {
+    const slot = 30 * MS_PER_MINUTE;
+    return new Date(Math.ceil(now.getTime() / slot) * slot);
+}
+/** `HH:mm` (24 hour) as a 12 hour clock reading: "13:05" is "1:05 PM". */
+export function formatTimeOfDay(time) {
+    // A cleared date leaves no time to read: the field is empty, not an error.
+    if (!/^\d\d:\d\d$/.test(time)) {
+        return "";
+    }
+    const [hours, minutes] = time.split(":").map(Number);
+    return format(new Date(2000, 0, 1, hours, minutes), "h:mm a");
+}
+/**
+ * What was typed into a time field as `HH:mm`, or `null` when it isn't a time. Takes 24 hour and 12 hour readings, with or without the colon and
+ * the space: "15:45", "3:45 pm", "3:45p", "345pm", "1130" and a bare hour such as "9" (9:00) are all times.
+ */
+export function parseTimeInput(text) {
+    const match = /^\s*(\d{1,2})(?::?(\d{2}))?\s*(?:([ap])\.?m?\.?)?\s*$/i.exec(text);
+    if (!match) {
+        return null;
+    }
+    let hours = Number(match[1]);
+    const minutes = match[2] === undefined ? 0 : Number(match[2]);
+    const meridiem = match[3]?.toLowerCase();
+    if (minutes > 59) {
+        return null;
+    }
+    if (meridiem) {
+        if (hours < 1 || hours > 12) {
+            return null;
+        }
+        hours = (hours % 12) + (meridiem === "p" ? 12 : 0);
+    }
+    else if (hours > 23) {
+        return null;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+/** Every time of a day, a quarter hour apart, as `HH:mm`. */
+export function dayTimes() {
+    return Array.from({ length: (24 * 60) / TIME_STEP_MINUTES }, (_, i) => {
+        const minutes = i * TIME_STEP_MINUTES;
+        return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+    });
+}
+/** A length of time as a menu says it: "15 mins", "1 hr", "1.5 hrs", "2 hrs". */
+export function formatDuration(minutes) {
+    if (minutes < 60) {
+        return `${minutes} min${minutes === 1 ? "" : "s"}`;
+    }
+    const hours = Math.round((minutes / 60) * 100) / 100;
+    return `${hours} ${hours === 1 ? "hr" : "hrs"}`;
+}
+/** `YYYY-MM-DDTHH:mm` read as a wall clock, in minutes since the epoch (no zone: the daylight saving changes of a zone are not this field's business). */
+function wallMinutes(value) {
+    return Date.parse(`${value.slice(0, 16)}:00Z`) / MS_PER_MINUTE;
+}
+function wallString(minutes) {
+    return new Date(minutes * MS_PER_MINUTE).toISOString().slice(0, 16);
+}
+/**
+ * The ends a time field offers for an event starting at `start` (`YYYY-MM-DDTHH:mm`): each quarter hour on the clock after the start, up to a
+ * day later, with the length of the event that end would make.
+ */
+export function endTimeOptions(start) {
+    if (!/^\d{4}-\d\d-\d\dT\d\d:\d\d/.test(start)) {
+        return [];
+    }
+    const startMinutes = wallMinutes(start);
+    const options = [];
+    for (let at = Math.floor(startMinutes / TIME_STEP_MINUTES + 1) * TIME_STEP_MINUTES; at <= startMinutes + 24 * 60; at += TIME_STEP_MINUTES) {
+        const value = wallString(at);
+        options.push({ value, label: formatTimeOfDay(value.slice(11, 16)), hint: `(${formatDuration(at - startMinutes)})` });
+    }
+    return options;
+}

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/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/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;

package/dist/lib/components/pickers/TimeZonePicker.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { compareTimeZones, describeTimeZone } from "../../util/timeZone.js";
+/**
+ * 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 }) {
+    const listId = useId();
+    const root = useRef(null);
+    const trigger = useRef(null);
+    const search = useRef(null);
+    const selected = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(-1);
+    // Listed by the offsets shown (which move with daylight saving): west to east, then by city.
+    const entries = useMemo(() => [...zones]
+        .sort((a, b) => compareTimeZones(a, b, at))
+        .map((zone) => ({ zone, text: describeTimeZone(zone, at), haystack: `${describeTimeZone(zone, at)} ${zone.replace(/_/g, " ")}`.toLowerCase() })), [zones, at]);
+    const shown = useMemo(() => {
+        const words = query.toLowerCase().replace(/_/g, " ").split(/\s+/).filter(Boolean);
+        return words.length === 0 ? entries : entries.filter((entry) => words.every((word) => entry.haystack.includes(word)));
+    }, [entries, query]);
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        search.current?.focus();
+        selected.current?.scrollIntoView?.({ block: "center" });
+        const outside = (event) => {
+            if (!root.current?.contains(event.target)) {
+                close(false);
+            }
+        };
+        document.addEventListener("pointerdown", outside);
+        return () => document.removeEventListener("pointerdown", outside);
+    }, [open]);
+    function close(refocus) {
+        setOpen(false);
+        setQuery("");
+        setActive(-1);
+        if (refocus) {
+            trigger.current?.focus();
+        }
+    }
+    function choose(zone) {
+        if (zone !== value) {
+            onChange(zone);
+        }
+        close(true);
+    }
+    function move(step) {
+        setActive((index) => {
+            const from = index < 0 ? shown.findIndex((entry) => entry.zone === value) : index;
+            return Math.min(Math.max(from + step, 0), shown.length - 1);
+        });
+    }
+    function handleSearchKeyDown(event) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            move(event.key === "ArrowDown" ? 1 : -1);
+        }
+        else if (event.key === "Enter") {
+            // Never the form's own submit.
+            event.preventDefault();
+            const entry = shown[active >= 0 ? active : 0];
+            if (entry && (active >= 0 || shown.length === 1)) {
+                choose(entry.zone);
+            }
+        }
+        else if (event.key === "Escape") {
+            event.stopPropagation();
+            close(true);
+        }
+    }
+    return (_jsxs("div", { ref: root, className: "relative inline-block max-w-full", children: [_jsxs("button", { ref: trigger, id: id, type: "button", role: "combobox", "aria-label": label, "aria-describedby": describedBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, className: ["flex items-center justify-between gap-2 text-left", className].filter(Boolean).join(" "), onClick: () => setOpen((wasOpen) => !wasOpen), onKeyDown: (event) => {
+                    if (event.key === "ArrowDown" && !open) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, children: [_jsx("span", { className: "truncate", children: describeTimeZone(value, at) }), _jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "\u25BE" })] }), open && (_jsxs("div", { className: "absolute left-0 top-full z-30 mt-1 w-80 max-w-[90vw] rounded-md border border-border bg-surface shadow-lg", children: [_jsx("div", { className: "p-2", children: _jsx("input", { ref: search, type: "text", role: "searchbox", "aria-label": "Search time zones", "aria-controls": listId, "aria-activedescendant": active >= 0 ? `${listId}-${active}` : undefined, autoComplete: "off", placeholder: "Search", className: "w-full rounded-md border border-border bg-surface-alt px-3 py-1.5 text-sm text-text focus:border-primary focus:outline-none", value: query, onChange: (event) => {
+                                setQuery(event.target.value);
+                                setActive(-1);
+                            }, onKeyDown: handleSearchKeyDown }) }), _jsxs("ul", { id: listId, role: "listbox", "aria-label": "Time zones", className: "max-h-60 overflow-y-auto pb-1", children: [shown.map((entry, index) => (_jsx("li", { id: `${listId}-${index}`, ref: entry.zone === value ? selected : undefined, role: "option", "aria-selected": entry.zone === value, 
+                                // Before the search box's blur or the outside-click check, which would otherwise close the list first.
+                                onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    choose(entry.zone);
+                                }, className: [
+                                    "cursor-pointer px-3 py-1.5 text-sm hover:bg-surface-alt",
+                                    entry.zone === value ? "font-semibold text-primary-dark" : "",
+                                    index === active ? "bg-surface-alt" : "",
+                                ].join(" "), children: entry.text }, entry.zone))), shown.length === 0 && _jsx("li", { className: "px-3 py-1.5 text-sm text-text-muted", children: "No time zones match." })] })] }))] }));
+}

package/dist/lib/util/api.d.ts

@@ -68,6 +68,12 @@ export declare function withCsrfHeader(headers: Record<string, string>, method?:
  * in one place, rather than repeated at every call site.
  */
 export declare function apiFetch<T = unknown>(path: string, init?: RequestInit): Promise<T>;
+/**
+ * Registers what `apiFetch()` does when the server answers `401`: try to renew the signed-in session and, when that worked, send the request once
+ * more. `recovery` resolves whether the session was renewed. The app frame registers it while a session is open (`useSessionRefresh()`); pass
+ * `undefined` to remove it. A rejection counts as "not renewed".
+ */
+export declare function setApiSessionRecovery(recovery: (() => Promise<boolean>) | undefined): void;
 /**
  * `fetch()` against auth-server's API — a *different* origin than this app, unlike `apiFetch()` above. Used
  * only for the handful of actions that must be issued by auth-server itself (e.g. admin impersonation, which

package/dist/lib/util/api.js

@@ -137,9 +137,30 @@ export async function apiFetch(path, init = {}) {
     headers.set("Content-Type", "application/json");
     applyCsrfHeader(headers, init.method);
     const credentials = apiBaseUrl ? "include" : init.credentials;
-    const res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    let res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    // The access token has run out (a sleeping tab or laptop stops the timer that renews it in time): renew the session, and ask again once.
+    if (res.status === 401 && sessionRecovery && (await recoverSession())) {
+        res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    }
     return decodeApiResponse(res, (error) => unauthorizedObserver?.(error));
 }
+let sessionRecovery;
+/**
+ * Registers what `apiFetch()` does when the server answers `401`: try to renew the signed-in session and, when that worked, send the request once
+ * more. `recovery` resolves whether the session was renewed. The app frame registers it while a session is open (`useSessionRefresh()`); pass
+ * `undefined` to remove it. A rejection counts as "not renewed".
+ */
+export function setApiSessionRecovery(recovery) {
+    sessionRecovery = recovery;
+}
+async function recoverSession() {
+    try {
+        return await sessionRecovery();
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * `fetch()` against auth-server's API — a *different* origin than this app, unlike `apiFetch()` above. Used
  * only for the handful of actions that must be issued by auth-server itself (e.g. admin impersonation, which

package/dist/lib/util/timeZone.d.ts

@@ -6,7 +6,25 @@ export declare const DEFAULT_TIME_ZONE = "UTC";
  */
 export declare function deviceTimeZone(): string;
 /**
- * Every time zone the browser can name, for a picker: `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
+ * What `zone`'s clock is called and how far it is from UTC at `at`: `{ abbreviation: "PDT", offset: "-07:00" }`. `null` for a zone the runtime doesn't
+ * know. The abbreviation is the runtime's own (`GMT+1` where it has no name for a zone), the offset counts daylight saving on that date.
+ */
+export declare function zoneClock(zone: string, at?: Date): {
+    abbreviation: string;
+    offset: string;
+} | null;
+/**
+ * A zone as a list or a line of text names it, city first, with how far its clock is from UTC: "Los Angeles, America (GMT-07:00)". Daylight saving
+ * is read at `at` (now, unless a date matters). A zone the runtime doesn't know is just its name.
+ */
+export declare function describeTimeZone(zone: string, at?: Date): string;
+/**
+ * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
+ * doesn't know comes last.
+ */
+export declare function compareTimeZones(a: string, b: string, at?: Date): number;
+/**
+ * Every time zone the browser can name, for a picker (sorted by offset from UTC as it is now, then by city): `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
  * which is added), else just `extra` - the zones the caller already holds, such as a mailbox's current one.
  */
 export declare function timeZoneOptions(...extra: string[]): string[];

package/dist/lib/util/timeZone.js

@@ -17,7 +17,50 @@ export function deviceTimeZone() {
     }
 }
 /**
- * Every time zone the browser can name, for a picker: `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
+ * What `zone`'s clock is called and how far it is from UTC at `at`: `{ abbreviation: "PDT", offset: "-07:00" }`. `null` for a zone the runtime doesn't
+ * know. The abbreviation is the runtime's own (`GMT+1` where it has no name for a zone), the offset counts daylight saving on that date.
+ */
+export function zoneClock(zone, at = new Date()) {
+    try {
+        const part = (style) => new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style }).formatToParts(at).find((p) => p.type === "timeZoneName").value;
+        return { abbreviation: part("short"), offset: part("longOffset").replace("GMT", "") || "+00:00" };
+    }
+    catch {
+        return null;
+    }
+}
+/** A zone id split into its city and the region it is in: "America/Argentina/Buenos_Aires" is "Buenos Aires" in "America/Argentina"; "UTC" is in none. */
+function zoneNames(zone) {
+    const parts = zone.split("/");
+    const city = parts.pop().replace(/_/g, " ");
+    return { city, region: parts.join("/").replace(/_/g, " ") };
+}
+/**
+ * A zone as a list or a line of text names it, city first, with how far its clock is from UTC: "Los Angeles, America (GMT-07:00)". Daylight saving
+ * is read at `at` (now, unless a date matters). A zone the runtime doesn't know is just its name.
+ */
+export function describeTimeZone(zone, at = new Date()) {
+    const clock = zoneClock(zone, at);
+    if (!clock) {
+        return zone.replace(/_/g, " ");
+    }
+    const { city, region } = zoneNames(zone);
+    return `${city}${region ? `, ${region}` : ""} (GMT${clock.offset})`;
+}
+/**
+ * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
+ * doesn't know comes last.
+ */
+export function compareTimeZones(a, b, at = new Date()) {
+    const minutes = (zone) => {
+        const offset = zoneClock(zone, at)?.offset;
+        return offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
+    };
+    const byOffset = minutes(a) - minutes(b);
+    return (Number.isNaN(byOffset) ? 0 : byOffset) || zoneNames(a).city.localeCompare(zoneNames(b).city) || a.localeCompare(b);
+}
+/**
+ * Every time zone the browser can name, for a picker (sorted by offset from UTC as it is now, then by city): `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
  * which is added), else just `extra` - the zones the caller already holds, such as a mailbox's current one.
  */
 export function timeZoneOptions(...extra) {
@@ -28,5 +71,6 @@ export function timeZoneOptions(...extra) {
     catch {
         zones = [];
     }
-    return [...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])].sort((a, b) => a.localeCompare(b));
+    const now = new Date();
+    return [...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])].sort((a, b) => compareTimeZones(a, b, now));
 }