@rapidmx/web-client 0.14.1 → 0.15.1

package/dist/apps/shared/gestures/useWheelPaging.d.ts

@@ -0,0 +1,32 @@
+import { type RefObject } from "react";
+/** Wheel movement, in pixels, that steps to the next or previous page when nothing inside scrolls: about one notch of a mouse wheel. */
+export declare const WHEEL_STEP_PX = 100;
+/** Wheel movement, in pixels, pushed against the top or bottom of what scrolls inside before it steps onto the next or previous page. */
+export declare const WHEEL_EDGE_PX = 80;
+/** Movement that isn't followed by more within this long starts from nothing again, so an old nudge doesn't add to a new one. */
+export declare const WHEEL_IDLE_MS = 250;
+/** After a step that starts at an edge, wheel events for this long are left to settle the new page, so one hard push isn't two steps. */
+export declare const WHEEL_SETTLE_MS = 100;
+/** Where the new page's scroll position goes: `"top"` when stepping forward past the bottom, `"bottom"` when stepping back past the top. */
+export type WheelEdge = "top" | "bottom";
+export interface UseWheelPagingOptions {
+    /** Nothing is handled while this is `false` (a phone, an event being dragged, a dialog open). */
+    enabled: boolean;
+    /** The element inside that scrolls vertically, if there is one now: the wheel scrolls it as usual and only steps past its ends.
+     * `null` when nothing inside scrolls (a month grid), and then every wheel movement counts towards a step. */
+    getScroller: () => HTMLElement | null;
+    /** Called for each step: `1` towards the next page (the wheel turned down), `-1` towards the previous. `edge` says where in the new
+     * page's scroller to start, when there is one. */
+    onStep: (direction: 1 | -1, edge: WheelEdge | null) => void;
+}
+/**
+ * Turns the mouse wheel over `ref`'s element into stepping through pages - the months, weeks or days of a calendar - without a limit:
+ * keep turning and it keeps stepping, and nothing waits for an animation to end.
+ *
+ * Where nothing inside scrolls, every `WHEEL_STEP_PX` of movement is a step (a bigger turn is several). Where something does, the
+ * wheel scrolls it as it always did and only what is pushed against its top or bottom counts (`WHEEL_EDGE_PX`), so scrolling on
+ * from the last hour of a day carries into the first hours of the next, and back the other way. The event is only cancelled when it
+ * counts towards a step, so the page and whatever scrolls inside keep their own wheel behaviour everywhere else. Zooming
+ * (Ctrl+wheel) and sideways movement are left alone.
+ */
+export declare function useWheelPaging(ref: RefObject<HTMLElement | null>, { enabled, getScroller, onStep }: UseWheelPagingOptions): void;

package/dist/apps/shared/gestures/useWheelPaging.js

