@rapidmx/web-client 0.30.0 → 0.31.0

package/dist/apps/shared/components/admin/setup/EscrowSetupStep.js

@@ -4,14 +4,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { createEscrowScope, listEscrowScopes } from "../../../../../lib/admin/escrowScopesApi.js";
 import { generateEscrowKeyPair } from "../../../../../lib/crypto/escrowKeys.js";
 import { toDatetimeLocal } from "../../../../../lib/util/dateInput.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
-import EscrowScopeKeyAndHoldersFields, { emptyEscrowScopeKeyAndHoldersValue, selfAsHolderError, } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../elevation.js";
+import EscrowScopeKeyAndHoldersFields, { emptyEscrowScopeKeyAndHoldersValue, keyValidityError, selfAsHolderError, } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /** How long a download's object URL is kept, since some browsers are still reading it after the click returns. */
 export const DOWNLOAD_URL_LIFETIME_MS = 60000;
@@ -43,6 +44,8 @@ export default function EscrowSetupStep({ adminUid }) {
     const [generated, setGenerated] = useState(null);
     const [downloadedPrivateKey, setDownloadedPrivateKey] = useState(false);
     const [savedPrivateKey, setSavedPrivateKey] = useState(false);
+    // The private key leaves the browser as a plain file, so it is only offered after the administrator has read what that means.
+    const [confirmingDownload, setConfirmingDownload] = useState(false);
     const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
@@ -57,6 +60,7 @@ export default function EscrowSetupStep({ adminUid }) {
         setGenerated(null);
         setDownloadedPrivateKey(false);
         setSavedPrivateKey(false);
+        setConfirmingDownload(false);
         setKeyAndHolders(emptyEscrowScopeKeyAndHoldersValue());
     }
     async function generate() {
@@ -106,6 +110,11 @@ export default function EscrowSetupStep({ adminUid }) {
             setError("The public key, its type, and its fingerprint are all required.");
             return;
         }
+        const validityError = generated ? null : keyValidityError(keyAndHolders);
+        if (validityError) {
+            setError(validityError);
+            return;
+        }
         if (keyAndHolders.holderUserUids.length === 0) {
             setError("At least one holder is required.");
             return;
@@ -133,15 +142,16 @@ export default function EscrowSetupStep({ adminUid }) {
             setName("Escrow");
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");
+            setError(actionErrorMessage(err, "Could not create the escrow scope."));
         }
         finally {
             setBusy(false);
         }
     }
     const scopeForm = (_jsxs("form", { onSubmit: create, className: "flex flex-col gap-5", children: [_jsx(EscrowScopeKeyAndHoldersFields, { value: keyAndHolders, onChange: setKeyAndHolders, disabled: mode === "generate" && busy, keyReadOnly: mode === "generate" }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: busy, disabled: busy, className: "!w-auto", children: "Create escrow scope" }) })] }));
