@rapidmx/web-client 0.30.0 → 0.31.0

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

@@ -7,6 +7,7 @@ import { useRef, useState } from "react";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
+import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
 import EventMatchNav from "./EventMatchNav.js";
@@ -43,6 +44,10 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const [syncWarning, setSyncWarning] = useState(false);
     // Whether the form holds anything a click on the backdrop would throw away (kept up to date by the editor).
     const dirtyRef = useRef(false);
+    // Escape or the close button on a form that holds something asks before throwing it away.
+    const [confirmingDiscard, setConfirmingDiscard] = useState(false);
+    // An event on a calendar shared with the reader view-only cannot be changed, deleted or answered.
+    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === occurrence?.mailboxUid)?.mailbox);
     if (!open) {
         return null;
     }
@@ -65,7 +70,7 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const width = !isForm ? DETAILS_WIDTH : layout === "expanded" ? (tab === "event" || occurrence ? FORM_WIDTH : TASK_FORM_WIDTH) : QUICK_WIDTH;
     // Leaving the form: an existing event goes back to its details, a new one is done.
     const leaveForm = occurrence ? () => setEditing(false) : onClose;
-    return (_jsxs(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? leaveForm : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: [isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
+    return (_jsxs(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? () => (dirtyRef.current ? setConfirmingDiscard(true) : leaveForm()) : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: [isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
                     ? undefined
                     : {
                         tab,
@@ -74,5 +79,8 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
                             setExpanded(false);
                         },
                         bookingHref,
-                    } })) : (_jsx(SlideIn, { from: matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined, children: _jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted }) }, occurrence.occurrenceKey)), !isForm && matchNav && _jsx(EventMatchNav, { onPrevious: matchNav.onPrevious, onNext: matchNav.onNext, canPrevious: matchNav.canPrevious, canNext: matchNav.canNext, noun: matchNav.noun })] }));
+                    } })) : (_jsx(SlideIn, { from: matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined, children: _jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], canWrite: canWrite, onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted }) }, occurrence.occurrenceKey)), !isForm && matchNav && _jsx(EventMatchNav, { onPrevious: matchNav.onPrevious, onNext: matchNav.onNext, canPrevious: matchNav.canPrevious, canNext: matchNav.canNext, noun: matchNav.noun }), _jsxs(Modal, { open: confirmingDiscard, onClose: () => setConfirmingDiscard(false), title: "Discard changes?", children: [_jsx("p", { className: "text-sm mb-5", children: "What you entered in this event has not been saved." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDiscard(false), children: "Keep editing" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => {
+                                    setConfirmingDiscard(false);
+                                    leaveForm();
+                                }, children: "Discard" })] })] })] }));
 }

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

@@ -69,7 +69,7 @@ export default function FindATime({ c }) {
         }
     }, [startDay]);
     // You, then each guest once (case-insensitively), at most as many as one look-up may ask about.