@@ -0,0 +1,85 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+/** Wheel movement, in pixels, that steps to the next or previous page when nothing inside scrolls: about one notch of a mouse wheel. */
+export const WHEEL_STEP_PX = 100;
+/** Wheel movement, in pixels, pushed against the top or bottom of what scrolls inside before it steps onto the next or previous page. */
+export const WHEEL_EDGE_PX = 80;
+/** Movement that isn't followed by more within this long starts from nothing again, so an old nudge doesn't add to a new one. */
+export const WHEEL_IDLE_MS = 250;
+/** After a step that starts at an edge, wheel events for this long are left to settle the new page, so one hard push isn't two steps. */
+export const WHEEL_SETTLE_MS = 100;
+/** A wheel event's vertical movement in pixels, whichever unit the browser reports it in. */
+function pixelsOf(event, page) {
+    return event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * page : event.deltaY;
+}
+/**
+ * Turns the mouse wheel over `ref`'s element into stepping through pages - the months, weeks or days of a calendar - without a limit:
+ * keep turning and it keeps stepping, and nothing waits for an animation to end.
+ *
+ * Where nothing inside scrolls, every `WHEEL_STEP_PX` of movement is a step (a bigger turn is several). Where something does, the
+ * wheel scrolls it as it always did and only what is pushed against its top or bottom counts (`WHEEL_EDGE_PX`), so scrolling on
+ * from the last hour of a day carries into the first hours of the next, and back the other way. The event is only cancelled when it
+ * counts towards a step, so the page and whatever scrolls inside keep their own wheel behaviour everywhere else. Zooming
+ * (Ctrl+wheel) and sideways movement are left alone.
+ */
+export function useWheelPaging(ref, { enabled, getScroller, onStep }) {
+    const latest = useRef({ getScroller, onStep });
+    latest.current = { getScroller, onStep };
+    /** Movement collected towards the next step, and when it last grew. */
+    const collected = useRef({ pixels: 0, at: 0 });
+    const settledUntil = useRef(0);
+    useEffect(() => {
+        const element = ref.current;
+        if (!enabled || !element) {
+            return;
+        }
+        function onWheel(event) {
+            if (event.ctrlKey || event.defaultPrevented || Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+                return;
+            }
+            const pixels = pixelsOf(event, element.clientHeight || 600);
+            if (pixels === 0) {
+                return;
+            }
+            const scroller = latest.current.getScroller();
+            if (scroller) {
+                const room = scroller.scrollHeight - scroller.clientHeight;
+                const canScroll = pixels > 0 ? scroller.scrollTop < room - 1 : scroller.scrollTop > 0;
+                if (room > 0 && canScroll) {
+                    // Still something to scroll that way: the browser does it, and what was pushed against an end is forgotten.
+                    collected.current = { pixels: 0, at: 0 };
+                    return;
+                }
+            }
+            event.preventDefault();
+            const now = Date.now();
+            if (scroller && now < settledUntil.current) {
+                return;
+            }
+            const state = collected.current;
+            if (now - state.at > WHEEL_IDLE_MS || Math.sign(state.pixels) !== Math.sign(pixels)) {
+                state.pixels = 0;
+            }
+            state.at = now;
+            state.pixels += pixels;
+            const needed = scroller ? WHEEL_EDGE_PX : WHEEL_STEP_PX;
+            while (Math.abs(state.pixels) >= needed) {
+                const direction = state.pixels > 0 ? 1 : -1;
+                state.pixels -= direction * needed;
+                latest.current.onStep(direction, scroller ? (direction > 0 ? "top" : "bottom") : null);
+                if (scroller) {
+                    // One push against an end is one step; the next turn of the wheel scrolls the page it arrived at.
+                    state.pixels = 0;
+                    settledUntil.current = now + WHEEL_SETTLE_MS;
+                    break;
+                }
+            }
+        }
+        // Not passive: the wheel's default (scrolling the page) has to be cancellable for the steps that replace it.
+        element.addEventListener("wheel", onWheel, { passive: false });
+        return () => element.removeEventListener("wheel", onWheel);
+    }, [enabled, ref]);
+}

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

@@ -1,23 +1,18 @@
 import type { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 /**
- * What decides whether a new message is announced, what the announcement says, and the two settings behind it (both per
- * browser, in `localStorage`): whether new-mail pop-ups are on at all, and what the user told the "turn on desktop
- * notifications" offer.
+ * What decides whether a new message is announced, what the announcement says, and the setting behind it (per browser, in
+ * `localStorage`): what the user told the "turn on desktop notifications" offer. Whether pop-ups are on at all is the
+ * notifications switch (`notifications/preferences.ts`).
  *
  * The announcement is built only from what the push event carries - the whole `Message`, including `bodyPreview` - and only
  * ever as text: React escapes it on screen and the Notifications API takes plain strings, so nothing here is HTML.
  */
-/** `localStorage` key of the pop-ups switch. Absent means on; `"off"` means the user turned them off. */
-export declare const NEW_MAIL_POPUPS_KEY = "rapidmx-new-mail-popups";
 /** `localStorage` key of the answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
 export declare const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
 /** How much of the body an announcement quotes. */
 export declare const PREVIEW_MAX_LENGTH = 140;
 /** A message received longer ago than this is not "new": mail imported or migrated in bulk arrives as `create` events too. */
 export declare const MAX_NEW_AGE_MS: number;
-/** Whether new-mail pop-ups are on (the default). */
-export declare function getNewMailPopupsEnabled(): boolean;
-export declare function setNewMailPopupsEnabled(enabled: boolean): void;
 /** Whether the "turn on desktop notifications" offer has been put away with "Not now" (or answered). */
 export declare function getDesktopOfferDismissed(): boolean;
 export declare function setDesktopOfferDismissed(dismissed: boolean): void;

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

@@ -1,14 +1,12 @@
 import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 /**
- * What decides whether a new message is announced, what the announcement says, and the two settings behind it (both per
- * browser, in `localStorage`): whether new-mail pop-ups are on at all, and what the user told the "turn on desktop
- * notifications" offer.
+ * What decides whether a new message is announced, what the announcement says, and the setting behind it (per browser, in
+ * `localStorage`): what the user told the "turn on desktop notifications" offer. Whether pop-ups are on at all is the
+ * notifications switch (`notifications/preferences.ts`).
  *
  * The announcement is built only from what the push event carries - the whole `Message`, including `bodyPreview` - and only
  * ever as text: React escapes it on screen and the Notifications API takes plain strings, so nothing here is HTML.
  */
-/** `localStorage` key of the pop-ups switch. Absent means on; `"off"` means the user turned them off. */
-export const NEW_MAIL_POPUPS_KEY = "rapidmx-new-mail-popups";
 /** `localStorage` key of the answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
 export const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
 /** How much of the body an announcement quotes. */
@@ -38,13 +36,6 @@ function writeStorage(key, value) {
         // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
     }
 }