-    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_jsx("p", { className: "text-sm text-text-muted", children: "Escrow lets a group of trusted holders - for example your legal or compliance team - recover a mailbox\u2019s encrypted mail when they all agree to. It\u2019s optional. Without it, mail that someone encrypts can\u2019t be recovered if they lose their keys, by anyone." }), scopes && scopes.length > 0 && (_jsxs("div", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Escrow scopes set up: ", scopes.map((scope) => scope.name).join(", "), "."] })), error && _jsx(Alert, { children: error }), _jsxs("fieldset", { className: "flex flex-col gap-2 text-sm", children: [_jsx("legend", { className: "font-semibold mb-1", children: "How do you want to set up escrow?" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "generate", onChange: () => chooseMode("generate") }), "Generate new escrow keys in this browser"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "existing", onChange: () => chooseMode("existing") }), "Use a certificate I already have"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "none", onChange: () => chooseMode("none") }), scopes && scopes.length > 0 ? "Don't add another escrow scope" : "Don't use escrow"] })] }), mode !== "none" && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Escrow scope name", htmlFor: "escrowName", children: _jsx("input", { id: "escrowName", type: "text", className: INPUT_CLASS, value: name, disabled: !!generated, onChange: (e) => setName(e.target.value) }) }), mode === "generate" && !generated && (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Keys valid for", htmlFor: "escrowValidYears", children: _jsx("select", { id: "escrowValidYears", className: INPUT_CLASS, value: validYears, onChange: (e) => setValidYears(Number(e.target.value)), children: [1, 2, 5, 10].map((years) => (_jsxs("option", { value: years, children: [years, " ", years === 1 ? "year" : "years"] }, years))) }) }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void generate(), children: "Generate keys" })] })), mode === "generate" && generated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx(Alert, { children: "Download the private key now and give it to your escrow holders. It isn\u2019t stored anywhere else - if it\u2019s lost, no escrowed mail can ever be recovered." }), _jsx(Alert, { children: "You\u2019re downloading this private key, so you must not also be one of its holders: pick holders other than yourself, hand the key over, and delete your copy once they have it. Otherwise one person could both configure escrow and recover mail with it." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", onClick: () => {
-                                            downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem);
-                                            setDownloadedPrivateKey(true);
-                                        }, children: "Download private key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-certificate.pem`, generated.certificatePem), children: "Download certificate" })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: savedPrivateKey, disabled: !downloadedPrivateKey, onChange: (e) => setSavedPrivateKey(e.target.checked) }), "I\u2019ve saved the private key somewhere safe"] }), !downloadedPrivateKey && (_jsx("p", { className: "text-xs text-text-muted", children: "Download the private key before continuing." }))] }))] })), mode === "existing" && scopeForm, mode === "generate" && generated && savedPrivateKey && scopeForm] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_jsx("p", { className: "text-sm text-text-muted", children: "Escrow lets a group of trusted holders - for example your legal or compliance team - recover a mailbox\u2019s encrypted mail when they all agree to. It\u2019s optional. Without it, mail that someone encrypts can\u2019t be recovered if they lose their keys, by anyone." }), scopes && scopes.length > 0 && (_jsxs("div", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Escrow scopes set up: ", scopes.map((scope) => scope.name).join(", "), "."] })), error && _jsx(Alert, { children: error }), _jsxs("fieldset", { className: "flex flex-col gap-2 text-sm", children: [_jsx("legend", { className: "font-semibold mb-1", children: "How do you want to set up escrow?" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "generate", onChange: () => chooseMode("generate") }), "Generate new escrow keys in this browser"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "existing", onChange: () => chooseMode("existing") }), "Use a certificate I already have"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "none", onChange: () => chooseMode("none") }), scopes && scopes.length > 0 ? "Don't add another escrow scope" : "Don't use escrow"] })] }), mode !== "none" && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Escrow scope name", htmlFor: "escrowName", children: _jsx("input", { id: "escrowName", type: "text", className: INPUT_CLASS, value: name, disabled: !!generated, onChange: (e) => setName(e.target.value) }) }), mode === "generate" && !generated && (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Keys valid for", htmlFor: "escrowValidYears", children: _jsx("select", { id: "escrowValidYears", className: INPUT_CLASS, value: validYears, onChange: (e) => setValidYears(Number(e.target.value)), children: [1, 2, 5, 10].map((years) => (_jsxs("option", { value: years, children: [years, " ", years === 1 ? "year" : "years"] }, years))) }) }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void generate(), children: "Generate keys" })] })), mode === "generate" && generated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx(Alert, { children: "Download the private key now and give it to your escrow holders. It isn\u2019t stored anywhere else - if it\u2019s lost, no escrowed mail can ever be recovered." }), _jsx(Alert, { children: "You\u2019re downloading this private key, so you must not also be one of its holders: pick holders other than yourself, hand the key over, and delete your copy once they have it. Otherwise one person could both configure escrow and recover mail with it." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setConfirmingDownload(true), children: "Download private key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-certificate.pem`, generated.certificatePem), children: "Download certificate" })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: savedPrivateKey, disabled: !downloadedPrivateKey, onChange: (e) => setSavedPrivateKey(e.target.checked) }), "I\u2019ve saved the private key somewhere safe"] }), !downloadedPrivateKey && (_jsx("p", { className: "text-xs text-text-muted", children: "Download the private key before continuing." })), _jsxs(Modal, { open: confirmingDownload, onClose: () => setConfirmingDownload(false), title: "Download the private key?", children: [_jsxs("p", { className: "text-sm mb-3", children: ["The file is ", _jsx("strong", { children: "not encrypted" }), ": it lands in this computer\u2019s downloads folder (and its download history), and anyone who obtains it can decrypt every mailbox covered by this escrow scope on their own - the number of required holders does not apply to a copy of the key."] }), _jsx("p", { className: "text-sm mb-5", children: "Move it straight to offline storage or a password manager your escrow holders control, and delete it from here." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDownload(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => {
+                                                    downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem);
+                                                    setDownloadedPrivateKey(true);
+                                                    setConfirmingDownload(false);
+                                                }, children: "Download unencrypted key" })] })] })] }))] })), mode === "existing" && scopeForm, mode === "generate" && generated && savedPrivateKey && scopeForm] }));
 }

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
 import { HiCheck } from "react-icons/hi2";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
