@rapidmx/web-client 0.4.0 → 0.5.0

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

@@ -5,14 +5,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createCalendarEvent, respondToEvent, updateCalendarEvent, } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { createCalendarEvent, getCalendarEvent, respondToEvent, updateCalendarEvent, } from "@rapidmx/react-shared/calendar/calendarApi.js";
 import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
+import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
 import ResourcePicker from "./ResourcePicker.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -25,18 +27,83 @@ const RESPONSE_STATUS_LABEL = {
     declined: "Declined",
     tentative: "Tentative",
 };
+const MS_PER_MINUTE = 60000;
+const MS_PER_DAY = 86400000;
+/** Whether two ISO instants fall in the same minute - a stored `...T15:00:00Z` and the form's re-serialized
+ * `...T15:00:00.000Z` name the same time without being equal strings. */
+function sameMinute(a, b) {
+    return Math.round(new Date(a).getTime() / MS_PER_MINUTE) === Math.round(new Date(b).getTime() / MS_PER_MINUTE);
+}
+/** Milliseconds since midnight of an instant's wall clock in `timezone` (a timed event's own zone). */
+function wallTimeOfDayMs(instantMs, timezone) {
+    const wall = toEventWallClock(instantMs, timezone, false);
+    return ((wall % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;
+}
+/**
+ * Rewrites an edited occurrence's `startDate`/`endDate` for a save to the entire series. The modal only
+ * ever shows (and edits) *this occurrence's* dates, but the series is stored as its master record starting
+ * at the first occurrence - sending the occurrence's dates as-is would move the whole series' start to
+ * this occurrence. So only the change in time-of-day (and the new duration) is applied to the master's own
+ * start; the series keeps its original first date. Unchanged times aren't sent at all.
+ *
+ * Times of day are read on the event's own timezone wall clock (the series expands there), not the
+ * browser's, and the change is the smallest signed difference modulo 24h - moving 23:00 to 01:00 is two
+ * hours later (into the next day), never 22 hours earlier. The master's new start is converted back from
+ * that wall clock, so a master on the other side of a DST change keeps the chosen local time.
+ */
+async function toSeriesFields(occurrence, fields) {
+    const { startDate, endDate, ...rest } = fields;
+    if (sameMinute(startDate, occurrence.startDate) && sameMinute(endDate, occurrence.endDate)) {
+        return rest;
+    }
+    const master = await getCalendarEvent(occurrence.uid);
+    const timezone = fields.timezone;
+    const newStart = new Date(startDate).getTime();
+    const durationMs = new Date(endDate).getTime() - newStart;
+    let masterStart;
+    if (fields.allDay) {
+        // Timed -> all-day keeps the master's own date on its wall clock.
+        const masterDateKey = master.allDay
+            ? allDayDateKey(master.startDate)
+            : new Date(toEventWallClock(new Date(master.startDate).getTime(), timezone, false)).toISOString().slice(0, 10);
+        masterStart = new Date(allDayInstant(masterDateKey)).getTime();
+    }
+    else if (master.allDay) {
+        // All-day -> timed: the master's own date at the newly chosen wall-clock time.
+        const masterDateWall = new Date(allDayInstant(allDayDateKey(master.startDate))).getTime();
+        masterStart = fromEventWallClock(masterDateWall + wallTimeOfDayMs(newStart, timezone), timezone, false);
+    }
+    else {
+        const rawDelta = wallTimeOfDayMs(newStart, timezone) - wallTimeOfDayMs(new Date(occurrence.startDate).getTime(), timezone);
+        const delta = ((((rawDelta + MS_PER_DAY / 2) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY) - MS_PER_DAY / 2;
+        const masterWall = toEventWallClock(new Date(master.startDate).getTime(), timezone, false);
+        masterStart = fromEventWallClock(masterWall + delta, timezone, false);
+    }
+    return {
+        ...rest,
+        startDate: new Date(masterStart).toISOString(),
+        endDate: new Date(masterStart + durationMs).toISOString(),
+    };
+}
 /**
  * Create/view/edit/delete for a single calendar event. Editing or deleting a recurring event's
  * occurrence offers a choice between "this event" and "the entire series" (see
  * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, organizerAddress, occurrence, initialStart, initialEnd, onSaved, onDeleted, }) {
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, onSaved, onDeleted, }) {
     const [targetFolderUid, setTargetFolderUid] = useState(folderUid);
     const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
     const targetMailboxOption = mailboxOptions?.find((option) => option.mailbox.uid === targetMailboxUid);
     // Create mode follows the chosen mailbox; editing an existing event always keeps the passed-in values.
     const calendarChoices = !occurrence && targetMailboxOption ? targetMailboxOption.calendars : calendars;
     const effectiveOrganizerAddress = !occurrence && targetMailboxOption ? targetMailboxOption.mailbox.primarySmtpAddress : organizerAddress;
+    // Every address the viewing mailbox receives at - its primary address and its aliases, case-insensitively.
+    const ownAddresses = new Set([organizerAddress, ...(organizerAliases ?? mailboxOptions?.find((option) => option.mailbox.uid === mailboxUid)?.mailbox.aliasAddresses ?? [])].map((address) => address.toLowerCase()));
+    const isOwnAddress = (address) => ownAddresses.has(address.toLowerCase());
+    // An existing event organized by someone else is the viewing mailbox's copy of an invitation: only the
+    // organizer can change it (their next update would overwrite local edits anyway), so it's read-only
+    // apart from the RSVP controls.
+    const isInvited = !!occurrence && !isOwnAddress(occurrence.organizer.address) && !occurrence.attendees.some((a) => a.isOrganizer && isOwnAddress(a.address));
     function handleMailboxChange(nextMailboxUid) {
         setTargetMailboxUid(nextMailboxUid);
         const firstCalendar = mailboxOptions?.find((option) => option.mailbox.uid === nextMailboxUid)?.calendars[0];
@@ -46,8 +113,19 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     }
     const [title, setTitle] = useState(occurrence?.title ?? "");
     const [location, setLocation] = useState(occurrence?.location ?? "");
-    const [start, setStart] = useState(toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString()));
-    const [end, setEnd] = useState(toDatetimeLocal(occurrence?.endDate ?? initialEnd?.toISOString() ?? new Date(Date.now() + 30 * 60000).toISOString()));
+    // An all-day event is stored date-only with an exclusive end (see `allDay.ts`); the form shows its
+    // inclusive last day instead.
+    const [start, setStart] = useState(() => occurrence?.allDay
+        ? `${allDayDateKey(occurrence.startDate)}T00:00`
+        : toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString()));
+    const [end, setEnd] = useState(() => {
+        if (occurrence?.allDay) {
+            const startKey = allDayDateKey(occurrence.startDate);
+            const lastDayKey = addDaysToKey(allDayDateKey(occurrence.endDate), -1);
+            return `${lastDayKey < startKey ? startKey : lastDayKey}T00:00`;
+        }
+        return toDatetimeLocal(occurrence?.endDate ?? initialEnd?.toISOString() ?? new Date(Date.now() + 30 * 60000).toISOString());
+    });
     const [allDay, setAllDay] = useState(occurrence?.allDay ?? false);
     const [timezone] = useState(occurrence?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
     const [attendees, setAttendees] = useState(occurrence?.attendees ?? []);
@@ -60,17 +138,21 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
+    // A series save that moved the series but couldn't move every separately edited occurrence with it.
+    const [syncWarning, setSyncWarning] = useState(false);
     const [responding, setResponding] = useState(false);
     const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
     const addResourceButtonRef = useRef(null);
     // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
-    // `organizerAddress` is always this mailbox's own primary SMTP address (see `EventModalProps`), so
-    // finding it among `attendees` (and not as that attendee's own organizer flag) identifies exactly
+    // `organizerAddress` (plus the aliases) are this mailbox's own addresses (see `EventModalProps`), so
+    // finding one among `attendees` (and not as that attendee's own organizer flag) identifies exactly
     // that case. `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own
     // (see `calendarApi.ts`'s `respondToEvent` doc comment) — it always acts on `occurrence.uid` as a
     // single event document, so this deliberately does not consult `editScope`.
-    const myAttendeeIndex = occurrence ? attendees.findIndex((a) => a.address.toLowerCase() === organizerAddress.toLowerCase()) : -1;
+    const myAttendeeIndex = occurrence ? attendees.findIndex((a) => isOwnAddress(a.address)) : -1;
     const canRespond = myAttendeeIndex !== -1 && !attendees[myAttendeeIndex].isOrganizer;
+    // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
+    const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
     function updateAttendee(index, patch) {
         setAttendees((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
     }
@@ -91,35 +173,65 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
             setError("A title is required.");
             return;
         }
-        if (new Date(end) <= new Date(start)) {
-            setError("The end time must be after the start time.");
-            return;
+        let startDate;
+        let endDate;
+        if (allDay) {
+            const startKey = start.slice(0, 10);
+            const lastDayKey = end.slice(0, 10);
+            if (lastDayKey < startKey) {
+                setError("The end date can't be before the start date.");
+                return;
+            }
+            startDate = allDayInstant(startKey);
+            endDate = allDayInstant(addDaysToKey(lastDayKey, 1));
         }
+        else {
+            if (new Date(end) <= new Date(start)) {
+                setError("The end time must be after the start time.");
+                return;
+            }
+            startDate = new Date(start).toISOString();
+            endDate = new Date(end).toISOString();
+        }
+        // Only a stored event is updated in place, where a cleared field must be sent as `null`; creating
+        // (a new event, or the detached copy of one occurrence) just omits it.
+        const updatingInPlace = !!occurrence && !editingSingleOccurrence;
+        const cleared = updatingInPlace ? null : undefined;
         const fields = {
             title: title.trim(),
-            location: location.trim() || undefined,
-            startDate: new Date(start).toISOString(),
-            endDate: new Date(end).toISOString(),
+            location: location.trim() || cleared,
+            startDate,
+            endDate,
             allDay,
             timezone,
-            organizer: { address: effectiveOrganizerAddress, type: "to" },
             attendees,
-            recurrenceRule: recurrenceRule ?? undefined,
-            reminderMinutesBeforeStart: reminderMinutes.trim() ? Number(reminderMinutes) : undefined,
+            recurrenceRule: editingSingleOccurrence ? undefined : (recurrenceRule ?? cleared),
+            reminderMinutesBeforeStart: reminderMinutes.trim() ? Number(reminderMinutes) : cleared,
             busyStatus,
             autoReplyEnabled,
-            autoReplyMessage: autoReplyEnabled ? autoReplyMessage : undefined,
+            autoReplyMessage: autoReplyEnabled ? autoReplyMessage : cleared,
         };
         setSaving(true);
         try {
             if (!occurrence) {
-                await createCalendarEvent({ mailboxUid: targetMailboxUid, folderUid: targetFolderUid, ...fields });
+                // The organizer is only ever set on create - an edit keeps the event's own organizer.
+                await createCalendarEvent({
+                    mailboxUid: targetMailboxUid,
+                    folderUid: targetFolderUid,
+                    ...fields,
+                    organizer: { address: effectiveOrganizerAddress, type: "to" },
+                });
             }
-            else if (occurrence.isRecurringOccurrence && editScope === "occurrence") {
+            else if (editingSingleOccurrence) {
                 await detachOccurrence(occurrence, fields);
             }
             else if (occurrence.isRecurringOccurrence) {
-                await saveEventSeries(occurrence, fields);
+                const saved = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)));
+                if (saved.detachedOccurrenceSyncFailed) {
+                    // The series itself was saved - say so, and leave closing to the user once they've read it.
+                    setSyncWarning(true);
+                    return;
+                }
             }
             else {
                 await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...fields });
@@ -174,6 +286,15 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
             setResponding(false);
         }
     }
-    return (_jsx(Modal, { open: open, onClose: onClose, title: occurrence ? "Edit event" : "New event", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [error && _jsx(Alert, { children: error }), !occurrence && mailboxOptions && mailboxOptions.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "event-mailbox", children: _jsx("select", { id: "event-mailbox", className: INPUT_CLASS, value: targetMailboxUid, onChange: (e) => handleMailboxChange(e.target.value), children: mailboxOptions.map(({ mailbox }) => (_jsxs("option", { value: mailbox.uid, children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }, mailbox.uid))) }) })), !occurrence && calendarChoices && calendarChoices.length > 1 && (_jsx(FormField, { label: "Calendar", htmlFor: "event-calendar", children: _jsx("select", { id: "event-calendar", className: INPUT_CLASS, value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: calendarChoices.map((cal) => (_jsx("option", { value: cal.uid, children: cal.name }, cal.uid))) }) })), _jsx(FormField, { label: "Title", htmlFor: "event-title", children: _jsx("input", { id: "event-title", type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }) }), _jsx(FormField, { label: "Location", htmlFor: "event-location", children: _jsx("input", { id: "event-location", type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-3", children: [_jsx("input", { type: "checkbox", checked: allDay, onChange: (e) => setAllDay(e.target.checked) }), "All day"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Start", htmlFor: "event-start", children: _jsx("input", { id: "event-start", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? start.slice(0, 10) : start, onChange: (e) => setStart(allDay ? `${e.target.value}T00:00` : e.target.value) }) }), _jsx(FormField, { label: "End", htmlFor: "event-end", children: _jsx("input", { id: "event-end", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? end.slice(0, 10) : end, onChange: (e) => setEnd(allDay ? `${e.target.value}T00:00` : e.target.value) }) })] }), _jsx(FormField, { label: "Attendees", htmlFor: "event-attendees", children: _jsxs("div", { id: "event-attendees", className: "flex flex-col gap-2", children: [attendees.map((attendee, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: attendee.address, onChange: (e) => updateAttendee(i, { address: e.target.value }), "aria-label": `Attendee email ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt self-center", children: RESPONSE_STATUS_LABEL[attendee.responseStatus] }), _jsx("button", { type: "button", onClick: () => removeAttendee(i), className: "text-sm text-danger px-2", "aria-label": `Remove attendee ${i + 1}`, children: "\u00D7" })] }, i))), _jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("button", { type: "button", onClick: () => setAttendees((prev) => [...prev, { address: "", role: "required", responseStatus: "needsAction", isOrganizer: false }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add attendee" }), _jsx("button", { ref: addResourceButtonRef, type: "button", onClick: () => setResourcePickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" })] }), resourcePickerOpen && (_jsx(ResourcePicker, { anchorRef: addResourceButtonRef, onClose: () => setResourcePickerOpen(false), onSelect: addResource, excludeAddresses: attendees.map((a) => a.address.toLowerCase()) }))] }) }), canRespond && (_jsxs("div", { className: "flex flex-col gap-2 mb-3 p-3 rounded-sm bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("accepted"), children: "Accept" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("tentative"), children: "Tentative" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: responding, onClick: () => handleRespond("declined"), children: "Decline" })] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Busy status", htmlFor: "event-busyStatus", children: _jsx("select", { id: "event-busyStatus", className: INPUT_CLASS, value: busyStatus, onChange: (e) => setBusyStatus(e.target.value), children: BUSY_STATUSES.map((status) => (_jsx("option", { value: status, children: BUSY_STATUS_LABEL[status] }, status))) }) }), _jsx(FormField, { label: "Reminder (minutes before)", htmlFor: "event-reminder", children: _jsx("input", { id: "event-reminder", type: "number", min: 0, className: INPUT_CLASS, value: reminderMinutes, onChange: (e) => setReminderMinutes(e.target.value), placeholder: "None" }) })] }), _jsxs("div", { className: "mb-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: autoReplyEnabled, onChange: (e) => setAutoReplyEnabled(e.target.checked) }), "Send an automatic reply while this event is happening"] }), _jsx("p", { className: "text-xs text-text-muted mt-1", children: "Applies in addition to your mailbox\u2019s own Automatic Replies setting (see Settings) \u2014 this event\u2019s message takes over for its own start/end window." }), autoReplyEnabled && (_jsx("textarea", { "aria-label": "Automatic reply message", className: `${INPUT_CLASS} mt-2`, rows: 3, value: autoReplyMessage, onChange: (e) => setAutoReplyMessage(e.target.value), placeholder: "I'm out of office and back on..." }))] }), _jsx(FormField, { label: "Recurrence", htmlFor: "event-recurrence", children: _jsx(RecurrenceEditor, { value: recurrenceRule, onChange: setRecurrenceRule }) }), occurrence?.isRecurringOccurrence && (_jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm mb-3", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Apply changes to" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "occurrence", onChange: () => setEditScope("occurrence") }), "This event only"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "series", onChange: () => setEditScope("series") }), "The entire series"] })] })), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), occurrence &&
+    // The recurrence end date is stored in the frame the series expands in (UTC for all-day, local otherwise),
+    // so toggling All day re-stores the same chosen date in the new frame.
+    function handleAllDayChange(nextAllDay) {
+        setAllDay(nextAllDay);
+        setRecurrenceRule((rule) => rule?.until ? { ...rule, until: recurrenceUntilInstant(recurrenceUntilDateKey(rule.until, allDay), nextAllDay) } : rule);
+    }
+    if (syncWarning) {
+        return (_jsxs(Modal, { open: open, onClose: onSaved, title: "Series saved", children: [_jsx("p", { role: "alert", className: "text-sm mb-4", children: "The series was saved, but some occurrences you had changed individually couldn\u2019t be moved with it. They may now appear twice - check the calendar and delete any duplicate." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: onSaved, children: "OK" })] }));
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: occurrence ? "Edit event" : "New event", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [error && _jsx(Alert, { children: error }), canRespond && (_jsxs("div", { className: "flex flex-col gap-2 mb-3 p-3 rounded-sm bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("accepted"), children: "Accept" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("tentative"), children: "Tentative" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: responding, onClick: () => handleRespond("declined"), children: "Decline" })] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), isInvited && (_jsx("p", { className: "text-xs text-text-muted mb-3", children: "You were invited to this event. Only the organizer can change its details." })), _jsxs("fieldset", { disabled: isInvited, className: "flex flex-col gap-1 min-w-0", children: [!occurrence && mailboxOptions && mailboxOptions.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "event-mailbox", children: _jsx("select", { id: "event-mailbox", className: INPUT_CLASS, value: targetMailboxUid, onChange: (e) => handleMailboxChange(e.target.value), children: mailboxOptions.map(({ mailbox }) => (_jsxs("option", { value: mailbox.uid, children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }, mailbox.uid))) }) })), !occurrence && calendarChoices && calendarChoices.length > 1 && (_jsx(FormField, { label: "Calendar", htmlFor: "event-calendar", children: _jsx("select", { id: "event-calendar", className: INPUT_CLASS, value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: calendarChoices.map((cal) => (_jsx("option", { value: cal.uid, children: cal.name }, cal.uid))) }) })), _jsx(FormField, { label: "Title", htmlFor: "event-title", children: _jsx("input", { id: "event-title", type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }) }), _jsx(FormField, { label: "Location", htmlFor: "event-location", children: _jsx("input", { id: "event-location", type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-3", children: [_jsx("input", { type: "checkbox", checked: allDay, onChange: (e) => handleAllDayChange(e.target.checked) }), "All day"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Start", htmlFor: "event-start", children: _jsx("input", { id: "event-start", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? start.slice(0, 10) : start, onChange: (e) => setStart(allDay ? `${e.target.value}T00:00` : e.target.value) }) }), _jsx(FormField, { label: "End", htmlFor: "event-end", children: _jsx("input", { id: "event-end", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? end.slice(0, 10) : end, onChange: (e) => setEnd(allDay ? `${e.target.value}T00:00` : e.target.value) }) })] }), _jsx(FormField, { label: "Attendees", htmlFor: "event-attendees", children: _jsxs("div", { id: "event-attendees", className: "flex flex-col gap-2", children: [attendees.map((attendee, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: attendee.address, onChange: (e) => updateAttendee(i, { address: e.target.value }), "aria-label": `Attendee email ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt self-center", children: RESPONSE_STATUS_LABEL[attendee.responseStatus] }), _jsx("button", { type: "button", onClick: () => removeAttendee(i), className: "text-sm text-danger px-2", "aria-label": `Remove attendee ${i + 1}`, children: "\u00D7" })] }, i))), _jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("button", { type: "button", onClick: () => setAttendees((prev) => [...prev, { address: "", role: "required", responseStatus: "needsAction", isOrganizer: false }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add attendee" }), _jsx("button", { ref: addResourceButtonRef, type: "button", onClick: () => setResourcePickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" })] }), resourcePickerOpen && (_jsx(ResourcePicker, { anchorRef: addResourceButtonRef, onClose: () => setResourcePickerOpen(false), onSelect: addResource, excludeAddresses: attendees.map((a) => a.address.toLowerCase()) }))] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Busy status", htmlFor: "event-busyStatus", children: _jsx("select", { id: "event-busyStatus", className: INPUT_CLASS, value: busyStatus, onChange: (e) => setBusyStatus(e.target.value), children: BUSY_STATUSES.map((status) => (_jsx("option", { value: status, children: BUSY_STATUS_LABEL[status] }, status))) }) }), _jsx(FormField, { label: "Reminder (minutes before)", htmlFor: "event-reminder", children: _jsx("input", { id: "event-reminder", type: "number", min: 0, className: INPUT_CLASS, value: reminderMinutes, onChange: (e) => setReminderMinutes(e.target.value), placeholder: "None" }) })] }), _jsxs("div", { className: "mb-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: autoReplyEnabled, onChange: (e) => setAutoReplyEnabled(e.target.checked) }), "Send an automatic reply while this event is happening"] }), _jsx("p", { className: "text-xs text-text-muted mt-1", children: "Applies in addition to your mailbox\u2019s own Automatic Replies setting (see Settings) \u2014 this event\u2019s message takes over for its own start/end window." }), autoReplyEnabled && (_jsx("textarea", { "aria-label": "Automatic reply message", className: `${INPUT_CLASS} mt-2`, rows: 3, value: autoReplyMessage, onChange: (e) => setAutoReplyMessage(e.target.value), placeholder: "I'm out of office and back on..." }))] }), !editingSingleOccurrence && (_jsx(FormField, { label: "Recurrence", htmlFor: "event-recurrence", children: _jsx(RecurrenceEditor, { value: recurrenceRule, onChange: setRecurrenceRule, allDay: allDay, startWeekday: startWeekdayCode(start, allDay, timezone) }) })), occurrence?.isRecurringOccurrence && !isInvited && (_jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm mb-3", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Apply changes to" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "occurrence", onChange: () => setEditScope("occurrence") }), "This event only"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "series", onChange: () => setEditScope("series") }), "The entire series"] })] }))] }), _jsxs("div", { className: "flex gap-3 mt-2", children: [!isInvited && (_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), occurrence &&
                             (!occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2 ml-auto", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete series" })] })))] })] }) }));
 }

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
+import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
 import { dayDropId, eventDragId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { occursOnDay, startsOnDay } from "./allDay.js";
 const MAX_CHIPS_PER_DAY = 3;
-/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day/all-day
- * events are shown only on their start day — a deliberate v1 simplification, not a bug. */
+/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
+ * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
 export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent }) {
     const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
     const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
     const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
-    return (_jsx("div", { className: "flex-1 grid grid-cols-7 grid-rows-6 min-h-0", role: "grid", "aria-label": "Month", children: days.map((day) => (_jsx(DayCell, { day: day, inCurrentMonth: isSameMonth(day, viewDate), occurrences: occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectDay: onSelectDay, onSelectEvent: onSelectEvent }, day.toISOString()))) }));
+    return (_jsx("div", { className: "flex-1 grid grid-cols-7 grid-rows-6 min-h-0", role: "grid", "aria-label": "Month", children: days.map((day) => (_jsx(DayCell, { day: day, inCurrentMonth: isSameMonth(day, viewDate), occurrences: occurrences.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectDay: onSelectDay, onSelectEvent: onSelectEvent }, day.toISOString()))) }));
 }
 function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent }) {
     const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
@@ -22,7 +23,7 @@ function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay,
         ].join(" "), children: [_jsx("button", { type: "button", onClick: () => onSelectDay(day), className: [
                     "self-start text-xs font-semibold w-6 h-6 rounded-full flex items-center justify-center shrink-0",
                     isToday(day) ? "bg-primary text-white" : inCurrentMonth ? "text-text" : "text-text-muted",
-                ].join(" "), children: format(day, "d") }), _jsxs("div", { className: "flex-1 flex flex-col gap-0.5 min-h-0 overflow-hidden", children: [visible.map((occurrence) => (_jsx(EventChip, { occurrence: occurrence, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent }, occurrence.occurrenceKey))), overflowCount > 0 && (_jsxs("button", { type: "button", onClick: () => onSelectDay(day), className: "text-xs text-text-muted text-left hover:underline shrink-0", children: ["+", overflowCount, " more"] }))] })] }));
+                ].join(" "), children: format(day, "d") }), _jsxs("div", { className: "flex-1 flex flex-col gap-0.5 min-h-0 overflow-hidden", children: [visible.map((occurrence) => startsOnDay(occurrence, day) ? (_jsx(EventChip, { occurrence: occurrence, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent }, occurrence.occurrenceKey)) : (_jsx(ContinuationChip, { occurrence: occurrence, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent }, occurrence.occurrenceKey))), overflowCount > 0 && (_jsxs("button", { type: "button", onClick: () => onSelectDay(day), className: "text-xs text-text-muted text-left hover:underline shrink-0", children: ["+", overflowCount, " more"] }))] })] }));
 }
 function EventChip({ occurrence, color, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
@@ -36,3 +37,9 @@ function EventChip({ occurrence, color, onSelect, }) {
             isDragging ? "opacity-50" : "",
         ].join(" "), ...listeners, ...attributes, children: [occurrence.allDay ? "" : `${format(new Date(occurrence.startDate), "h:mma")} `, occurrence.title] }));
 }