-    const rows = useMemo(() => {
+    const { rows, skipped } = useMemo(() => {
         const seen = new Set([organizerAddress.toLowerCase()]);
         const guests = [];
         for (const attendee of values.attendees) {
@@ -79,7 +79,8 @@ export default function FindATime({ c }) {
                 guests.push({ address: attendee.address, name: attendee.displayName || attendee.address, you: false });
             }
         }
-        return [{ address: organizerAddress, name: "You", you: true }, ...guests].slice(0, FREE_BUSY_MAX_ADDRESSES);
+        const everyone = [{ address: organizerAddress, name: "You", you: true }, ...guests];
+        return { rows: everyone.slice(0, FREE_BUSY_MAX_ADDRESSES), skipped: Math.max(0, everyone.length - FREE_BUSY_MAX_ADDRESSES) };
     }, [values.attendees, organizerAddress]);
     const guestCount = rows.length - 1;
     const addresses = rows.map((row) => row.address);
@@ -168,7 +169,7 @@ export default function FindATime({ c }) {
                 .map((block) => `${block.tentative ? "Tentatively busy" : "Busy"} ${clockLabel(block.startMs, formZone, deviceZone)} to ${clockLabel(block.endMs, formZone, deviceZone)}`)
                 .join(", ");
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: () => setDayKey((key) => addDaysToKey(key, -1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u2039" }), _jsx("span", { className: "text-sm font-medium min-w-[9rem] text-center", children: dayLabel }), _jsx("button", { type: "button", "aria-label": "Next day", onClick: () => setDayKey((key) => addDaysToKey(key, 1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u203A" }), _jsx("span", { className: "text-xs text-text-muted", children: describeTimeZone(formZone, zoneDate(dayKey)) })] }), lookUp.status === "error" && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-3 text-sm text-danger", children: [_jsx("span", { children: lookUp.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRetry((count) => count + 1), children: "Try again" })] })), _jsx("div", { ref: scroller, role: "group", "aria-label": "Guests' availability", "aria-busy": lookUp.status === "loading", className: "overflow-x-auto border border-border rounded-md", children: _jsxs("div", { className: "relative", style: { width: NAME_WIDTH + TIMELINE_WIDTH }, children: [_jsxs("div", { className: "flex bg-surface border-b border-border", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-20 shrink-0 bg-surface border-r border-border", style: { width: NAME_WIDTH } }), HOURS.map((hour) => (_jsx("button", { type: "button", "aria-label": `Start at ${hourLabel(hour)}`, title: `Start at ${hourLabel(hour)}`, onClick: () => startAt(hour * 60), className: "shrink-0 text-[10px] text-text-muted hover:bg-surface-alt hover:text-text text-left pl-1", style: { width: HOUR_WIDTH }, children: hourLabel(hour) }, hour)))] }), rows.map((row) => {
+    return (_jsxs("div", { className: "flex flex-col gap-3 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: () => setDayKey((key) => addDaysToKey(key, -1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u2039" }), _jsx("span", { className: "text-sm font-medium min-w-[9rem] text-center", children: dayLabel }), _jsx("button", { type: "button", "aria-label": "Next day", onClick: () => setDayKey((key) => addDaysToKey(key, 1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u203A" }), _jsx("span", { className: "text-xs text-text-muted", children: describeTimeZone(formZone, zoneDate(dayKey)) })] }), skipped > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: [skipped, " ", skipped === 1 ? "guest" : "guests", " beyond the first ", FREE_BUSY_MAX_ADDRESSES - 1, " ", skipped === 1 ? "isn’t" : "aren’t", " checked, and ", skipped === 1 ? "is" : "are", " not counted in who is free."] })), lookUp.status === "error" && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-3 text-sm text-danger", children: [_jsx("span", { children: lookUp.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRetry((count) => count + 1), children: "Try again" })] })), _jsx("div", { ref: scroller, role: "group", "aria-label": "Guests' availability", "aria-busy": lookUp.status === "loading", className: "overflow-x-auto border border-border rounded-md", children: _jsxs("div", { className: "relative", style: { width: NAME_WIDTH + TIMELINE_WIDTH }, children: [_jsxs("div", { className: "flex bg-surface border-b border-border", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-20 shrink-0 bg-surface border-r border-border", style: { width: NAME_WIDTH } }), HOURS.map((hour) => (_jsx("button", { type: "button", "aria-label": `Start at ${hourLabel(hour)}`, title: `Start at ${hourLabel(hour)}`, onClick: () => startAt(hour * 60), className: "shrink-0 text-[10px] text-text-muted hover:bg-surface-alt hover:text-text text-left pl-1", style: { width: HOUR_WIDTH }, children: hourLabel(hour) }, hour)))] }), rows.map((row) => {
                             const person = byAddress.get(row.address.toLowerCase());
                             const state = person && timeIsValid && covered ? availabilityDuring(person, eventStart, eventEnd) : undefined;
                             const hidden = person && person.status !== "available" ? person : undefined;

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

@@ -1,7 +1,10 @@
 import React from "react";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
-/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+/** The most days one event is listed on (counted from today), so an event that runs for years does not become thousands of rows. */
 export declare const LIST_MAX_DAYS_PER_EVENT = 366;
+/** The days (that have events) rendered at first, and how many more each time the end of the list is reached. */
+export declare const LIST_INITIAL_DAYS = 60;
+export declare const LIST_DAYS_PER_PAGE = 60;
 /** A step through the list's months: `nonce` makes a second press in the same direction a new step. */
 export interface ListStep {
     direction: 1 | -1;
@@ -24,7 +27,10 @@ export interface ListViewProps {
  * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
  * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
  *
- * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
- * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ * The days are grouped once per change of `occurrences` (or of the day), not per render, but only the first `LIST_INITIAL_DAYS` of them are rendered:
+ * more follow as the end of the list is scrolled to (a daily series alone is thousands of rows). A jump, a step or a search match that lies beyond
+ * the rendered days renders up to it first. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
  */
-export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps): React.JSX.Element;
+declare function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ListView>;
+export default _default;

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

@@ -3,12 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useRef } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { addDays, format, isToday, parseISO, startOfDay } from "date-fns";
 import { allDayDateKey, localDateKey, startsOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
-/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+import { useDayKey } from "../../../../lib/calendar/useDayKey.js";
+/** The most days one event is listed on (counted from today), so an event that runs for years does not become thousands of rows. */
 export const LIST_MAX_DAYS_PER_EVENT = 366;
+/** The days (that have events) rendered at first, and how many more each time the end of the list is reached. */
+export const LIST_INITIAL_DAYS = 60;
+export const LIST_DAYS_PER_PAGE = 60;
 /** When an occurrence is on show on `day`: its time range, "All day", or - on a later day of a multi-day event - that it continues. */
 function timeLabel(occurrence, day) {
     if (occurrence.allDay) {
@@ -21,8 +25,8 @@ function timeLabel(occurrence, day) {
     const end = new Date(occurrence.endDate);
     return start.getTime() === end.getTime() ? format(start, "h:mma") : `${format(start, "h:mma")} – ${format(end, "h:mma")}`;
 }
-/** The days (local midnights) `occurrence` is on show on: from its first to its last, at most `LIST_MAX_DAYS_PER_EVENT`. */
-function daysOf(occurrence) {
+/** The days (local midnights) `occurrence` is on show on from `today` (a local midnight) on: its first to its last, at most `LIST_MAX_DAYS_PER_EVENT` of them. */
+function daysOf(occurrence, today) {
     let first;
     let last;
     if (occurrence.allDay) {
@@ -37,8 +41,12 @@ function daysOf(occurrence) {
         // An event that ends at midnight does not reach into that day.
         last = startOfDay(end > start ? new Date(end.getTime() - 1) : start);
     }
-    const days = [first];
-    for (let day = addDays(first, 1); day <= last && days.length < LIST_MAX_DAYS_PER_EVENT; day = addDays(day, 1)) {
+    // An event is on its first day at least. The days before today are not listed, so the cap counts from today: an event that began years ago and
+    // still runs would otherwise be spent before it reached it.
+    const lastDay = last < first ? first : last;
+    const from = first < today ? today : first;
+    const days = [];
+    for (let day = from; day <= lastDay && days.length < LIST_MAX_DAYS_PER_EVENT; day = addDays(day, 1)) {
         days.push(day);
     }
     return days;
@@ -53,22 +61,22 @@ function sortedForDay(occurrences, day) {
  * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
  * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
  *
- * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
- * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ * The days are grouped once per change of `occurrences` (or of the day), not per render, but only the first `LIST_INITIAL_DAYS` of them are rendered:
+ * more follow as the end of the list is scrolled to (a daily series alone is thousands of rows). A jump, a step or a search match that lies beyond
+ * the rendered days renders up to it first. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
  */
-export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }) {
+function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }) {
     const activeKey = useActiveOccurrenceKey();
+    // Today moves on at midnight, with the list open or not.
+    const dayKey = useDayKey();
     const scrollerRef = useRef(null);
+    const sentinelRef = useRef(null);
     const groups = useMemo(() => {
         const byDay = new Map();
-        const todayKey = localDateKey(new Date());
+        const today = parseISO(dayKey);
         for (const occurrence of occurrences) {
-            for (const day of daysOf(occurrence)) {
+            for (const day of daysOf(occurrence, today)) {
                 const key = localDateKey(day);
-                // The days an event spent before today are not listed.
-                if (key < todayKey) {
-                    continue;
-                }
                 const group = byDay.get(key) ?? { day, items: [] };
                 group.items.push(occurrence);
                 byDay.set(key, group);
@@ -77,14 +85,65 @@ export default function ListView({ occurrences, folderColors, onSelectEvent, foc
         return Array.from(byDay.entries())
             .sort(([a], [b]) => a.localeCompare(b))
             .map(([key, { day, items }]) => ({ key, day, items: sortedForDay(items, day) }));
-    }, [occurrences]);
+    }, [occurrences, dayKey]);
+    // How many days are rendered. Where there is no IntersectionObserver to say the end was reached, all of them are.
+    const [shown, setShown] = useState(LIST_INITIAL_DAYS);
+    const rendered = typeof IntersectionObserver === "undefined" ? groups.length : Math.min(shown, groups.length);
+    const more = rendered < groups.length;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel) {
+            return;
+        }
+        // Watched again after each page, so a sentinel still in view (a tall window) brings the next one.
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setShown((count) => count + LIST_DAYS_PER_PAGE);
+            }
+        }, { root: scrollerRef.current, rootMargin: "600px" });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [more, shown]);
+    // What waits for the days it scrolls to be rendered: one slot per effect that asks, so one cannot replace another's scroll.
+    const afterReveal = useRef({});
+    useEffect(() => {
+        const pending = Object.values(afterReveal.current);
+        afterReveal.current = {};
+        for (const scroll of pending) {
+            scroll();
+        }
+    }, [shown]);
+    /** Runs `scroll` once the day at `index` of `groups` is rendered: now, or after the rendered days have grown to reach it. */
+    function reveal(slot, index, scroll) {
+        if (index < rendered) {
+            scroll();
+            return;
+        }
+        afterReveal.current[slot] = scroll;
+        setShown((count) => Math.max(count, index + LIST_DAYS_PER_PAGE));
+    }
+    // Both look the element up when the scroll runs, which can be after the list changed (a live refresh) and the element is gone: then there is nothing to scroll to.
+    const scrollToDay = (key) => scrollerRef.current?.querySelector(`[data-day="${key}"]`)?.scrollIntoView({ block: "start" });
     const dayElements = () => Array.from(scrollerRef.current.querySelectorAll("[data-day]"));
     // On opening and on a jump (Today, a date picked in the mini calendar): the first day from `focusDate` that has events, else the last one.
     useEffect(() => {
+        if (groups.length === 0) {
+            return;
+        }
         const wanted = localDateKey(focusDate);
-        const days = dayElements();
-        (days.find((el) => el.dataset.day >= wanted) ?? days[days.length - 1])?.scrollIntoView({ block: "start" });
+        const found = groups.findIndex((group) => group.key >= wanted);
+        const index = found >= 0 ? found : groups.length - 1;
+        reveal("jump", index, () => scrollToDay(groups[index].key));
     }, [jumpNonce]);
+    // A search match beyond the rendered days: they grow to it, and it is scrolled to (the page's own scroll to the match found nothing there).
+    useEffect(() => {
+        const index = groups.findIndex((group) => group.items.some((occurrence) => occurrence.occurrenceKey === activeKey));
+        if (index >= rendered) {
+            reveal("match", index, () => Array.from(scrollerRef.current?.querySelectorAll("[data-occurrence-key]") ?? [])
+                .find((el) => el.dataset.occurrenceKey === activeKey)
+                ?.scrollIntoView({ block: "nearest", inline: "nearest" }));
+        }
+    }, [activeKey]);
     // A step: from the month of the day at the top of the list to the first day of the previous or next month that has any.
     useEffect(() => {
         const days = dayElements();
@@ -93,19 +152,25 @@ export default function ListView({ occurrences, folderColors, onSelectEvent, foc
         }
         const top = scrollerRef.current.getBoundingClientRect().top;
         const current = days.find((el) => el.getBoundingClientRect().bottom > top) ?? days[days.length - 1];
-        const months = Array.from(new Set(days.map((el) => el.dataset.day.slice(0, 7))));
+        const months = Array.from(new Set(groups.map((group) => group.key.slice(0, 7))));
         const month = months[months.indexOf(current.dataset.day.slice(0, 7)) + step.direction];
         // Past the first or last month with events there is nowhere to go.
-        days.find((el) => el.dataset.day.startsWith(month))?.scrollIntoView({ block: "start" });
+        const index = groups.findIndex((group) => group.key.startsWith(month));
+        if (index >= 0) {
+            reveal("step", index, () => scrollToDay(groups[index].key));
+        }
     }, [step]);
-    const thisYear = new Date().getFullYear();
-    return (_jsx("div", { ref: scrollerRef, role: "region", "aria-label": "List", "data-calendar-scroller": true, className: "flex-1 min-h-0 overflow-y-auto", children: groups.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No upcoming events" })) : (groups.map(({ key, day, items }) => (_jsxs("section", { "data-day": key, "aria-labelledby": `list-day-${key}`, children: [_jsxs("h3", { id: `list-day-${key}`, "aria-current": isToday(day) ? "date" : undefined, className: [
-                        "sticky top-0 z-10 px-4 py-2 text-sm font-semibold border-b border-border bg-surface-alt text-text border-l-4",
-                        isToday(day) ? "border-l-primary" : "border-l-transparent",
-                    ].join(" "), children: [format(day, day.getFullYear() === thisYear ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy"), isToday(day) && (_jsx("span", { "aria-hidden": "true", className: "ml-2 px-1.5 py-0.5 rounded-full bg-primary/15 text-primary-dark text-xs font-medium", children: "Today" }))] }), _jsx("ul", { children: items.map((occurrence) => (_jsx(ListRow, { occurrence: occurrence, day: day, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent, activeKey: activeKey }, occurrence.occurrenceKey))) })] }, key)))) }));
+    const thisYear = parseISO(dayKey).getFullYear();
+    return (_jsxs("div", { ref: scrollerRef, role: "region", "aria-label": "List", "data-calendar-scroller": true, className: "flex-1 min-h-0 overflow-y-auto", children: [groups.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No upcoming events" })) : (groups.slice(0, rendered).map(({ key, day, items }) => (_jsxs("section", { "data-day": key, "aria-labelledby": `list-day-${key}`, children: [_jsxs("h3", { id: `list-day-${key}`, "aria-current": isToday(day) ? "date" : undefined, className: [
+                            "sticky top-0 z-10 px-4 py-2 text-sm font-semibold border-b border-border bg-surface-alt text-text border-l-4",
+                            isToday(day) ? "border-l-primary" : "border-l-transparent",
+                        ].join(" "), children: [format(day, day.getFullYear() === thisYear ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy"), isToday(day) && (_jsx("span", { "aria-hidden": "true", className: "ml-2 px-1.5 py-0.5 rounded-full bg-primary/15 text-primary-dark text-xs font-medium", children: "Today" }))] }), _jsx("ul", { children: items.map((occurrence) => (_jsx(ListRow, { occurrence: occurrence, day: day, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent, 
+                            // Only the row that is the match is told: a new match renders two rows, not all of them.
+                            activeKey: activeKey === occurrence.occurrenceKey ? activeKey : null }, occurrence.occurrenceKey))) })] }, key)))), more && _jsx("div", { ref: sentinelRef, "data-list-end": true, "aria-hidden": "true", className: "h-px" })] }));
 }
-function ListRow({ occurrence, day, color, onSelect, activeKey, }) {
+export default memo(ListView);
+const ListRow = memo(function ListRow({ occurrence, day, color, onSelect, activeKey, }) {
     const marker = occurrenceMarker(activeKey, occurrence);
     const place = occurrence.location || occurrence.organizer.displayName || occurrence.organizer.address;
     return (_jsx("li", { className: "border-b border-border/50", children: _jsxs("button", { type: "button", ...marker.attrs, onClick: () => onSelect(occurrence), className: ["w-full min-h-14 px-4 py-2 flex items-center gap-3 text-left hover:bg-surface-alt", marker.className].join(" "), children: [_jsx("span", { className: "w-28 shrink-0 text-xs text-text-muted", children: timeLabel(occurrence, day) }), _jsx("span", { "aria-hidden": "true", className: ["w-3 h-3 rounded-full shrink-0", occurrence.busyStatus === "free" ? "border-2" : ""].join(" "), style: occurrence.busyStatus === "free" ? { borderColor: color } : { backgroundColor: color } }), _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-sm font-medium truncate", children: occurrence.title }), _jsx("span", { className: "block text-xs text-text-muted truncate", children: place })] })] }) }));
-}
+});

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

@@ -10,6 +10,9 @@ export interface RecurrenceEditorProps {
     /** The weekday the event starts on (in the frame its series expands in - see `allDay.ts`'s
      * `startWeekdayCode()`): the day a new weekly rule, or one switched to Weekly, repeats on. Defaults to Monday. */
     startWeekday?: WeekdayCode;
+    /** The event's start date (`yyyy-MM-dd`): "Ends on" starts at today, or at this date when the event starts later - a series that ends before it
+     * starts has no occurrences at all. */
+    startDateKey?: string;
     /** Leaves out the "Repeats" checkbox, for a caller that already turns repeating on and off itself (the event form's
      * "Does not repeat" menu): what remains is the rule's details, shown only while there is a rule. */
     hideToggle?: boolean;
@@ -20,4 +23,4 @@ export interface RecurrenceEditorProps {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay, startWeekday, hideToggle }: RecurrenceEditorProps): React.JSX.Element;
+export default function RecurrenceEditor({ value, onChange, allDay, startWeekday, startDateKey, hideToggle }: RecurrenceEditorProps): React.JSX.Element;

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

@@ -10,6 +10,9 @@ const FREQ_LABEL = {
     monthly: { unit: "month", unitPlural: "months" },
     yearly: { unit: "year", unitPlural: "years" },
 };
+/** The most an interval ("every N days") or a count ("after N occurrences") can be set to. */
+const MAX_INTERVAL = 999;
+const MAX_COUNT = 1000;
 function endConditionOf(rule) {
     if (rule.count)
         return "count";
@@ -23,7 +26,7 @@ function endConditionOf(rule) {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", hideToggle = false }) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", startDateKey, hideToggle = false }) {
     function handleEnable(enabled) {
         onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
@@ -55,24 +58,26 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
             update({ count: 10, until: undefined });
         }
         else {
-            update({ until: recurrenceUntilInstant(format(new Date(), "yyyy-MM-dd"), allDay), count: undefined });
+            const today = format(new Date(), "yyyy-MM-dd");
+            update({ until: recurrenceUntilInstant(startDateKey && startDateKey > today ? startDateKey : today, allDay), count: undefined });
         }
     }
-    /** A positive whole number from a number input, or `null` while it's empty (a user clearing the field
-     * to type a new value) — the rule keeps its previous value then, rather than becoming 0/NaN. */
-    function parsePositive(raw) {
+    /** A whole number from 1 to `max` from a number input, or `null` while it's empty (a user clearing the field
+     * to type a new value) — the rule keeps its previous value then, rather than becoming 0/NaN. A huge one (an event
+     * every day, a billion times) would make every view expand it forever. */
+    function parsePositive(raw, max) {
         if (raw.trim() === "")
             return null;
         const n = Math.floor(Number(raw));
-        return n >= 1 ? n : 1;
+        return n >= 1 ? Math.min(n, max) : 1;
     }
     function handleInterval(raw) {
-        const interval = parsePositive(raw);
+        const interval = parsePositive(raw, MAX_INTERVAL);
         if (interval !== null)
             update({ interval });
     }
     function handleCount(raw) {
-        const count = parsePositive(raw);
+        const count = parsePositive(raw, MAX_COUNT);
         if (count !== null)
             update({ count });
     }
@@ -81,10 +86,10 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
         if (/^\d{4}-\d{2}-\d{2}$/.test(raw))
             update({ until: recurrenceUntilInstant(raw, allDay) });
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [!hideToggle && (_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] })), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => handleInterval(e.target.value), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => handleFrequency(e.target.value), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [!hideToggle && (_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] })), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, max: MAX_INTERVAL, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => handleInterval(e.target.value), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => handleFrequency(e.target.value), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
                                 "w-9 h-9 rounded-full text-xs font-semibold border",
                                 (value.byDay ?? []).includes(day)
                                     ? "bg-primary text-white border-primary"
                                     : "bg-surface text-text-muted border-border hover:border-primary",
-                            ].join(" "), children: _jsx("span", { "aria-hidden": "true", children: WEEKDAY_LABELS[day][0] }) }, day))) })), _jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Ends" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", checked: endConditionOf(value) === "never", onChange: () => handleEndCondition("never") }), "Never"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "After", checked: endConditionOf(value) === "count", onChange: () => handleEndCondition("count") }), "After", _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.count ?? 10, disabled: endConditionOf(value) !== "count", onChange: (e) => handleCount(e.target.value), "aria-label": "Number of occurrences" }), "occurrences"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "On", checked: endConditionOf(value) === "until", onChange: () => handleEndCondition("until") }), "On", _jsx("input", { type: "date", className: INPUT_CLASS, value: value.until ? recurrenceUntilDateKey(value.until, allDay) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => handleUntil(e.target.value), "aria-label": "End date" })] })] }), (value.freq !== "weekly" || (value.byDay ?? []).length > 0) && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Repeats ", describeRecurrence(value), "."] }))] }))] }));
+                            ].join(" "), children: _jsx("span", { "aria-hidden": "true", children: WEEKDAY_LABELS[day][0] }) }, day))) })), _jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Ends" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", checked: endConditionOf(value) === "never", onChange: () => handleEndCondition("never") }), "Never"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "After", checked: endConditionOf(value) === "count", onChange: () => handleEndCondition("count") }), "After", _jsx("input", { type: "number", min: 1, max: MAX_COUNT, className: `${INPUT_CLASS} w-16`, value: value.count ?? 10, disabled: endConditionOf(value) !== "count", onChange: (e) => handleCount(e.target.value), "aria-label": "Number of occurrences" }), "occurrences"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "On", checked: endConditionOf(value) === "until", onChange: () => handleEndCondition("until") }), "On", _jsx("input", { type: "date", className: INPUT_CLASS, value: value.until ? recurrenceUntilDateKey(value.until, allDay) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => handleUntil(e.target.value), "aria-label": "End date" })] })] }), (value.freq !== "weekly" || (value.byDay ?? []).length > 0) && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Repeats ", describeRecurrence(value), "."] }))] }))] }));
 }

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

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { addMinutes, format, startOfDay } from "date-fns";
 import { occursOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { anchorOf } from "./EventShell.js";
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+import { HOUR_HEIGHT_PX, SLOTS_PER_DAY, SLOT_MINUTES, blockSpan, laneStyle, layoutLanes, slotStart } from "./gridLayout.js";
 const HOURS = Array.from({ length: 24 }, (_, h) => h);
 /**
  * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
@@ -24,27 +22,23 @@ export default function SplitDayView({ day, columns, occurrences, onSelectEvent,
 }
 function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlot, }) {
     const activeKey = useActiveOccurrenceKey();
+    // Clipped to this day, so a multi-day event fills only the part of the day it covers. An all-day event is date-only (see `allDay.ts`), so it
+    // always spans the whole local day. Events that overlap in time share the column's width instead of covering one another.
+    const spans = occurrences.map((occurrence) => blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart, occurrence.allDay));
+    const lanes = layoutLanes(spans);
     return (_jsxs("div", { className: "flex-1 min-w-0 relative border-l border-border", children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return (_jsx("button", { type: "button", onClick: (e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(slotStart, "h:mm a")} in ${column.name}` }, i));
-            }), occurrences.map((occurrence) => {
+                const start = slotStart(dayStart, i);
+                return (_jsx("button", { type: "button", onClick: (e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(start, "h:mm a")} in ${column.name}` }, i));
+            }), occurrences.map((occurrence, index) => {
                 const start = new Date(occurrence.startDate);
-                const end = new Date(occurrence.endDate);
-                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
-                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
-                const dayEnd = addDays(dayStart, 1).getTime();
-                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
-                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
-                const top = ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
+                const { top, height } = spans[index];
                 const isFree = occurrence.busyStatus === "free";
                 const marker = occurrenceMarker(activeKey, occurrence);
                 return (_jsxs("div", { ...marker.attrs, onClick: () => onSelectEvent(occurrence), style: {
                         position: "absolute",
                         top,
                         height,
-                        left: 2,
-                        right: 2,
+                        ...laneStyle(lanes[index]),
                         ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
                     }, className: [
                         "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",

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

@@ -12,6 +12,7 @@ import { createTask, listTaskLists } from "../../../../lib/tasks/tasksApi.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { notify } from "../../notifications/store.js";
+import { dueDateInstant } from "../tasks/dueDate.js";
 import { INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
 import QuickFaceFrame from "./QuickFaceFrame.js";
 /** A new task's starting values: due on the day of the slot or day that was clicked, all day, with the slot's time ready if a time is wanted. */
@@ -82,8 +83,8 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
                 folderUid,
                 title,
                 body: draft.body.trim() || undefined,
-                // A date-only due date is the local day's midnight, the way the Tasks app writes one.
-                dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                // A date-only due date is that day's UTC midnight, the way the Tasks app writes one.
+                dueDate: draft.dueDate ? (draft.allDay ? dueDateInstant(draft.dueDate) : parseISO(`${draft.dueDate}T${draft.dueTime}`).toISOString()) : undefined,
                 priority: draft.priority,
                 reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
                 taskListUid: listUid || undefined,

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

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
+import { addMinutes, format, isToday, startOfDay } from "date-fns";
 import { eventDragId, resizeDragId, slotDropId } from "../../../../lib/calendar/calendarDragIds.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
 import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
 import { anchorOf } from "./EventShell.js";
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+import { HOUR_HEIGHT_PX, SLOTS_PER_DAY, SLOT_MINUTES, blockSpan, laneStyle, layoutLanes, slotStart } from "./gridLayout.js";
 const HOURS = Array.from({ length: 24 }, (_, h) => h);
 /** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
  * differ only in how many day columns are shown), with a day-header row and all-day events in a
@@ -25,34 +23,37 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
 }
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     const dayStart = startOfDay(day);
-    return (_jsxs("div", { className: ["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" "), children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return _jsx(TimeSlot, { start: slotStart, onSelectSlot: onSelectSlot }, i);
-            }), occurrences.map((occurrence) => startsOnDay(occurrence, day) ? (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)) : (_jsx(ContinuationBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
+    // Events that overlap in time share the column's width instead of covering one another.
+    const lanes = layoutLanes(occurrences.map((occurrence) => blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart)));
+    return (_jsxs("div", { className: ["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" "), children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => (_jsx(TimeSlot, { start: slotStart(dayStart, i), onSelectSlot: onSelectSlot }, i))), occurrences.map((occurrence, index) => startsOnDay(occurrence, day) ? (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, lane: lanes[index], onSelect: onSelectEvent }, occurrence.occurrenceKey)) : (_jsx(ContinuationBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, lane: lanes[index], onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
 }
 function TimeSlot({ start, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
-    return (_jsx("button", { ref: setNodeRef, type: "button", onClick: (e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
+    return (_jsx("button", { ref: setNodeRef, type: "button", 
+        // 48 of these a day would be hundreds of tab stops in a week: the New event shortcut is the keyboard's way in.
+        tabIndex: -1, onClick: (e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
+}
+/** Enter or Space on a focused event block opens the event, as a click does (the blocks are not `<button>`s: they hold a nested resize handle). */
+function openOnKey(event, open) {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        open();
+    }
 }
 /** A block's position within its day column. A multi-day event is drawn in every day column it
  * overlaps, clipped to that day. */
 function blockGeometry(occurrence, dayStart) {
-    const visibleStart = Math.max(new Date(occurrence.startDate).getTime(), dayStart.getTime());
-    const visibleEnd = Math.min(new Date(occurrence.endDate).getTime(), addDays(dayStart, 1).getTime());
-    return {
-        top: ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX,
-        height: Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16),
-    };
+    return blockSpan(new Date(occurrence.startDate).getTime(), new Date(occurrence.endDate).getTime(), dayStart);
 }
 /** A multi-day event's block in a day column after its first: clickable, but not draggable/resizable
  * (its drag ids are already taken by the start day's block). */