+import { actionErrorMessage } from "../elevation.js";
 import { getRetentionPolicy } from "../../../../../lib/admin/retentionPolicyApi.js";
 import { getMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
 import { createDomain, listDomains } from "../../../../../lib/admin/domainsApi.js";
@@ -15,7 +15,8 @@ import { getBranding } from "../../../../../lib/branding/brandingApi.js";
 import { getEncryptionPolicy } from "../../../../../lib/crypto/keyvaultApi.js";
 import { listMailboxes } from "../../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { LIST_PAGE_SIZE, listAllPages } from "../../../mail/listAllPages.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
@@ -43,7 +44,7 @@ function isStepId(value) {
     return SETUP_STEPS.some((step) => step.id === value);
 }
 function errorMessage(err, fallback) {
-    return err instanceof ApiRequestError ? err.message : fallback;
+    return actionErrorMessage(err, fallback);
 }
 /**
  * The first-run setup wizard. Each step saves as the administrator works through it; the wizard itself only records
@@ -203,9 +204,10 @@ function MailboxesStep({ userUid, domain }) {
     const [error, setError] = useState(null);
     const [formKey, setFormKey] = useState(0);
     useEffect(() => {
-        // The administration scope: every mailbox that exists (administrative metadata), not only the administrator's own.
-        listMailboxes({ limit: 100, scope: "admin" }, client)
-            .then((list) => 
+        // The administration scope: every mailbox that exists (administrative metadata), not only the administrator's own. All pages of them: the
+        // administrator's own mailbox may be past the first, and would then be offered to be created again.
+        listAllPages((page) => listMailboxes({ limit: LIST_PAGE_SIZE, page, scope: "admin" }, client))
+            .then(({ items: list }) => 
         // Keep any mailbox created here while the list was loading.
         setMailboxes((prev) => [...list, ...prev.filter((mine) => !list.some((mailbox) => mailbox.uid === mine.uid))]))
             .catch((err) => setError(`${errorMessage(err, "Could not load the existing mailboxes.")} Check the Mailboxes page before creating your own, so you don't create it twice.`))

package/dist/apps/shared/components/admin/signOut.js

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { authApiFetch } from "../../../../lib/util/api.js";
+import { resetNotifications } from "../../notifications/store.js";
 /**
  * The cross-tab sign-out channel - must stay identical to `SIGN_OUT_CHANNEL` in
  * `apps/shared/search/localIndexRpcClient.ts` (the channel `AppShell` listens on and `destroyAllLocalIndexes()`
@@ -69,6 +70,8 @@ async function logOutOfAuthServer(authServerUrl) {
  */
 export async function signOutOfConsole(authServerUrl) {
     markLocalIndexesForDeletion();
+    // The tab's notification history is the session's, and its storage outlives it.
+    resetNotifications();
     broadcastSignOut();
     await logOutOfAuthServer(authServerUrl);
     window.location.href = authServerUrl ?? "/";

package/dist/apps/shared/components/admin/usePagedList.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useRef, useState } from "react";
-import { ApiRequestError } from "../../../../lib/util/api.js";
+import { actionErrorMessage } from "./elevation.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 /** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
 export const REQUEST_LIST_PAGE_SIZE = 50;
@@ -30,7 +30,7 @@ export function usePagedList(fetchPage, errorMessage) {
     const loaded = useRef(items);
     loaded.current = items;
     function describe(err) {
-        return err instanceof ApiRequestError ? err.message : errorMessage;
+        return actionErrorMessage(err, errorMessage);
     }
     async function reload() {
         const current = ++generation.current;

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

@@ -25,7 +25,8 @@ export function linkFromInput(input) {
     if (/\s/.test(text)) {
         return undefined;
     }
-    if (/^[a-z][a-z0-9+.-]*:/i.test(text)) {
+    // "example.com:8080/x" and "localhost:3000" name a host and a port, not a scheme.
+    if (/^[a-z][a-z0-9+.-]*:/i.test(text) && !/^(?:localhost|[^\s:/@]+\.[^\s:/@]+):\d{1,5}(?:[/?#]|$)/i.test(text)) {
         return safeDescriptionHref(text);
     }
     return safeDescriptionHref(/^[^\s@/]+@[^\s@/]+$/.test(text) ? `mailto:${text}` : `https://${text}`);

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

@@ -14,6 +14,8 @@ export interface EventDetailsProps {
     isOwnAddress?: (address: string) => boolean;
     calendarName?: string;
     calendarColor?: string;
+    /** Whether the reader may change this mailbox's events: `false` for one shared with them view-only, which gets no Modify, Delete or answer. Default `true`. */
+    canWrite?: boolean;
     onClose: () => void;
     /** Modify: switch to the edit form. */
     onModify: () => void;
@@ -30,4 +32,4 @@ export interface EventDetailsProps {
  * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
  * its time and that it is busy - with nothing to change, delete or answer.
  */
-export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }: EventDetailsProps): React.JSX.Element;
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, canWrite, onClose, onModify, onSaved, onDeleted, }: EventDetailsProps): React.JSX.Element;

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

@@ -34,11 +34,13 @@ function DetailRow({ icon, children }) {
  * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
  * its time and that it is busy - with nothing to change, delete or answer.
  */
-export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }) {
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, canWrite = true, onClose, onModify, onSaved, onDeleted, }) {
     const client = useApiClient();
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
+    // An answer to one occurrence of a series waits here for the reader to confirm: the server records it for the entire series.
+    const [pendingResponse, setPendingResponse] = useState(null);
     const [requesting, setRequesting] = useState(false);
     // The organizer's own join link for the event's video meeting: `undefined` while it is fetched, `null` once known to be none.
     const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
@@ -84,6 +86,7 @@ export default function EventDetails({ occurrence, isInvited, myResponse, isOwnA
     // `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own (see `calendarApi.ts`'s `respondToEvent` doc
     // comment) - it always acts on `occurrence.uid` as a single event document.
     async function handleRespond(responseStatus) {
+        setPendingResponse(null);
         setError(null);
         setBusy(true);
         try {
@@ -133,8 +136,8 @@ export default function EventDetails({ occurrence, isInvited, myResponse, isOwnA
                         description: occurrence.description,
                         descriptionHtml: occurrence.descriptionHtml,
                         guestAddresses: occurrence.attendees.map((a) => a.address),
-                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
+                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && canWrite && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
                                     const current = myResponse === response;
-                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => void handleRespond(response), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
-                                }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
+                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => (occurrence.isRecurringOccurrence ? setPendingResponse(response) : void handleRespond(response)), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
+                                }) })] }), pendingResponse && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsxs("span", { className: "flex-1 min-w-0", children: [pendingResponse === "declined" ? "Declining" : "Your answer", " applies to every event in this series, not just this one", pendingResponse === "declined" ? ", and removes the series from your calendar" : "", "."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setPendingResponse(null), children: "Cancel" }), _jsxs(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: () => void handleRespond(pendingResponse), children: [answers.find((a) => a.response === pendingResponse).label, " the series"] })] })), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && canWrite && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !canWrite ? null : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : !occurrence.isRecurringOccurrence ? (_jsxs("div", { role: "alert", className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm", children: "Delete this event?" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Yes, delete" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setConfirmingDelete(false), children: "Keep" })] })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { format } from "date-fns";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -46,19 +46,25 @@ function wallTimeOfDayMs(instantMs, timezone) {
     const wall = toEventWallClock(instantMs, timezone, false);
     return ((wall % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;
 }
+/** The calendar date (`YYYY-MM-DD`) an instant falls on in the frame a series expands in: the UTC date for an all-day event, `timezone`'s wall clock otherwise. */
+function seriesDateKey(iso, allDay, timezone) {
+    return allDay ? allDayDateKey(iso) : new Date(toEventWallClock(new Date(iso).getTime(), timezone, false)).toISOString().slice(0, 10);
+}
+const WEEKDAY_ORDER = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 /**
  * Rewrites an edited occurrence's `startDate`/`endDate` for a save to the entire series. The modal only
  * ever shows (and edits) *this occurrence's* dates, but the series is stored as its master record starting
  * at the first occurrence - sending the occurrence's dates as-is would move the whole series' start to
- * this occurrence. So only the change in time-of-day (and the new duration) is applied to the master's own
- * start; the series keeps its original first date. Unchanged times aren't sent at all.
+ * this occurrence. So the change made to the occurrence (its date and its time of day) is applied to the
+ * master's own start, and the new duration is kept: moving a Tuesday occurrence to Thursday moves the series
+ * by two days, never silently dropping the change. Unchanged times aren't sent at all.
  *
- * Times of day are read on the event's own timezone wall clock (the series expands there), not the
- * browser's, and the change is the smallest signed difference modulo 24h - moving 23:00 to 01:00 is two
- * hours later (into the next day), never 22 hours earlier. The master's new start is converted back from
- * that wall clock, so a master on the other side of a DST change keeps the chosen local time.
+ * The change is measured on the event's own timezone wall clock (the series expands there), not the
+ * browser's. The master's new start is converted back from that wall clock, so a master on the other side of
+ * a DST change keeps the chosen local time. A weekly rule that the edit left untouched is rotated by the
+ * same number of days, so its weekdays move with the start (a rule the form already changed is left as it is).
  */
-async function toSeriesFields(occurrence, fields, client) {
+async function toSeriesFields(occurrence, fields, formZone, client) {
     const { startDate, endDate, ...rest } = fields;
     if (sameMinute(startDate, occurrence.startDate) && sameMinute(endDate, occurrence.endDate)) {
         // `saveEventSeries()` treats *any* `timezone`/`allDay` in the update as a possible reinterpretation of
@@ -71,25 +77,32 @@ async function toSeriesFields(occurrence, fields, client) {
     const timezone = fields.timezone;
     const newStart = new Date(startDate).getTime();
     const durationMs = new Date(endDate).getTime() - newStart;
+    // The days the date moved: on the event's own wall clock when both are timed, otherwise on the clock the form showed the timed side on.
+    const frame = fields.allDay || occurrence.allDay ? formZone : timezone;
+    const dayShift = Math.round((Date.parse(seriesDateKey(startDate, !!fields.allDay, frame)) - Date.parse(seriesDateKey(occurrence.startDate, occurrence.allDay, frame))) / MS_PER_DAY);
     let masterStart;
     if (fields.allDay) {
-        // Timed -> all-day keeps the master's own date on its wall clock.
+        // The master's own date (on its wall clock when it was timed), moved by the days the occurrence moved.
         const masterDateKey = master.allDay
             ? allDayDateKey(master.startDate)
             : new Date(toEventWallClock(new Date(master.startDate).getTime(), timezone, false)).toISOString().slice(0, 10);
-        masterStart = new Date(allDayInstant(masterDateKey)).getTime();
+        masterStart = new Date(allDayInstant(addDaysToKey(masterDateKey, dayShift))).getTime();
     }
     else if (master.allDay) {
-        // All-day -> timed: the master's own date at the newly chosen wall-clock time.
-        const masterDateWall = new Date(allDayInstant(allDayDateKey(master.startDate))).getTime();
+        // All-day -> timed: the master's own date (moved by the days the occurrence moved) at the newly chosen wall-clock time.
+        const masterDateWall = new Date(allDayInstant(addDaysToKey(allDayDateKey(master.startDate), dayShift))).getTime();
         masterStart = fromEventWallClock(masterDateWall + wallTimeOfDayMs(newStart, timezone), timezone, false);
     }
     else {
-        const rawDelta = wallTimeOfDayMs(newStart, timezone) - wallTimeOfDayMs(new Date(occurrence.startDate).getTime(), timezone);
-        const delta = ((((rawDelta + MS_PER_DAY / 2) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY) - MS_PER_DAY / 2;
+        const delta = toEventWallClock(newStart, timezone, false) - toEventWallClock(new Date(occurrence.startDate).getTime(), timezone, false);
         const masterWall = toEventWallClock(new Date(master.startDate).getTime(), timezone, false);
         masterStart = fromEventWallClock(masterWall + delta, timezone, false);
     }
+    const rule = rest.recurrenceRule;
+    const original = occurrence.recurrenceRule?.byDay;
+    if (rule?.freq === "weekly" && rule.byDay && original && dayShift % 7 !== 0 && rule.byDay.join() === original.join()) {
+        rest.recurrenceRule = { ...rule, byDay: rule.byDay.map((day) => WEEKDAY_ORDER[(WEEKDAY_ORDER.indexOf(day) + (dayShift % 7) + 7) % 7]) };
+    }
     return {
         ...rest,
         startDate: new Date(masterStart).toISOString(),
@@ -150,6 +163,8 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             targetFolderUid: folderUid,
         };
     });
+    // What an existing event's form held when it opened, to tell whether anything was changed since.
+    const [pristine] = useState(() => JSON.stringify(values));
     const { attendees, location, videoEnabled } = values;
     function update(patch) {
         setValues((prev) => ({ ...prev, ...patch }));
@@ -172,6 +187,12 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
     // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
     const [savedEvent, setSavedEvent] = useState(null);
+    // Whether that stored record is a series saved with `toSeriesFields()`: its master's dates are not the form's (the occurrence's), so a retry
+    // must not send them - the first save already applied any change of time.
+    const savedAsSeries = useRef(false);
+    // A meeting minted for this event whose link onto the event could not be saved. A retry reuses it rather than minting a second one,
+    // which would send the invitees a second set of join links and leave this one orphaned.
+    const mintedMeeting = useRef(null);
     const [editScope, setEditScope] = useState("occurrence");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
@@ -201,7 +222,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     }, [occurrence?.videoMeetingUid, client]);
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
-    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
+    dirtyRef.current = occurrence
+        ? JSON.stringify(values) !== pristine
+        : !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
     function updateAttendee(index, patch) {
         setValues((prev) => ({ ...prev, attendees: prev.attendees.map((a, i) => (i === index ? { ...a, ...patch } : a)) }));
     }
@@ -217,6 +240,11 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             ],
         }));
     }