+/** A multi-day event's chip on a day after its first: clickable, but not draggable (its drag id is
+ * already taken by the start day's chip) and without a start-time prefix. */
+function ContinuationChip({ occurrence, color, onSelect, }) {
+    const isFree = occurrence.busyStatus === "free";
+    return (_jsx("button", { type: "button", onClick: () => onSelect(occurrence), style: isFree ? undefined : { backgroundColor: color, color: "#fff" }, className: ["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : ""].join(" "), children: occurrence.title }));
+}

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
 import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { recurrenceUntilDateKey, recurrenceUntilInstant } from "./allDay.js";
 const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const INPUT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const FREQ_LABEL = {
@@ -21,20 +23,30 @@ 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 }) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO" }) {
     function handleEnable(enabled) {
-        onChange(enabled ? { freq: "weekly", interval: 1, byDay: ["MO"], exceptions: [] } : null);
+        onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
     // `update`/`toggleDay` are only ever invoked from handlers rendered inside the `{value && (...)}`
     // block below, so `value` is always non-null here — no defensive null check needed.
     function update(patch) {
         onChange({ ...value, ...patch });
     }
+    // A weekly rule always keeps at least one weekday: with none left, rrule would repeat every day instead.
     function toggleDay(day) {
         const current = value.byDay ?? [];
+        if (current.length === 1 && current[0] === day) {
+            return;
+        }
         const next = current.includes(day) ? current.filter((d) => d !== day) : [...current, day];
         update({ byDay: next });
     }
+    // react-shared passes `byDay` to rrule for every frequency, so a weekday list left over from Weekly would
+    // turn "every day" into "every Monday". Leaving Weekly drops it; entering Weekly starts on the event's own
+    // start weekday (a select only reports an actual change, so this is never Weekly -> Weekly).
+    function handleFrequency(freq) {
+        update({ freq, byDay: freq === "weekly" ? [startWeekday] : undefined });
+    }
     function handleEndCondition(condition) {
         if (condition === "never") {
             update({ count: undefined, until: undefined });
@@ -43,13 +55,36 @@ export default function RecurrenceEditor({ value, onChange }) {
             update({ count: 10, until: undefined });
         }
         else {
-            update({ until: new Date().toISOString(), count: undefined });
+            update({ until: recurrenceUntilInstant(format(new Date(), "yyyy-MM-dd"), allDay), count: undefined });
         }
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_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) => update({ interval: Number(e.target.value) }), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => update({ freq: 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: [
+    /** 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) {
+        if (raw.trim() === "")
+            return null;
+        const n = Math.floor(Number(raw));
+        return n >= 1 ? n : 1;
+    }
+    function handleInterval(raw) {
+        const interval = parsePositive(raw);
+        if (interval !== null)
+            update({ interval });
+    }
+    function handleCount(raw) {
+        const count = parsePositive(raw);
+        if (count !== null)
+            update({ count });
+    }
+    function handleUntil(raw) {
+        // A cleared (or partially typed) date input reports "" — keep the previous end date.
+        if (/^\d{4}-\d{2}-\d{2}$/.test(raw))
+            update({ until: recurrenceUntilInstant(raw, allDay) });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_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: [
                                 "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) => update({ count: Number(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 ? value.until.slice(0, 10) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => update({ until: new Date(e.target.value).toISOString() }), "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, 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,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addMinutes, format, isSameDay, startOfDay } from "date-fns";
+import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { occursOnDay } from "./allDay.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -15,7 +16,7 @@ const HOURS = Array.from({ length: 24 }, (_, h) => h);
  * calendar) — a practical scope cut, not an oversight.
  */
 export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }) {
-    const dayOccurrences = occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day));
+    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
     const dayStart = startOfDay(day);
     return (_jsxs("div", { role: "region", "aria-label": "Split view", className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), columns.map((col) => (_jsxs("div", { className: "flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border", children: [_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: col.color } }), _jsx("span", { className: "text-xs font-semibold truncate", children: col.name })] }, col.folderUid)))] }), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), columns.map((col) => (_jsx(SplitColumn, { column: col, dayStart: dayStart, occurrences: dayOccurrences.filter((occ) => occ.folderUid === col.folderUid), onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, col.folderUid)))] })] }));
 }
