@rapidmx/web-client 0.4.0 → 0.6.0

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
+export const REQUEST_LIST_PAGE_SIZE = 50;
+/**
+ * A newest-first list fetched a page at a time with "Load more". Only the most recently started `reload()`'s
+ * responses are applied, so a slow earlier fetch (e.g. the mount fetch racing a reload after a create) can't
+ * overwrite a newer list, and a "Load more" that was in flight during a reload is dropped.
+ *
+ * Paging is by offset, so "Load more" re-reads the previous page alongside the next one and continues after the last
+ * row already shown: rows created since shift older rows onto later pages (repeats are skipped), and rows deleted
+ * since shift them onto earlier pages (which a plain next-page fetch would silently skip). If that row can't be found
+ * in the two pages at all (it was deleted, or more than a page of rows came or went), the list reloads from the start.
+ */
+export function usePagedList(fetchPage, errorMessage) {
+    const pageSize = REQUEST_LIST_PAGE_SIZE;
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [hasMore, setHasMore] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const generation = useRef(0);
+    const nextPage = useRef(0);
+    const loaded = useRef(items);
+    loaded.current = items;
+    function describe(err) {
+        return err instanceof ApiRequestError ? err.message : errorMessage;
+    }
+    async function reload() {
+        const current = ++generation.current;
+        try {
+            const data = await fetchPage({ limit: pageSize, page: 0 });
+            if (current !== generation.current)
+                return;
+            setItems(data);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = 1;
+        }
+        catch (err) {
+            if (current === generation.current)
+                setLoadError(describe(err));
+        }
+        finally {
+            if (current === generation.current)
+                setLoading(false);
+        }
+    }
+    async function loadMore() {
+        const current = generation.current;
+        const page = nextPage.current;
+        setLoadingMore(true);
+        try {
+            const [previous, data] = await Promise.all([
+                fetchPage({ limit: pageSize, page: page - 1 }),
+                fetchPage({ limit: pageSize, page }),
+            ]);
+            if (current !== generation.current)
+                return;
+            const window = [...previous, ...data];
+            // "Load more" is only offered after a full page, so at least one row is shown.
+            const lastShown = loaded.current[loaded.current.length - 1].uid;
+            const boundary = window.map((item) => item.uid).lastIndexOf(lastShown);
+            if (boundary === -1) {
+                await reload();
+                return;
+            }
+            const after = window.slice(boundary + 1);
+            setItems((prev) => [...prev, ...after.filter((item) => !prev.some((existing) => existing.uid === item.uid))]);
+            setHasMore(data.length === pageSize);
+            setLoadError(null);
+            nextPage.current = page + 1;
+        }
+        catch (err) {
+            if (current === generation.current)
+                setLoadError(describe(err));
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }
+    function replaceItem(item) {
+        setItems((prev) => prev.map((existing) => (existing.uid === item.uid ? item : existing)));
+    }
+    return { items, loading, loadError, hasMore, loadingMore, reload, loadMore, replaceItem };
+}
+/** The "Load more" button for a `usePagedList()` list - renders nothing once there's nothing more to load. */
+export function LoadMoreButton({ list, label }) {
+    if (!list.hasMore) {
+        return null;
+    }
+    return (_jsx("div", { className: "mt-3", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: list.loadingMore, disabled: list.loadingMore, onClick: () => void list.loadMore(), children: label }) }));
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+export interface CalendarListSidebarMailbox {
+    mailbox: Mailbox;
+    calendarFolders: Folder[];
+    error?: string;
+}
+export interface CalendarListSidebarProps {
+    /** Every accessible mailbox's `calendar`-type folders, grouped per mailbox (see `CalendarShell`). */
+    mailboxCalendars: CalendarListSidebarMailbox[];
+    checkedFolderUids: Set<string>;
+    onToggle: (folderUid: string) => void;
+    onAddCalendar: (mailboxUid: string, name: string, color: string) => Promise<void>;
+    /** A calendar's display color - defaults to its own `color` (see `CalendarShell`'s `colorFor`). */
+    colorFor?: (folder: Folder) => string;
+}
+/**
+ * Calendar's left-sidebar checklist of calendars — one row per `calendar`-type folder, a color swatch,
+ * and a checkbox controlling whether that calendar's events are currently shown (the checked set is owned
+ * by `apps/www/calendar/index.tsx`, since it drives which folders get fanned out to on every reload).
+ * With one mailbox this is a single "My calendars" list, as before; with several, each mailbox gets its
+ * own section (a shared mailbox labeled as such, with a color-dot accent) and its own "+ Add calendar",
+ * which creates the calendar in that mailbox. "+ Add calendar" is a real `createFolder({type: "calendar",
+ * ...})` call — folder creation has no type restriction server-side, so this needed no new backend route.
+ */
+export default function CalendarListSidebar({ mailboxCalendars, checkedFolderUids, onToggle, onAddCalendar, colorFor, }: CalendarListSidebarProps): React.JSX.Element;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+export interface EventModalProps {
+    open: boolean;
+    onClose: () => void;
+    mailboxUid: string;
+    /** The calendar folder a new event is created into (ignored when editing — an existing event keeps
+     * its own `folderUid`). When `calendars` names more than one option, a "Calendar" selector lets the
+     * user override this default before saving. */
+    folderUid: string;
+    /** Every calendar the caller could create this event into. Omitted, or a single entry, means "only
+     * one calendar exists" — no selector is shown and `folderUid` is used as-is, matching this
+     * component's original single-calendar behavior exactly. */
+    calendars?: {
+        uid: string;
+        name: string;
+    }[];
+    /** Every mailbox a new event could be created in, each with its own calendars. With more than one, a
+     * "Mailbox" selector (create mode only) chooses the mailbox, which in turn drives the Calendar selector
+     * and the organizer address; `mailboxUid`/`folderUid` are the initial selection. */
+    mailboxOptions?: {
+        mailbox: Mailbox;
+        calendars: {
+            uid: string;
+            name: string;
+        }[];
+    }[];
+    organizerAddress: string;
+    /** The viewing mailbox's alias addresses - an event it organizes (or an invitation to it) may name any of
+     * them instead of `organizerAddress`. Defaults to that mailbox's `aliasAddresses` from `mailboxOptions`. */
+    organizerAliases?: string[];
+    /** `null` when creating a new event. */
+    occurrence: CalendarOccurrence | null;
+    /** Prefilled start/end for create mode (e.g. the day/slot the user clicked). */
+    initialStart?: Date;
+    initialEnd?: Date;
+    onSaved: () => void;
+    onDeleted: () => void;
+}
+/**
+ * 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, organizerAliases, occurrence, initialStart, initialEnd, onSaved, onDeleted, }: EventModalProps): React.JSX.Element;

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.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+export interface MonthViewProps {
+    /** Any date within the month to display. */
+    viewDate: Date;
+    /** Already expanded for the visible grid range — see `recurrence.ts`'s `expandAllOccurrences`. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectDay: (date: Date) => void;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+}
+/** 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 }: MonthViewProps): React.JSX.Element;

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.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+export interface RecurrenceEditorProps {
+    /** `null` means "does not repeat". */
+    value: RecurrenceRule | null;
+    onChange: (value: RecurrenceRule | null) => void;
+    /** Whether the event is all-day - its series expands in UTC, so the inclusive "Ends on" date is stored as
+     * the end of that UTC day rather than the local one (see `allDay.ts`'s `recurrenceUntilInstant()`). */
+    allDay?: boolean;
+    /** 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;
+}
+/**
+ * A recurring-event editor: frequency + interval, a weekday picker (weekly only), and an end
+ * condition (never / after N occurrences / on a date) — everything `RecurrenceRule` can express. The
+ * 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 }: RecurrenceEditorProps): React.JSX.Element;