@rapidmx/web-client 0.14.1 → 0.15.1

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

@@ -0,0 +1,24 @@
+import React from "react";
+/** What the New event popover can create. */
+export type QuickTab = "event" | "task" | "appointment";
+/** The DOM ids that tie each tab to its panel (`aria-controls` / `aria-labelledby`). */
+export declare function quickTabId(tab: QuickTab): string;
+export declare function quickPanelId(tab: QuickTab): string;
+/** The attributes of the element holding the selected tab's content. */
+export declare function quickPanelProps(tab: QuickTab): {
+    role: "tabpanel";
+    id: string;
+    "aria-labelledby": string;
+};
+export interface QuickCreateTabsProps {
+    tab: QuickTab;
+    onChange: (tab: QuickTab) => void;
+    /** Whether the booking plugin is running: without it there is no Appointment schedule tab. */
+    showAppointment: boolean;
+}
+/**
+ * The segmented control across the top of the New event popover: Event, Task and (when the booking plugin is running) Appointment schedule.
+ * A WAI-ARIA tab list with automatic activation: only the selected tab is in the Tab order, and the arrow keys (wrapping), Home and End
+ * move to and select another.
+ */
+export default function QuickCreateTabs({ tab, onChange, showAppointment }: QuickCreateTabsProps): React.JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TAB_LABELS = { event: "Event", task: "Task", appointment: "Appointment schedule" };
+/** The DOM ids that tie each tab to its panel (`aria-controls` / `aria-labelledby`). */
+export function quickTabId(tab) {
+    return `quick-create-tab-${tab}`;
+}
+export function quickPanelId(tab) {
+    return `quick-create-panel-${tab}`;
+}
+/** The attributes of the element holding the selected tab's content. */
+export function quickPanelProps(tab) {
+    return { role: "tabpanel", id: quickPanelId(tab), "aria-labelledby": quickTabId(tab) };
+}
+/**
+ * The segmented control across the top of the New event popover: Event, Task and (when the booking plugin is running) Appointment schedule.
+ * A WAI-ARIA tab list with automatic activation: only the selected tab is in the Tab order, and the arrow keys (wrapping), Home and End
+ * move to and select another.
+ */
+export default function QuickCreateTabs({ tab, onChange, showAppointment }) {
+    const tabs = showAppointment ? ["event", "task", "appointment"] : ["event", "task"];
+    function handleKeyDown(event) {
+        const index = tabs.indexOf(tab);
+        let next;
+        if (event.key === "ArrowRight") {
+            next = tabs[(index + 1) % tabs.length];
+        }
+        else if (event.key === "ArrowLeft") {
+            next = tabs[(index + tabs.length - 1) % tabs.length];
+        }
+        else if (event.key === "Home") {
+            next = tabs[0];
+        }
+        else if (event.key === "End") {
+            next = tabs[tabs.length - 1];
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        onChange(next);
+    }
+    return (_jsx("div", { role: "tablist", "aria-label": "What to create", className: "mx-5 mb-3 flex gap-1 rounded-lg bg-surface-alt p-1", children: tabs.map((id) => (_jsx("button", { type: "button", role: "tab", id: quickTabId(id), "aria-selected": id === tab, "aria-controls": quickPanelId(id), tabIndex: id === tab ? 0 : -1, onClick: () => onChange(id), onKeyDown: handleKeyDown, className: [
+                "flex-1 min-w-0 rounded-md px-2 py-1.5 text-sm font-medium truncate focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+                id === tab ? "bg-surface text-text shadow-sm" : "text-text-muted hover:text-text",
+            ].join(" "), children: TAB_LABELS[id] }, id))) }));
+}

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

@@ -0,0 +1,25 @@
+import React, { FormEvent, ReactNode } from "react";
+import { EventFormController } from "./eventForm.js";
+import { QuickTab } from "./QuickCreateTabs.js";
+export interface QuickFaceFrameProps {
+    c: EventFormController;
+    /** The `QuickCreateTabs` strip. */
+    tabs: ReactNode;
+    /** The tab this face is the panel of. */
+    tab: QuickTab;
+    error: string | null;
+    /** Leave the title out (the Appointment schedule tab once it has saved). */
+    hideTitle?: boolean;
+    /** Enter in a field, or the Save button. */
+    onSubmit: (event: FormEvent) => void;
+    /** What sits in the tab's panel under the title. */
+    children: ReactNode;
+    /** The buttons along the bottom (More options, Save). */
+    footer: ReactNode;
+}
+/**
+ * The frame the Task and Appointment schedule faces share, drawn the way `EventQuickForm` draws the Event face: a grip to drag the popover
+ * and a close button, the tab strip, then the panel - an error, the title (the one the Event tab holds, so switching tabs keeps it) and the
+ * face's own rows - and the buttons.
+ */
+export default function QuickFaceFrame({ c, tabs, tab, error, hideTitle, onSubmit, children, footer }: QuickFaceFrameProps): React.JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useContext } from "react";
+import { HiOutlineBars2, HiOutlineXMark } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { EventShellContext } from "./EventShell.js";
+import { quickPanelProps } from "./QuickCreateTabs.js";
+/**
+ * The frame the Task and Appointment schedule faces share, drawn the way `EventQuickForm` draws the Event face: a grip to drag the popover
+ * and a close button, the tab strip, then the panel - an error, the title (the one the Event tab holds, so switching tabs keeps it) and the
+ * face's own rows - and the buttons.
+ */
+export default function QuickFaceFrame({ c, tabs, tab, error, hideTitle, onSubmit, children, footer }) {
+    const { dragHandleProps } = useContext(EventShellContext);
+    return (_jsxs("form", { onSubmit: onSubmit, className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between px-2 pt-2", children: [dragHandleProps ? (_jsx("div", { ...dragHandleProps, "aria-hidden": "true", className: "flex-1 h-7 flex items-center cursor-move text-text-muted select-none touch-none", children: _jsx(HiOutlineBars2, { size: 20 }) })) : (_jsx("div", { className: "flex-1" })), _jsx("button", { type: "button", "aria-label": "Close", onClick: c.onCancel, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), tabs, _jsxs("div", { ...quickPanelProps(tab), className: "flex flex-col gap-3 px-5 pb-3", children: [error && _jsx(Alert, { children: error }), !hideTitle && (_jsx("div", { className: "pl-8", children: _jsx("input", { type: "text", "aria-label": "Title", placeholder: "Add title", "data-autofocus": true, className: "w-full text-xl bg-transparent text-text border-0 border-b-2 border-primary/50 focus:border-primary focus:outline-none pb-1 placeholder:text-text-muted", value: c.values.title, onChange: (e) => c.update({ title: e.target.value }) }) })), children] }), _jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: footer })] }));
+}

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

@@ -10,6 +10,9 @@ export interface RecurrenceEditorProps {
     /** The weekday the event starts on (in the frame its series expands in - see `allDay.ts`'s
      * `startWeekdayCode()`): the day a new weekly rule, or one switched to Weekly, repeats on. Defaults to Monday. */
     startWeekday?: WeekdayCode;
+    /** Leaves out the "Repeats" checkbox, for a caller that already turns repeating on and off itself (the event form's
+     * "Does not repeat" menu): what remains is the rule's details, shown only while there is a rule. */
+    hideToggle?: boolean;
 }
 /**
  * A recurring-event editor: frequency + interval, a weekday picker (weekly only), and an end
@@ -17,4 +20,4 @@ export interface RecurrenceEditorProps {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay, startWeekday }: RecurrenceEditorProps): React.JSX.Element;
+export default function RecurrenceEditor({ value, onChange, allDay, startWeekday, hideToggle }: RecurrenceEditorProps): React.JSX.Element;

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

@@ -23,7 +23,7 @@ function endConditionOf(rule) {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO" }) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", hideToggle = false }) {
     function handleEnable(enabled) {
         onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
@@ -81,7 +81,7 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
         if (/^\d{4}-\d{2}-\d{2}$/.test(raw))
             update({ until: recurrenceUntilInstant(raw, allDay) });
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] }), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => handleInterval(e.target.value), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => handleFrequency(e.target.value), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [!hideToggle && (_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] })), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, 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"

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

@@ -0,0 +1,36 @@
+import React from "react";
+/** The event a guest asks about: what it says now (the form starts from it and sends only what differs) and which row of it the request is for. */
+export interface ChangeSubject {
+    /** The event's uid on this mailbox (`CalendarEvent.uid`, or `MessageInvite.calendarEventUid`): the row the organizer's answer will come back to. */
+    uid: string;
+    title: string;
+    location?: string | null;
+    /** ISO 8601 instants; absent for an event whose time is not known. */
+    startDate?: string;
+    endDate?: string;
+    allDay: boolean;
+    /** Part of a series: a request changes the whole series (its own row), so its time - which is one occurrence's - is not offered. */
+    recurring: boolean;
+    description?: string | null;
+    descriptionHtml?: string | null;
+    /** Everyone already invited, whatever the case, so a guest is not added twice. */
+    guestAddresses: string[];
+}
+export interface RequestChangeFormProps {
+    subject: ChangeSubject;
+    /** The organizer lets guests change the title, location, description and time (`guestsCanModify`). */
+    canChange: boolean;
+    /** The organizer lets guests add guests (`guestsCanInviteOthers`). */
+    canInvite: boolean;
+    /** The request was sent. */
+    onSent: () => void;
+    onCancel: () => void;
+}
+/**
+ * A guest's request to the organizer, for an event whose organizer lets guests change it and/or invite others (`POST /calendar-events/:id/request-change`).
+ * Starts from the event as it is and sends only what the guest changed: the title, location, description and time (with `canChange`) and guests to add (with
+ * `canInvite`). Nothing changes on the guest's own calendar - the organizer's copy is updated (automatically, when the flags allow it) and the change
+ * comes back as the organizer's next update - so the form says so, and afterwards a "Your change was sent to the organizer" notification confirms it.
+ * A title or location can be changed, not cleared (the server refuses that), and the time of a series or an all-day event is not offered.
+ */
+export default function RequestChangeForm({ subject, canChange, canInvite, onSent, onCancel }: RequestChangeFormProps): React.JSX.Element;

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { HiOutlineXMark } from "react-icons/hi2";
+import { requestEventChange } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { htmlToPlainText, sanitizeEventDescriptionHtml } from "@rapidmx/react-shared/calendar/eventDescription.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { notify } from "../../notifications/store.js";
+import { INPUT_CLASS } from "./EventFormParts.js";
+import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
+import { descriptionProblem, initialDescriptionHtml } from "./eventDialogFields.js";
+import { mergeGuests } from "./eventFormat.js";
+const MINUTE_MS = 60000;
+/** Whether two instants (ISO, or a form's local time) name the same minute. */
+function sameMinute(a, b) {
+    return Math.round(new Date(a).getTime() / MINUTE_MS) === Math.round(new Date(b).getTime() / MINUTE_MS);
+}
+/**
+ * A guest's request to the organizer, for an event whose organizer lets guests change it and/or invite others (`POST /calendar-events/:id/request-change`).
+ * Starts from the event as it is and sends only what the guest changed: the title, location, description and time (with `canChange`) and guests to add (with
+ * `canInvite`). Nothing changes on the guest's own calendar - the organizer's copy is updated (automatically, when the flags allow it) and the change
+ * comes back as the organizer's next update - so the form says so, and afterwards a "Your change was sent to the organizer" notification confirms it.
+ * A title or location can be changed, not cleared (the server refuses that), and the time of a series or an all-day event is not offered.
+ */
+export default function RequestChangeForm({ subject, canChange, canInvite, onSent, onCancel }) {
+    const canChangeTime = canChange && !subject.allDay && !subject.recurring && !!subject.startDate && !!subject.endDate;
+    const [title, setTitle] = useState(subject.title);
+    const [location, setLocation] = useState(subject.location ?? "");
+    const [start, setStart] = useState(subject.startDate ? toDatetimeLocal(subject.startDate) : "");
+    const [end, setEnd] = useState(subject.endDate ? toDatetimeLocal(subject.endDate) : "");
+    const [descriptionHtml, setDescriptionHtml] = useState(() => initialDescriptionHtml(subject));
+    const [added, setAdded] = useState([]);
+    const [guestDraft, setGuestDraft] = useState("");
+    const [error, setError] = useState(null);
+    const [sending, setSending] = useState(false);
+    const heading = canChange ? "Request a change" : "Add guests";
+    /** Adds what was typed into the guests box, returning the guests as they now stand; a mistyped address stays in the box and is said. */
+    function addTypedGuests() {
+        const invited = [...subject.guestAddresses, ...added.map((guest) => guest.address)].map((address) => ({ address }));
+        const merged = mergeGuests(invited.map((guest) => ({ ...guest, role: "required", responseStatus: "needsAction", isOrganizer: false })), guestDraft);
+        if (merged.invalid.length > 0) {
+            setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
+            setGuestDraft(merged.invalid.join(" "));
+            return undefined;
+        }
+        setGuestDraft("");
+        return merged.attendees.slice(invited.length).map((guest) => ({ address: guest.address }));
+    }
+    function handleGuestKey(event) {
+        if (event.key === "Enter" || event.key === "," || event.key === ";") {
+            event.preventDefault();
+            setError(null);
+            const more = addTypedGuests();
+            if (more) {
+                setAdded((current) => [...current, ...more]);
+            }
+        }
+    }
+    async function handleSubmit(event) {
+        event.preventDefault();
+        setError(null);
+        const typed = canInvite ? addTypedGuests() : [];
+        if (!typed) {
+            return;
+        }
+        const guests = [...added, ...typed];
+        const request = {};
+        if (canChange) {
+            if (title.trim() !== subject.title.trim()) {
+                if (!title.trim()) {
+                    setError("Enter a title, or leave it as it is.");
+                    return;
+                }
+                request.title = title.trim();
+            }
+            if (location.trim() !== (subject.location ?? "").trim()) {
+                if (!location.trim()) {
+                    setError("Enter a location, or leave it as it is.");
+                    return;
+                }
+                request.location = location.trim();
+            }
+            if (canChangeTime && (!sameMinute(start, subject.startDate) || !sameMinute(end, subject.endDate))) {
+                const startMs = new Date(start).getTime();
+                const endMs = new Date(end).getTime();
+                if (Number.isNaN(startMs) || Number.isNaN(endMs) || endMs <= startMs) {
+                    setError("The end time must be after the start time.");
+                    return;
+                }
+                request.startDate = new Date(startMs).toISOString();
+                request.endDate = new Date(endMs).toISOString();
+            }
+            const html = sanitizeEventDescriptionHtml(descriptionHtml);
+            if (html !== sanitizeEventDescriptionHtml(initialDescriptionHtml(subject)) && descriptionHtml !== initialDescriptionHtml(subject)) {
+                const plain = htmlToPlainText(html);
+                if (!plain) {
+                    setError("Enter a description, or leave it as it is.");
+                    return;
+                }
+                const tooLong = descriptionProblem(html);
+                if (tooLong) {
+                    setError(tooLong);
+                    return;
+                }
+                request.descriptionHtml = html;
+                request.description = plain;
+            }
+        }
+        if (guests.length > 0) {
+            request.addAttendees = guests;
+        }
+        if (Object.keys(request).length === 0) {
+            setError("Change something first.");
+            return;
+        }
+        setSending(true);
+        try {
+            await requestEventChange(subject.uid, request);
+            notify({
+                kind: "success",
+                title: "Your change was sent to the organizer",
+                message: "The event on your calendar updates when the organizer's update comes back.",
+            });
+            onSent();
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't send your change");
+            setSending(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: (event) => void handleSubmit(event), "aria-label": heading, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: heading }), _jsx("button", { type: "button", "aria-label": "Cancel request", onClick: onCancel, className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you." }), error && _jsx(Alert, { children: error }), canChange && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Title", _jsx("input", { type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Location", _jsx("input", { type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) })] }), canChangeTime && (_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Starts", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Ends", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), !canChangeTime && (_jsx("p", { className: "text-xs text-text-muted", children: subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer." })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium", children: "Description" }), _jsx(LazyDescriptionEditor, { value: descriptionHtml, onChange: setDescriptionHtml })] })] })), canInvite && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Guests to add", _jsx("input", { type: "text", className: INPUT_CLASS, placeholder: "name@example.com", value: guestDraft, onChange: (e) => setGuestDraft(e.target.value), onKeyDown: handleGuestKey })] }), added.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-1.5", children: added.map((guest, index) => (_jsxs("li", { className: "flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5", children: [_jsx("span", { className: "truncate max-w-[16rem]", children: guest.address }), _jsx("button", { type: "button", "aria-label": `Remove ${guest.address}`, onClick: () => setAdded((current) => current.filter((_, i) => i !== index)), className: "w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, guest.address))) }))] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "submit", loading: sending, disabled: sending, className: "!w-auto", children: "Send request" }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", disabled: sending, onClick: onCancel, children: "Cancel" })] })] }));
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventAnchor } from "./EventShell.js";
 export interface SplitDayColumn {
     folderUid: string;
     name: string;
@@ -12,8 +13,8 @@ export interface SplitDayViewProps {
      * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
     occurrences: CalendarOccurrence[];
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`. */
-    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`; `anchor` is the slot. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
 }
 /**
  * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { addDays, addMinutes, format, startOfDay } from "date-fns";
 import { occursOnDay } from "./allDay.js";
+import { anchorOf } from "./EventShell.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -18,12 +19,12 @@ const HOURS = Array.from({ length: 24 }, (_, h) => h);
 export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }) {
     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)))] })] }));
+    return (_jsxs("div", { role: "region", "aria-label": "Split view", "data-calendar-scroller": true, 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)))] })] }));
 }
 function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlot, }) {
     return (_jsxs("div", { className: "flex-1 min-w-0 relative border-l border-border", children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
                 const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return (_jsx("button", { type: "button", onClick: () => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(slotStart, "h:mm a")} in ${column.name}` }, i));
+                return (_jsx("button", { type: "button", onClick: (e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(slotStart, "h:mm a")} in ${column.name}` }, i));
             }), occurrences.map((occurrence) => {
                 const start = new Date(occurrence.startDate);
                 const end = new Date(occurrence.endDate);

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

@@ -0,0 +1,40 @@
+import React, { ReactNode } from "react";
+import { TaskPriority } from "@rapidmx/react-shared/tasks/tasksApi.js";
+import { EventFormController } from "./eventForm.js";
+/**
+ * What the Task tab holds besides the title (which is the Event tab's): kept by `QuickCreateFaces`, so it survives a trip to another tab.
+ * `dueDate` and `reminder` are on the device's clock, as the Tasks app's own form reads them.
+ */
+export interface TaskDraft {
+    /** `yyyy-MM-dd`, or `""` for a task with no due date. */
+    dueDate: string;
+    /** A date-only due date (local midnight, what the Tasks app writes) rather than a time on it. */
+    allDay: boolean;
+    /** `HH:mm`, used when `allDay` is off. */
+    dueTime: string;
+    /** The `TaskList` chosen; `""` is the default "Tasks" list. */
+    listUid: string;
+    body: string;
+    priority: TaskPriority;
+    /** `yyyy-MM-ddTHH:mm`, or `""` for no reminder. */
+    reminder: string;
+    myDay: boolean;
+}
+/** A new task's starting values: due on the day of the slot or day that was clicked, all day, with the slot's time ready if a time is wanted. */
+export declare function initialTaskDraft(start: string, allDayClick: boolean): TaskDraft;
+export interface TaskQuickFormProps {
+    c: EventFormController;
+    draft: TaskDraft;
+    onDraftChange: (patch: Partial<TaskDraft>) => void;
+    tabs: ReactNode;
+    /** The card: notes, priority, a reminder and My Day as well. */
+    expanded: boolean;
+    onExpand: () => void;
+}
+/**
+ * The Task tab of the New event popover (and, with More options, its card): creates a task in the chosen mailbox's Tasks folder with
+ * `POST /api/mail/tasks`. Title, due date (all day, or a time on it), which mailbox and - when the mailbox has any - which task list; the
+ * card adds notes, priority, a reminder and My Day - every field a `Task` has that a person can fill in (an assignee is chosen in the Tasks app).
+ * The calendar does not show tasks, so a save closes the popover with a "Task added" notification instead of reloading anything.
+ */
+export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded, onExpand }: TaskQuickFormProps): React.JSX.Element;

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { parseISO } from "date-fns";
+import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineClock, HiOutlineFlag, HiOutlineFolder, HiOutlineListBullet, HiOutlineSun, HiOutlineXMark, } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createTask, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
+import { notify } from "../../notifications/store.js";
+import { INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
+import QuickFaceFrame from "./QuickFaceFrame.js";
+/** A new task's starting values: due on the day of the slot or day that was clicked, all day, with the slot's time ready if a time is wanted. */
+export function initialTaskDraft(start, allDayClick) {
+    return {
+        dueDate: start.slice(0, 10),
+        allDay: true,
+        dueTime: allDayClick ? "09:00" : start.slice(11, 16),
+        listUid: "",
+        body: "",
+        priority: "normal",
+        reminder: "",
+        myDay: false,
+    };
+}
+/**
+ * The Task tab of the New event popover (and, with More options, its card): creates a task in the chosen mailbox's Tasks folder with
+ * `POST /api/mail/tasks`. Title, due date (all day, or a time on it), which mailbox and - when the mailbox has any - which task list; the
+ * card adds notes, priority, a reminder and My Day - every field a `Task` has that a person can fill in (an assignee is chosen in the Tasks app).
+ * The calendar does not show tasks, so a save closes the popover with a "Task added" notification instead of reloading anything.
+ */
+export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded, onExpand }) {
+    const { values } = c;
+    const [lists, setLists] = useState([]);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    // The chosen mailbox's task lists (a mailbox with none has just the default one, and no choice is shown).
+    useEffect(() => {
+        let cancelled = false;
+        setLists([]);
+        void listTaskLists(values.targetMailboxUid)
+            .catch(() => [])
+            .then((result) => {
+            if (!cancelled) {
+                setLists(result);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [values.targetMailboxUid]);
+    const mailboxChoices = c.mailboxOptions && c.mailboxOptions.length > 1 ? c.mailboxOptions : undefined;
+    // A list of another mailbox that was chosen before the mailbox changed is no longer one.
+    const listUid = lists.some((list) => list.uid === draft.listUid) ? draft.listUid : "";
+    async function handleSubmit(event) {
+        event.preventDefault();
+        setError(null);
+        const title = values.title.trim();
+        if (!title) {
+            setError("A title is required.");
+            return;
+        }
+        if (draft.dueDate && !draft.allDay && !draft.dueTime) {
+            setError("Pick a time, or choose All day.");
+            return;
+        }
+        setSaving(true);
+        try {
+            const mailboxUid = values.targetMailboxUid;
+            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks");
+            if (!folderUid) {
+                setError("That mailbox has no Tasks folder.");
+                return;
+            }
+            await createTask({
+                mailboxUid,
+                folderUid,
+                title,
+                body: draft.body.trim() || undefined,
+                // A date-only due date is the local day's midnight, the way the Tasks app writes one.
+                dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                priority: draft.priority,
+                reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
+                taskListUid: listUid || undefined,
+                myDay: draft.myDay || undefined,
+            });
+            notify({ kind: "success", title: "Task added", message: `“${title}” was added to Tasks.` });
+            c.onCancel();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create this task.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs(QuickFaceFrame, { c: c, tabs: tabs, tab: "task", error: error, onSubmit: (event) => void handleSubmit(event), footer: _jsxs(_Fragment, { children: [!expanded && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onExpand, children: "More options" })), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" })] }), children: [_jsx(IconRow, { icon: _jsx(HiOutlineClock, { size: 20 }), children: _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm", children: [_jsx("input", { type: "date", "aria-label": "Due date", className: `${SELECT_CLASS} min-w-0`, value: draft.dueDate, onChange: (e) => onDraftChange({ dueDate: e.target.value }) }), draft.dueDate && !draft.allDay && (_jsx("input", { type: "time", "aria-label": "Due time", className: `${SELECT_CLASS} min-w-0`, value: draft.dueTime, onChange: (e) => onDraftChange({ dueTime: e.target.value }) })), draft.dueDate && (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: draft.allDay, onChange: (e) => onDraftChange({ allDay: e.target.checked }) }), "All day"] }))] }) }), mailboxChoices && (_jsx(IconRow, { icon: _jsx(HiOutlineFolder, { size: 20 }), children: _jsx("select", { "aria-label": "Mailbox", className: `${SELECT_CLASS} max-w-full`, value: values.targetMailboxUid, onChange: (e) => c.onMailboxChange(e.target.value), children: mailboxChoices.map(({ mailbox }) => (_jsxs("option", { value: mailbox.uid, children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }, mailbox.uid))) }) })), lists.length > 0 && (_jsx(IconRow, { icon: _jsx(HiOutlineListBullet, { size: 20 }), children: _jsxs("select", { "aria-label": "Task list", className: `${SELECT_CLASS} max-w-full`, value: listUid, onChange: (e) => onDraftChange({ listUid: e.target.value }), children: [_jsx("option", { value: "", children: "Tasks" }), lists.map((list) => (_jsx("option", { value: list.uid, children: list.name }, list.uid)))] }) })), expanded && (_jsxs(_Fragment, { children: [_jsx(IconRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 20 }), children: _jsx("textarea", { "aria-label": "Notes", rows: 3, placeholder: "Add notes", className: INPUT_CLASS, value: draft.body, onChange: (e) => onDraftChange({ body: e.target.value }) }) }), _jsx(IconRow, { icon: _jsx(HiOutlineFlag, { size: 20 }), children: _jsxs("select", { "aria-label": "Priority", className: `${SELECT_CLASS} max-w-full`, value: draft.priority, onChange: (e) => onDraftChange({ priority: e.target.value }), children: [_jsx("option", { value: "low", children: "Low priority" }), _jsx("option", { value: "normal", children: "Normal priority" }), _jsx("option", { value: "high", children: "High priority" })] }) }), _jsx(IconRow, { icon: _jsx(HiOutlineBell, { size: 20 }), children: draft.reminder ? (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "datetime-local", "aria-label": "Reminder", className: `${SELECT_CLASS} min-w-0`, value: draft.reminder, onChange: (e) => onDraftChange({ reminder: e.target.value }) }), _jsx("button", { type: "button", "aria-label": "Remove reminder", className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", onClick: () => onDraftChange({ reminder: "" }), children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] })) : (_jsx("button", { type: "button", className: "text-sm text-text-muted hover:text-text py-1.5", onClick: () => onDraftChange({ reminder: `${draft.dueDate || values.start.slice(0, 10)}T09:00` }), children: "Add reminder" })) }), _jsx(IconRow, { icon: _jsx(HiOutlineSun, { size: 20 }), children: _jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: draft.myDay, onChange: (e) => onDraftChange({ myDay: e.target.checked }) }), "Add to My Day"] }) })] }))] }));
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventAnchor } from "./EventShell.js";
 export interface TimeGridViewProps {
     /** One day for the Day view, seven for the Week view, five for the Work Week view. */
     days: Date[];
@@ -8,8 +9,9 @@ export interface TimeGridViewProps {
     /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
     folderColors: Record<string, string>;
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
-    onSelectSlot: (start: Date, end: Date) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. `anchor` is the slot, for the
+     * quick-create popover to open beside. */
+    onSelectSlot: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 /** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
  * differ only in how many day columns are shown), with a day-header row and all-day events in a

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

@@ -3,6 +3,7 @@ import { useDraggable, useDroppable } from "@dnd-kit/core";
 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";
+import { anchorOf } from "./EventShell.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -13,7 +14,7 @@ const HOURS = Array.from({ length: 24 }, (_, h) => h);
 export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     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
+    return (_jsxs("div", { "data-calendar-scroller": true, 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) => 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())))] })] }));
 }
@@ -26,7 +27,7 @@ function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot
 }
 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")}` }));
+    return (_jsx("button", { ref: setNodeRef, type: "button", onClick: (e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
 }
 /** A block's position within its day column. A multi-day event is drawn in every day column it
  * overlaps, clipped to that day. */