-/** Whether new-mail pop-ups are on (the default). */
-export function getNewMailPopupsEnabled() {
-    return readStorage(NEW_MAIL_POPUPS_KEY) !== "off";
-}
-export function setNewMailPopupsEnabled(enabled) {
-    writeStorage(NEW_MAIL_POPUPS_KEY, enabled ? null : "off");
-}
 /** Whether the "turn on desktop notifications" offer has been put away with "Not now" (or answered). */
 export function getDesktopOfferDismissed() {
     return readStorage(DESKTOP_OFFER_KEY) !== null;

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

@@ -3,7 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { desktopPermission, getDesktopOfferDismissed, getNewMailPopupsEnabled, noticeFor, noticeSender, ownAddressesOf, requestDesktopPermission, setDesktopOfferDismissed, shouldAnnounce, } from "./newMailNotifications.js";
+import { desktopPermission, getDesktopOfferDismissed, noticeFor, noticeSender, ownAddressesOf, requestDesktopPermission, setDesktopOfferDismissed, shouldAnnounce, } from "./newMailNotifications.js";
+import { getNotificationsEnabled } from "../notifications/preferences.js";
 import { getNotificationsSnapshot, notify } from "../notifications/store.js";
 /** How long a new-mail pop-up stays before it goes by itself (while it is neither hovered nor focused, and the tab is in view). */
 export const TOAST_DURATION_MS = 8000;
@@ -82,7 +83,7 @@ export function useNewMailNotifications({ mailboxes, mailboxFolders, open = defa
     const offerRef = useRef({ offered: offerDesktop, enable: enableDesktop, decline: declineDesktop });
     offerRef.current = { offered: offerDesktop, enable: enableDesktop, decline: declineDesktop };
     const announce = useCallback((message) => {
-        if (!getNewMailPopupsEnabled() || announcedRef.current.has(message.uid)) {
+        if (!getNotificationsEnabled() || announcedRef.current.has(message.uid)) {
             return;
         }
         const { folders: knownFolders, ownAddresses: own } = latestRef.current;

package/dist/apps/shared/notifications/preferences.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The user's one switch for every pop-up (new mail, a failed send, an API error, a reminder), per browser in `localStorage`.
+ * Framework-free like the store, which reads it: `notify()` keeps a notification out of sight while it is off (it is still
+ * listed in "Recent notifications").
+ */
+/**
+ * `localStorage` key of the switch. Absent means on; `"off"` means the user turned pop-ups off. The name is from when the switch
+ * only covered new mail, and is kept so a browser where that was turned off stays off.
+ */
+export declare const NOTIFICATIONS_ENABLED_KEY = "rapidmx-new-mail-popups";
+/** Whether pop-up notifications are on (the default). */
+export declare function getNotificationsEnabled(): boolean;
+export declare function setNotificationsEnabled(enabled: boolean): void;

package/dist/apps/shared/notifications/preferences.js

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The user's one switch for every pop-up (new mail, a failed send, an API error, a reminder), per browser in `localStorage`.
+ * Framework-free like the store, which reads it: `notify()` keeps a notification out of sight while it is off (it is still
+ * listed in "Recent notifications").
+ */
+/**
+ * `localStorage` key of the switch. Absent means on; `"off"` means the user turned pop-ups off. The name is from when the switch
+ * only covered new mail, and is kept so a browser where that was turned off stays off.
+ */
+export const NOTIFICATIONS_ENABLED_KEY = "rapidmx-new-mail-popups";
+/** Whether pop-up notifications are on (the default). */
+export function getNotificationsEnabled() {
+    try {
+        return localStorage.getItem(NOTIFICATIONS_ENABLED_KEY) !== "off";
+    }
+    catch {
+        return true;
+    }
+}
+export function setNotificationsEnabled(enabled) {
+    try {
+        if (enabled) {
+            localStorage.removeItem(NOTIFICATIONS_ENABLED_KEY);
+        }
+        else {
+            localStorage.setItem(NOTIFICATIONS_ENABLED_KEY, "off");
+        }
+    }
+    catch {
+        // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
+    }
+}

package/dist/apps/shared/notifications/store.d.ts

@@ -15,6 +15,7 @@
  * hidden (`setAllPaused()`), and continues from where it was.
  * - **Deduplicated by `dedupeKey`**: a second notification with a key that is still on screen (or waiting) does not stack - it replaces
  * the first one's content, restarts its clock and raises its `count`, so a flapping error is one pop-up saying "x3".
+ * - **The user can turn them all off** (`preferences.ts`): `notify()` then shows nothing new, and only records it in the history.
  * - **Nothing is lost when one goes**: the last `HISTORY_LIMIT` (30, except new-mail pop-ups, which the inbox already holds) are
  * kept, in memory and in `sessionStorage`, with which errors nobody has seen yet.
  *

package/dist/apps/shared/notifications/store.js

@@ -2,29 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-/**
- * The app's one notification store: every pop-up - new mail, a failed send, an API error, an expired session - goes through
- * `notify()`. It is deliberately framework-free (no React, no DOM beyond `sessionStorage`/timers), so it can be called from a hook,
- * a plain function or an `apiFetch` error path alike; `NotificationCenter` (the view, mounted once in the app frame) and
- * `useNotifications()` only *read* it.
- *
- * Rules, all enforced here rather than by the view so they hold whoever renders:
- *
- * - **At most `MAX_VISIBLE` (3) are visible**; the rest wait in a queue and appear as room is made. A sticky notification (an error, or
- * anything with actions) that finds the stack full pushes out the oldest one that would have gone by itself, rather than waiting behind
- * it. A queued notification that has waited `QUEUE_STALE_MS` is dropped (it would be news from the past) - it is still in the history.
- * - **Sticky until dismissed or resolved**: errors and notifications with actions never expire (`update()` or `dismiss()` resolve them).
- * Everything else goes by itself after its kind's default time, or `timeoutMs`. `sticky` overrides both ways.
- * - **A clock that stops**: a notification's remaining time stops while it is hovered or focused (`setPaused()`) and while the tab is
- * hidden (`setAllPaused()`), and continues from where it was.
- * - **Deduplicated by `dedupeKey`**: a second notification with a key that is still on screen (or waiting) does not stack - it replaces
- * the first one's content, restarts its clock and raises its `count`, so a flapping error is one pop-up saying "x3".
- * - **Nothing is lost when one goes**: the last `HISTORY_LIMIT` (30, except new-mail pop-ups, which the inbox already holds) are
- * kept, in memory and in `sessionStorage`, with which errors nobody has seen yet.
- *
- * Nothing is stored where there is no `window` (server-side rendering): the module state is shared between requests there, so
- * `notify()` only hands back an id.
- */
+import { getNotificationsEnabled } from "./preferences.js";
 export const MAX_VISIBLE = 3;
 export const MAX_QUEUED = 20;
 export const QUEUE_STALE_MS = 30000;
@@ -254,6 +232,12 @@ export function notify(input) {
         paused: false,
     };
     applyInput(entry, input);
+    if (!getNotificationsEnabled()) {
+        // The user has pop-ups off: nothing is shown, but it is listed in the history like any other.
+        record(entry);
+        emit();
+        return id;
+    }
     const room = visibleCount() < MAX_VISIBLE;
     entries.push(entry);
     if (room) {

package/dist/apps/www/_routes.js

@@ -22,6 +22,7 @@ export const wwwRoutes = [
     { path: "/settings/filters/:uid", active: "settings", load: () => import("./settings/filters/[uid].js") },
     { path: "/settings/labels", active: "settings", load: () => import("./settings/labels/index.js") },
     { path: "/settings/privacy", active: "settings", load: () => import("./settings/privacy/index.js") },
+    { path: "/settings/profile", active: "settings", load: () => import("./settings/profile/index.js") },
     { path: "/settings/read-receipts", active: "settings", load: () => import("./settings/read-receipts/index.js") },
     { path: "/settings/sharing", active: "settings", load: () => import("./settings/sharing/index.js") },
     { path: "/settings/signatures", active: "settings", load: () => import("./settings/signatures/index.js") },

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

@@ -4,12 +4,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { routedPage } from "../_routedPage.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3 } from "react-icons/hi2";
 import { addDays, addMonths, addWeeks, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, parseISO, startOfDay, startOfMonth, startOfWeek, } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { getCalendarEvent, listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { getPushClient } from "@rapidmx/react-shared/mail/pushClient.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { resolveDragAction } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
 import { createFolder } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -19,18 +21,25 @@ import CalendarShell, { useCalendarShell } from "../../shared/components/calenda
 import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
 import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import EventModal from "../../shared/components/calendar/EventModal.js";
+import { anchorOf } from "../../shared/components/calendar/EventShell.js";
 import MiniDatePicker from "@rapidmx/react-shared/components/pickers/MiniDatePicker.js";
 import MonthView from "../../shared/components/calendar/MonthView.js";
 import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
+import { useSwipeSlide } from "../../shared/gestures/useSwipeSlide.js";
+import { useEnterSlide } from "../../shared/gestures/useEnterSlide.js";
+import { useWheelPaging } from "../../shared/gestures/useWheelPaging.js";
 import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
+import { redactedEventUidOf } from "../../shared/calendar/calendarLiveUpdates.js";
 function CalendarPage(props) {
-    return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, { userUid: props.userUid }) }));
+    return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, { userUid: props.userUid, bookingHref: bookingSettingsHref(props.pluginNav) }) }));
 }
 const VIEW_TYPES = ["month", "week", "workWeek", "day", "split"];
 const VIEW_LABELS = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
@@ -53,7 +62,7 @@ function ViewButton({ view, current, onSelect }) {
             .filter(Boolean)
             .join(" "), children: VIEW_LABELS[view] }));
 }