-function ContinuationBlock({ occurrence, color, dayStart, onSelect, }) {
+function ContinuationBlock({ occurrence, color, dayStart, lane, onSelect, }) {
     const isFree = occurrence.busyStatus === "free";
     const { top, height } = blockGeometry(occurrence, dayStart);
     const marker = occurrenceMarker(useActiveOccurrenceKey(), occurrence);
-    return (_jsx("div", { ...marker.attrs, onClick: () => onSelect(occurrence), style: { position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
+    return (_jsx("div", { ...marker.attrs, role: "button", tabIndex: 0, onClick: () => onSelect(occurrence), onKeyDown: (e) => openOnKey(e, () => onSelect(occurrence)), style: { position: "absolute", top, height, ...laneStyle(lane), ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : "", marker.className].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
 }
-function EventBlock({ occurrence, color, dayStart, onSelect, }) {
+function EventBlock({ occurrence, color, dayStart, lane, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
         id: resizeDragId(occurrence),
@@ -69,8 +70,7 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
             position: "absolute",
             top,
             height,
-            left: 2,
-            right: 2,
+            ...laneStyle(lane),
             transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
             zIndex: isDragging ? 10 : undefined,
             ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
@@ -79,5 +79,7 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
             isFree ? "bg-surface-alt text-text-muted" : "",
             isDragging ? "opacity-50" : "",
             marker.className,
-        ].join(" "), ...listeners, ...attributes, children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") }), _jsx("div", { ref: setResizeRef, className: "absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize", "aria-label": `Resize "${occurrence.title}"`, ...resizeListeners, ...resizeAttributes })] }));
+        ].join(" "), ...listeners, ...attributes, onKeyDown: (e) => openOnKey(e, () => onSelect(occurrence)), children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") }), _jsx("div", { ref: setResizeRef, className: "absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize", "aria-label": `Resize "${occurrence.title}"`, ...resizeListeners, ...resizeAttributes, 
+                // Dragging is the only way to resize: a tab stop here would do nothing.
+                tabIndex: -1 })] }));
 }

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

@@ -0,0 +1,41 @@
+/** Where things sit in the hour grids of the Week, Work Week, Day and Split views: 24 rows of one clock hour each. */
+export declare const HOUR_HEIGHT_PX = 48;
+export declare const SLOT_MINUTES = 30;
+export declare const SLOTS_PER_DAY: number;
+/** The least height a block is drawn with, so a very short event can still be seen and clicked. */
+export declare const MIN_BLOCK_HEIGHT_PX = 16;
+/**
+ * The start of the `index`th half-hour row of the day beginning at `dayStart`, by the wall clock - the rows are labelled with clock hours, so on the
+ * day a daylight-saving change makes 23 or 25 hours long the row labelled 10 AM must still be 10:00, not ten hours after midnight. (A row whose
+ * clock time does not exist that day is the next one that does.)
+ */
+export declare function slotStart(dayStart: Date, index: number): Date;
+/**
+ * Where a block for an event from `startMs` to `endMs` goes in the column of the day beginning at `dayStart`: a multi-day event is clipped to the day,
+ * and (`wholeDay`, for an all-day event) fills it. Positioned by wall-clock minute, like the rows, so a block lines up with its hour on a 23 or 25
+ * hour day too.
+ */
+export declare function blockSpan(startMs: number, endMs: number, dayStart: Date, wholeDay?: boolean): {
+    top: number;
+    height: number;
+};
+/** One block's share of the width of its column: the lane it sits in, out of how many its overlapping neighbours need. */
+export interface Lane {
+    lane: number;
+    lanes: number;
+}
+/**
+ * Splits a column's width between blocks that overlap in time, as Outlook and Google Calendar do, so none is hidden behind another: blocks that
+ * overlap (directly or through a chain of others) form a group, and within it each takes the first lane that is free when it starts. Every block of a
+ * group gets the group's lane count; a block that overlaps nothing is alone in one lane (the whole width). Results are in the order of `spans`.
+ */
+export declare function layoutLanes(spans: {
+    top: number;
+    height: number;
+}[]): Lane[];
+/** The horizontal placement of a block in its column: the whole width less a 2px margin, or its lane's share of it. */
+export declare function laneStyle({ lane, lanes }: Lane): {
+    left: string | number;
+    width?: string;
+    right?: number;
+};