+    // The weekday the form's start falls on, in the frame the series expands in (`undefined` while the start is not a valid date).
+    function startWeekdayOf(v) {
+        const ms = v.allDay ? Number.NaN : wallStringToMs(v.start, v.formZone, deviceZone);
+        return startWeekdayCode(v.allDay ? v.start : Number.isNaN(ms) ? "" : new Date(ms).toISOString(), v.allDay, v.timezone);
+    }
     // Moving the start moves the end with it, so the event keeps its length (a Google Calendar habit, and the way to
     // reschedule without touching two fields).
     function setStart(next) {
@@ -231,7 +259,13 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     ? `${new Date(endMs + shift).toISOString().slice(0, 10)}T00:00`
                     : msToWallString(endMs + shift, prev.formZone, deviceZone);
             }
-            return { ...prev, start: next, end: nextEnd };
+            // A weekly rule on just the start's weekday ("Weekly on Wednesday") follows the start to its new weekday - left alone it
+            // would not include the event's own first day, and the series would begin on the next of the old weekday instead.
+            const oldDay = startWeekdayOf(prev);
+            const nextDay = startWeekdayOf({ ...prev, start: next });
+            const rule = prev.recurrenceRule;
+            const followsStart = oldDay && nextDay && rule?.freq === "weekly" && rule.byDay?.length === 1 && rule.byDay[0] === oldDay;
+            return { ...prev, start: next, end: nextEnd, recurrenceRule: followsStart ? { ...rule, byDay: [nextDay] } : rule };
         });
     }
     // The recurrence end date is stored in the frame the series expands in (UTC for all-day, local otherwise),