-function CalendarContent({ userUid }) {
+function CalendarContent({ userUid, bookingHref }) {
     const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
     // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
     // scroll gesture on a touch device. `MouseSensor` (a small `distance` — desktop drags still start
@@ -68,6 +77,8 @@ function CalendarContent({ userUid }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [modal, setModal] = useState(null);
+    // True from the moment a touch drag of an event (or its resize handle) activates until it ends or is cancelled.
+    const [dragging, setDragging] = useState(false);
     // `null` means "not yet customized by the user" — every calendar is treated as checked without
     // needing to be seeded from `calendarFolders` the moment it loads (see `checkedFolderUids` below).
     // Once the user toggles anything, this becomes a real (possibly empty) set of exactly what's checked.
@@ -183,6 +194,29 @@ function CalendarContent({ userUid }) {
     const calendarFolderUidsKey = calendarFolders.map((f) => f.uid).sort().join(",");
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
+    // A private or confidential event that somebody creates or changes is announced on the push connection as its busy block, whatever the reader may
+    // see (see `redactedEventUidOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
+    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404) leaves it. A failed fetch
+    // changes nothing: the next load shows the event as it is.
+    const checkedFolderUidsRef = useRef(checkedFolderUids);
+    checkedFolderUidsRef.current = checkedFolderUids;
+    useEffect(() => getPushClient().onEvent((event) => {
+        const uid = redactedEventUidOf(event);
+        if (!uid) {
+            return;
+        }
+        void getCalendarEvent(uid).then((fresh) => {
+            if (checkedFolderUidsRef.current.has(fresh.folderUid)) {
+                setEvents((previous) => previous.some((existing) => existing.uid === fresh.uid)
+                    ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
+                    : [...previous, fresh]);
+            }
+        }, (err) => {
+            if (err instanceof ApiRequestError && err.status === 404) {
+                setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
+            }
+        });
+    }), []);
     const occurrences = useMemo(() => expandAllOccurrences(events, rangeStart, rangeEnd), [events, rangeStart, rangeEnd]);
     const splitColumns = useMemo(() => calendarFolders
         .filter((f) => checkedFolderUids.has(f.uid))
@@ -194,6 +228,39 @@ function CalendarContent({ userUid }) {
                 ? addWeeks(d, direction)
                 : addDays(d, direction));
     }
+    // The phone layout's swipe between periods. Only the view area carries it (not the toolbar), it calls the same `shiftView()`
+    // the Previous/Next buttons and shortcuts do, and it is off while an event is being dragged or the editor is open. The views
+    // never scroll sideways (their columns share the width), so there is no horizontal scroller for the gesture to fight with.
+    // The view follows the finger and, once the swipe commits, slides out while the next period slides in (see `useSwipeSlide()`).
+    const isMobile = useIsMobile();
+    const swipe = useSwipeSlide({
+        enabled: isMobile && !dragging && !modal,
+        onShift: (direction) => shiftView(SWIPE_PERIOD_SHIFT[direction]),
+    });
+    // The desktop's mouse wheel steps through the months without end; in the views that scroll through the hours of a day it scrolls
+    // them as usual and, pushed past the last (or first) hour, carries on into the next (or previous) day, week or work week. Each
+    // step is the same `shiftView()` and enters with a short vertical slide (`useEnterSlide()`), which never waits for the last one.
+    const wheelSlide = useEnterSlide();
+    /** Where the scroller of the page a wheel step arrived at starts: its top after going on, its bottom after going back. */
+    const arrivalEdge = useRef(null);
+    const scrollerOf = () => swipe.ref.current?.querySelector("[data-calendar-scroller]") ?? null;
+    useWheelPaging(swipe.ref, {
+        enabled: !isMobile && !dragging && !modal,
+        getScroller: () => (view === "month" ? null : scrollerOf()),
+        onStep: (direction, edge) => {
+            arrivalEdge.current = edge;
+            shiftView(direction);
+            wheelSlide.enter(direction);
+        },
+    });
+    useLayoutEffect(() => {
+        const edge = arrivalEdge.current;
+        arrivalEdge.current = null;
+        const scroller = edge ? scrollerOf() : null;
+        if (scroller) {
+            scroller.scrollTop = edge === "top" ? 0 : scroller.scrollHeight;
+        }
+    }, [viewDate]);
     function goToday() {
         setViewDate(startOfDay(new Date()));
     }
@@ -201,7 +268,7 @@ function CalendarContent({ userUid }) {
         setView("day");
         setViewDate(startOfDay(date));
     }
-    function openNewEvent(start, end, targetFolderUid) {
+    function openNewEvent(start, end, targetFolderUid, anchor, initialAllDay) {
         if (!mailboxUid || !folderUid) {
             return;
         }
@@ -210,6 +277,8 @@ function CalendarContent({ userUid }) {
             initialStart: start ?? new Date(),
             initialEnd: end ?? new Date(Date.now() + 30 * 60000),
             targetFolderUid,
+            anchor,
+            initialAllDay,
         });
     }
     function openEvent(occurrence) {
@@ -240,6 +309,7 @@ function CalendarContent({ userUid }) {
         reload();
     }
     async function handleDragEnd(event) {
+        setDragging(false);
         const overId = event.over ? String(event.over.id) : undefined;
         const action = resolveDragAction(String(event.active.id), overId, occurrences);
         if (!action) {
@@ -273,6 +343,6 @@ function CalendarContent({ userUid }) {
         .filter((mc) => mc.calendarFolders.length > 0 && writableMailboxes.some((mb) => mb.uid === mc.mailbox.uid))
         .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })), [mailboxCalendars, writableMailboxes]);
     const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => setViewDate(startOfDay(date)) }), _jsx(CalendarListSidebar, { mailboxCalendars: mailboxCalendars, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar, colorFor: colorFor })] }));