@@ -26,8 +27,13 @@ function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlo
             }), occurrences.map((occurrence) => {
                 const start = new Date(occurrence.startDate);
                 const end = new Date(occurrence.endDate);
-                const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
+                // 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 isFree = occurrence.busyStatus === "free";
                 return (_jsxs("div", { onClick: () => onSelectEvent(occurrence), style: {
                         position: "absolute",

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
+import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
 import { eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { occursOnDay, startsOnDay } from "./allDay.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -13,20 +14,37 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
     const allDayEvents = occurrences.filter((occ) => occ.allDay);
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
     return (_jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
-                            .filter((occ) => isSameDay(new Date(occ.startDate), day))
-                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
+                            .filter((occ) => occursOnDay(occ, day))
+                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
 }
 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) => (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
+            }), 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)))] }));
 }
 function TimeSlot({ start, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
     return (_jsx("button", { ref: setNodeRef, type: "button", onClick: () => onSelectSlot(start, addMinutes(start, SLOT_MINUTES)), 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")}` }));
 }
+/** 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),
+    };
+}
+/** 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, }) {
+    const isFree = occurrence.busyStatus === "free";
+    const { top, height } = blockGeometry(occurrence, dayStart);
+    return (_jsx("div", { 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" : ""].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
+}
 function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
@@ -34,13 +52,11 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     });
     const isFree = occurrence.busyStatus === "free";
     const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+    const { top, height } = blockGeometry(occurrence, dayStart);
     // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
     // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
     // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
     // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
-    const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
     return (_jsxs("div", { ref: setNodeRef, onClick: () => onSelect(occurrence), style: {
             position: "absolute",
             top,