@@ -331,23 +365,28 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     setVideoError("Add at least one attendee other than yourself to add video conferencing.");
                     return { event: saved, failed: true };
                 }
-                const result = await createVideoMeeting({
-                    mailboxUid: saved.mailboxUid,
-                    title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
-                    visibility: "private",
-                    calendarEventUid: saved.uid,
-                    startTime: saved.startDate,
-                    endTime: saved.endDate,
-                    invitees,
-                }, client);
+                if (!mintedMeeting.current) {
+                    const result = await createVideoMeeting({
+                        mailboxUid: saved.mailboxUid,
+                        title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                        visibility: "private",
+                        calendarEventUid: saved.uid,
+                        startTime: saved.startDate,
+                        endTime: saved.endDate,
+                        invitees,
+                    }, client);
+                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: result.organizerJoinUrl ?? null };
+                }
+                const meeting = mintedMeeting.current;
                 const patched = await updateCalendarEvent({
                     uid: saved.uid,
                     version: saved.version,
                     location: VIDEO_LOCATION_PLACEHOLDER,
-                    videoMeetingUid: result.meeting.uid,
+                    videoMeetingUid: meeting.uid,
                 }, client);
-                setVideoMeetingUid(result.meeting.uid);
-                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                mintedMeeting.current = null;
+                setVideoMeetingUid(meeting.uid);
+                setOrganizerJoinUrl(meeting.organizerJoinUrl);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
                 return { event: patched, failed: false };
             }