-    return (_jsxs("div", { className: "flex-1 min-w-0 flex min-h-0", children: [_jsx("div", { className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: () => openNewEvent(), className: "!w-auto shrink-0", ...newEventHint, children: "+ New event" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", ...previousHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, ...todayHint, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", ...nextHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex flex-wrap gap-1", children: VIEW_TYPES.map((v) => (_jsx(ViewButton, { view: v, current: view, onSelect: setView }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
+    return (_jsxs("div", { className: "flex-1 min-w-0 flex min-h-0", children: [_jsx("div", { className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: (e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below")), className: "!w-auto shrink-0", ...newEventHint, children: "+ New event" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", ...previousHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, ...todayHint, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", ...nextHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex flex-wrap gap-1", children: VIEW_TYPES.map((v) => (_jsx(ViewButton, { view: v, current: view, onSelect: setView }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), _jsx("div", { ref: swipe.ref, className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden", ...swipe.handlers, style: swipe.style, children: _jsx("div", { "data-swipe-phase": swipe.phase, className: "flex-1 min-w-0 flex flex-col min-h-0", style: swipe.contentStyle, children: _jsx("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", style: wheelSlide.style, children: loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragStart: () => setDragging(true), onDragEnd: handleDragEnd, onDragCancel: () => setDragging(false), children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor, true) })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor) })) })) }) }) }), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, initialAllDay: modal.initialAllDay, anchor: modal.anchor, bookingHref: bookingHref, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
 }
 export default routedPage("/calendar", CalendarPage);