@@ -455,8 +494,17 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                 // A retry after the event was stored but its video meeting couldn't be (see `savedEvent`):
                 // update exactly the record the first attempt left behind, whichever branch below created it.
                 // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
-                // nothing left to shift - the dates being sent again are the ones it moved everything to.
-                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...fields }, client);
+                // nothing left to shift. For a series the form's dates are those of the edited occurrence, not
+                // the master's: sending them would move the whole series to that occurrence, so they (and the
+                // zone and all-day flag they go with) stay as the first attempt left them.
+                const retryFields = { ...fields };
+                if (savedAsSeries.current) {
+                    delete retryFields.startDate;
+                    delete retryFields.endDate;
+                    delete retryFields.timezone;
+                    delete retryFields.allDay;
+                }
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...retryFields }, client);
             }
             else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
@@ -471,8 +519,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                 saved = await detachOccurrence(occurrence, fields, client);
             }
             else if (occurrence.isRecurringOccurrence) {
-                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields, client)), client);
+                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields, values.formZone, client)), client);
                 saved = series;
+                savedAsSeries.current = true;
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             }
             else {
@@ -507,7 +556,6 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     // stays disabled either way, and the two are told apart below purely from `organizerJoinUrl` itself.
     const joinUrl = joinMeetingUrl(organizerJoinUrl);
     const timeZones = useMemo(() => timeZoneOptions(values.formZone, values.timezone, deviceZone), [values.formZone, values.timezone, deviceZone]);
-    const startMs = values.allDay ? Number.NaN : wallStringToMs(values.start, values.formZone, deviceZone);
     const calendarFolderUid = occurrence ? occurrence.folderUid : values.targetFolderUid;
     const controller = {
         occurrence,
@@ -520,7 +568,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         timeZones,
         organizerAddress: effectiveOrganizerAddress,
         deviceZone,
-        startWeekday: startWeekdayCode(values.allDay ? values.start : Number.isNaN(startMs) ? "" : new Date(startMs).toISOString(), values.allDay, values.timezone),
+        startWeekday: startWeekdayOf(values),
         editingSingleOccurrence,
         updateAttendee,
         removeAttendee,

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

@@ -38,11 +38,13 @@ export declare function ReminderRow({ value, onChange }: {
  * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
  * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
  */
-export declare function RecurrenceSelect({ value, onChange, allDay, startWeekday, }: {
+export declare function RecurrenceSelect({ value, onChange, allDay, startWeekday, startDateKey, }: {
     value: RecurrenceRule | null;
     onChange: (rule: RecurrenceRule | null) => void;
     allDay: boolean;
     startWeekday: WeekdayCode | undefined;
+    /** The event's start date (`yyyy-MM-dd`), for a custom rule's default end date. */
+    startDateKey?: string;
 }): React.JSX.Element;
 /** [start date] [start time] to [end time] [end date], then the "Time zone" link (and its menu), "All day" and how the event repeats. */
 export declare function DateTimeControls({ c }: {

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

@@ -124,7 +124,7 @@ function presetOf(rule, startWeekday) {
  * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
  * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
  */
-export function RecurrenceSelect({ value, onChange, allDay, startWeekday, }) {
+export function RecurrenceSelect({ value, onChange, allDay, startWeekday, startDateKey, }) {
     // Picking "Custom…" for a rule that is also a plain repeat still opens the editor.
     const [customRequested, setCustomRequested] = useState(false);
     const selected = customRequested && value ? "custom" : presetOf(value, startWeekday);
@@ -140,7 +140,7 @@ export function RecurrenceSelect({ value, onChange, allDay, startWeekday, }) {
             onChange({ ...presetRule(key, startWeekday), exceptions: value?.exceptions ?? [] });
         }
     }
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("select", { id: "event-recurrence", "aria-label": "Recurrence", className: SELECT_CLASS, value: selected, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "none", children: "Does not repeat" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: startWeekday ? `Weekly on ${WEEKDAY_NAME[startWeekday]}` : "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Annually" }), _jsx("option", { value: "weekdays", children: "Every weekday (Monday to Friday)" }), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), selected === "custom" && _jsx(RecurrenceEditor, { value: value, onChange: onChange, allDay: allDay, startWeekday: startWeekday, hideToggle: true })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("select", { id: "event-recurrence", "aria-label": "Recurrence", className: SELECT_CLASS, value: selected, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "none", children: "Does not repeat" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: startWeekday ? `Weekly on ${WEEKDAY_NAME[startWeekday]}` : "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Annually" }), _jsx("option", { value: "weekdays", children: "Every weekday (Monday to Friday)" }), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), selected === "custom" && _jsx(RecurrenceEditor, { value: value, onChange: onChange, allDay: allDay, startWeekday: startWeekday, startDateKey: startDateKey, hideToggle: true })] }));
 }
 const START_TIME_OPTIONS = dayTimes().map((time) => ({ value: time, label: formatTimeOfDay(time) }));
 /** [start date] [start time] to [end time] [end date], then the "Time zone" link (and its menu), "All day" and how the event repeats. */
@@ -149,7 +149,7 @@ export function DateTimeControls({ c }) {
     const [zoneOpen, setZoneOpen] = useState(false);
     return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx("input", { type: "date", "aria-label": "Event start date", className: `${SELECT_CLASS} min-w-0`, value: values.start.slice(0, 10), onChange: (e) => c.setStart(`${e.target.value}${values.start.slice(10)}`) }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event start time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.start.slice(11, 16)), current: values.start.slice(11, 16), options: START_TIME_OPTIONS, 
                         // Moving the start moves the end with it, so the event keeps its length: whatever the start is set to.
-                        onSelect: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`), onType: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`) })), _jsx("span", { className: "text-text-muted", children: "to" }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event end time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.end.slice(11, 16)), current: values.end, options: endTimeOptions(values.start).map((option) => ({ value: option.value, label: option.label, hint: option.hint })), onSelect: c.setEnd, onType: (time) => c.setEnd(`${values.end.slice(0, 11)}${time}`) })), _jsx("input", { type: "date", "aria-label": "Event end date", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(0, 10), onChange: (e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`) })] }), _jsx("button", { type: "button", "aria-expanded": zoneOpen, className: "self-start text-sm text-primary-dark hover:underline", onClick: () => setZoneOpen((open) => !open), children: "Time zone" }), zoneOpen && (_jsx(TimeZonePicker, { "aria-label": "Event time zone", className: `${SELECT_CLASS} max-w-full`, value: values.formZone, zones: c.timeZones, at: zoneDate(values.start), onChange: c.onTimeZoneChange })), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: values.allDay, onChange: (e) => c.onAllDayChange(e.target.checked) }), "All day"] }), !c.editingSingleOccurrence && (_jsx(RecurrenceSelect, { value: values.recurrenceRule, onChange: (rule) => c.update({ recurrenceRule: rule }), allDay: values.allDay, startWeekday: c.startWeekday }))] }));
+                        onSelect: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`), onType: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`) })), _jsx("span", { className: "text-text-muted", children: "to" }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event end time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.end.slice(11, 16)), current: values.end, options: endTimeOptions(values.start).map((option) => ({ value: option.value, label: option.label, hint: option.hint })), onSelect: c.setEnd, onType: (time) => c.setEnd(`${values.end.slice(0, 11)}${time}`) })), _jsx("input", { type: "date", "aria-label": "Event end date", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(0, 10), onChange: (e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`) })] }), _jsx("button", { type: "button", "aria-expanded": zoneOpen, className: "self-start text-sm text-primary-dark hover:underline", onClick: () => setZoneOpen((open) => !open), children: "Time zone" }), zoneOpen && (_jsx(TimeZonePicker, { "aria-label": "Event time zone", className: `${SELECT_CLASS} max-w-full`, value: values.formZone, zones: c.timeZones, at: zoneDate(values.start), onChange: c.onTimeZoneChange })), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: values.allDay, onChange: (e) => c.onAllDayChange(e.target.checked) }), "All day"] }), !c.editingSingleOccurrence && (_jsx(RecurrenceSelect, { value: values.recurrenceRule, onChange: (rule) => c.update({ recurrenceRule: rule }), allDay: values.allDay, startWeekday: c.startWeekday, startDateKey: values.start.slice(0, 10) }))] }));
 }
 /** The calendar this event is in: its colour and name, a choice between calendars (and mailboxes) when an event is being created. */
 export function CalendarField({ c }) {

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

@@ -12,6 +12,6 @@ export interface EventMatchNavProps {
  * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
  * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
  * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
- * a field is taking them.
+ * a field or a widget (a select, a menu, a slider, ...) is taking them.
  */
 export default function EventMatchNav({ onPrevious, onNext, canPrevious, canNext, noun }: EventMatchNavProps): React.JSX.Element;

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

@@ -6,16 +6,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect } from "react";
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi2";
 import { isTextEntry } from "../../keyboard/targets.js";
+/** Widgets that take the arrow keys themselves (a menu's items, a radio group, a slider, a list's options, a tab list, ...) and an open popup's trigger. */
+const ARROW_WIDGET_SELECTOR = [
+    ...["menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "radiogroup", "radio", "listbox", "option"].map((role) => `[role="${role}"]`),
+    ...["slider", "spinbutton", "tablist", "tab", "tree", "grid", "combobox"].map((role) => `[role="${role}"]`),
+    '[aria-haspopup][aria-expanded="true"]',
+].join(",");
+/** Whether the arrow keys pressed at `target` belong to what is there: a field or select, or a widget with arrows of its own. */
+function takesArrowKeys(target) {
+    return isTextEntry(target) || (target instanceof Element && target.closest(ARROW_WIDGET_SELECTOR) !== null);
+}
 /**
  * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
  * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
  * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
- * a field is taking them.
+ * a field or a widget (a select, a menu, a slider, ...) is taking them.
  */
 export default function EventMatchNav({ onPrevious, onNext, canPrevious = true, canNext = true, noun = "match" }) {
     useEffect(() => {
         function handleKeyDown(event) {
-            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || isTextEntry(event.target)) {
+            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || takesArrowKeys(event.target)) {
                 return;
             }
             if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {