@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -0,0 +1,70 @@
+import React, { ReactNode } from "react";
+import { RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { EventFormController } from "./eventForm.js";
+export declare const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+export declare const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+/** A form row: an icon in the left gutter and its content. */
+export declare function IconRow({ icon, children }: {
+    icon: ReactNode;
+    children: ReactNode;
+}): React.JSX.Element;
+/** The location row: a text box that is plain text until it is used. */
+export declare function LocationRow({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/** "Add video conferencing" and, once the event has a meeting, the button that joins it. */
+export declare function VideoConferencingRow({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/**
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
+ */
+export declare function GuestsField({ c, compact }: {
+    c: EventFormController;
+    compact: boolean;
+}): React.JSX.Element;
+/** The guests row of the quick popover. */
+export declare function GuestsRow({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/** The reminder row: the one notification an event has - an amount, its unit and a way to remove it - or "Add notification". */
+export declare function ReminderRow({ value, onChange }: {
+    value: string;
+    onChange: (minutes: string) => void;
+}): React.JSX.Element;
+/**
+ * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
+ * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
+ */
+export declare function RecurrenceSelect({ value, onChange, allDay, startWeekday, }: {
+    value: RecurrenceRule | null;
+    onChange: (rule: RecurrenceRule | null) => void;
+    allDay: boolean;
+    startWeekday: WeekdayCode | undefined;
+}): React.JSX.Element;
+/** [start date] [start time] to [end time] [end date], then "All day", the "Time zone" link (and its menu) and how the event repeats. */
+export declare function DateTimeControls({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/** The calendar this event is in: its colour and name, a choice between calendars (and mailboxes) when an event is being created. */
+export declare function CalendarField({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/**
+ * The description row: the rich-text box (`DescriptionEditor`). In the full card it is always there; in the quick-create popover (`collapsible`) it is an
+ * "Add description" row that opens the same box in place, as Google Calendar does - and stays open once there is text in it.
+ */
+export declare function DescriptionRow({ c, collapsible }: {
+    c: EventFormController;
+    collapsible: boolean;
+}): React.JSX.Element;
+/** Who may see the event's details, with what each choice means underneath. */
+export declare function VisibilitySelect({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;
+/** What guests may do with the event: ask for it to change, ask for guests to be added, see who else is invited. Only the organizer sets these. */
+export declare function GuestPermissions({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;

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

@@ -0,0 +1,191 @@
+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 { useRef, useState } from "react";
+import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import GuestInput from "./GuestInput.js";
+import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
+import RecurrenceEditor from "./RecurrenceEditor.js";
+import ResourcePicker from "./ResourcePicker.js";
+import { hasDescriptionText } from "./eventDialogFields.js";
+import { REMINDER_UNITS, RESPONSE_STATUS_LABEL, VISIBILITIES, VISIBILITY_HELP, VISIBILITY_LABEL, bestReminderUnit, } from "./eventFormat.js";
+export const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+export const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+/** A text field that reads as plain text until it is hovered or focused, as a row of the quick-create popover does. */
+const QUIET_INPUT_CLASS = "w-full min-w-0 text-sm py-1.5 bg-transparent text-text border-0 border-b border-transparent hover:border-border focus:border-primary focus:outline-none placeholder:text-text-muted";
+const ROW_ICON_CLASS = "shrink-0 text-text-muted mt-1.5";
+const ATTENDEE_ROLES = ["required", "optional", "resource"];
+/** A form row: an icon in the left gutter and its content. */
+export function IconRow({ icon, children }) {
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { "aria-hidden": "true", className: ROW_ICON_CLASS, children: icon }), _jsx("div", { className: "flex-1 min-w-0", children: children })] }));
+}
+/** The location row: a text box that is plain text until it is used. */
+export function LocationRow({ c }) {
+    return (_jsx(IconRow, { icon: _jsx(HiOutlineMapPin, { size: 20 }), children: _jsx("input", { type: "text", "aria-label": "Location", placeholder: "Add location", className: QUIET_INPUT_CLASS, value: c.values.location, onChange: (e) => c.update({ location: e.target.value }) }) }));
+}
+/** "Add video conferencing" and, once the event has a meeting, the button that joins it. */
+export function VideoConferencingRow({ c }) {
+    const { values } = c;
+    return (_jsxs(IconRow, { icon: _jsx(HiOutlineVideoCamera, { size: 20 }), children: [_jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: values.videoEnabled, onChange: (e) => c.update({ videoEnabled: e.target.checked }) }), "Add video conferencing"] }), values.videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), c.videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mb-1", children: c.videoError })), c.videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !c.joinUrl, onClick: () => window.open(c.joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !c.joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: c.organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }))] }));
+}
+/**
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
+ */
+export function GuestsField({ c, compact }) {
+    const { values } = c;
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const pickerAnchor = useRef(null);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(GuestInput, { id: "event-guests", label: "Add guests", placeholder: "Add guests", variant: compact ? "quiet" : "box", listedElsewhere: !compact, guests: values.attendees, invalid: values.guestInvalid, draft: values.guestDraft, skipAddresses: [c.organizerAddress], mailboxUid: values.targetMailboxUid, onChange: (next) => c.update({ attendees: next.guests, guestInvalid: next.invalid, guestDraft: next.draft }) }), compact ? null : (_jsxs(_Fragment, { children: [values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "w-7 h-7 shrink-0 rounded-full bg-primary/15 text-primary-dark text-xs font-semibold flex items-center justify-center uppercase", children: (attendee.displayName || attendee.address).charAt(0) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm truncate", children: attendee.displayName || attendee.address }), _jsxs("div", { className: "text-xs text-text-muted truncate", children: [attendee.displayName ? `${attendee.address} · ` : "", RESPONSE_STATUS_LABEL[attendee.responseStatus]] })] }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => c.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("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }, i))) })), _jsx("button", { ref: pickerAnchor, type: "button", onClick: () => setPickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" }), pickerOpen && (_jsx(ResourcePicker, { anchorRef: pickerAnchor, onClose: () => setPickerOpen(false), onSelect: (mailbox) => {
+                            c.addResource(mailbox);
+                            setPickerOpen(false);
+                        }, excludeAddresses: c.guestAddresses }))] }))] }));
+}
+/** The guests row of the quick popover. */
+export function GuestsRow({ c }) {
+    return (_jsx(IconRow, { icon: _jsx(HiOutlineUserGroup, { size: 20 }), children: _jsx(GuestsField, { c: c, compact: true }) }));
+}
+/** The reminder row: the one notification an event has - an amount, its unit and a way to remove it - or "Add notification". */
+export function ReminderRow({ value, onChange }) {
+    const [active, setActive] = useState(value.trim() !== "");
+    const [unit, setUnit] = useState(() => (value.trim() === "" ? "minutes" : bestReminderUnit(Number(value)).unit));
+    const factor = REMINDER_UNITS.find((u) => u.unit === unit).factor;
+    // What the amount box shows: the stored minutes in the chosen unit. A blank stays blank while the row is open.
+    const amount = value.trim() === "" ? "" : String(Math.round((Number(value) / factor) * 100) / 100);
+    function change(nextAmount, nextUnit) {
+        const nextFactor = REMINDER_UNITS.find((u) => u.unit === nextUnit).factor;
+        onChange(nextAmount.trim() === "" ? "" : String(Math.round(Number(nextAmount) * nextFactor)));
+    }
+    if (!active) {
+        return (_jsx(IconRow, { icon: _jsx(HiOutlineBell, { size: 20 }), children: _jsx("button", { type: "button", className: "text-sm text-text-muted hover:text-text py-1.5", onClick: () => {
+                    setActive(true);
+                    setUnit("minutes");
+                    onChange("30");
+                }, children: "Add notification" }) }));
+    }
+    return (_jsx(IconRow, { icon: _jsx(HiOutlineBell, { size: 20 }), children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Notification" }), _jsx("input", { type: "number", min: 0, className: `${INPUT_CLASS} !w-20`, "aria-label": "Reminder (minutes before)", value: amount, onChange: (e) => change(e.target.value, unit) }), _jsx("select", { className: SELECT_CLASS, "aria-label": "Reminder unit", value: unit, onChange: (e) => {
+                        const nextUnit = e.target.value;
+                        setUnit(nextUnit);
+                        change(amount, nextUnit);
+                    }, children: REMINDER_UNITS.map((u) => (_jsx("option", { value: u.unit, children: u.unit }, u.unit))) }), _jsx("span", { className: "text-text-muted", children: "before" }), _jsx("button", { type: "button", "aria-label": "Remove notification", className: "ml-auto w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", onClick: () => {
+                        setActive(false);
+                        onChange("");
+                    }, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }) }));
+}
+const WEEKDAYS_ONLY = ["MO", "TU", "WE", "TH", "FR"];
+const WEEKDAY_NAME = {
+    MO: "Monday",
+    TU: "Tuesday",
+    WE: "Wednesday",
+    TH: "Thursday",
+    FR: "Friday",
+    SA: "Saturday",
+    SU: "Sunday",
+};
+function presetRule(key, startWeekday) {
+    switch (key) {
+        case "daily":
+            return { freq: "daily", interval: 1, exceptions: [] };
+        case "weekly":
+            return { freq: "weekly", interval: 1, byDay: [startWeekday ?? "MO"], exceptions: [] };
+        case "monthly":
+            return { freq: "monthly", interval: 1, exceptions: [] };
+        case "yearly":
+            return { freq: "yearly", interval: 1, exceptions: [] };
+        case "weekdays":
+            return { freq: "weekly", interval: 1, byDay: [...WEEKDAYS_ONLY], exceptions: [] };
+    }
+}
+/** Which menu entry a rule is: one of the plain repeats, or "custom" for anything with an interval, an end or other weekdays. */
+function presetOf(rule, startWeekday) {
+    if (!rule) {
+        return "none";
+    }
+    if (rule.interval !== 1 || rule.count || rule.until || rule.byMonthDay?.length || rule.byMonth?.length) {
+        return "custom";
+    }
+    if (rule.freq === "weekly") {
+        const days = [...(rule.byDay ?? [])].sort().join(",");
+        if (days === [...WEEKDAYS_ONLY].sort().join(",")) {
+            return "weekdays";
+        }
+        return days === (startWeekday ?? "MO") ? "weekly" : "custom";
+    }
+    return rule.byDay?.length ? "custom" : rule.freq;
+}
+/**
+ * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
+ * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
+ */
+export function RecurrenceSelect({ value, onChange, allDay, startWeekday, }) {
+    // Picking "Custom…" for a rule that is also a plain repeat still opens the editor.
+    const [customRequested, setCustomRequested] = useState(false);
+    const selected = customRequested && value ? "custom" : presetOf(value, startWeekday);
+    function choose(key) {
+        setCustomRequested(key === "custom");
+        if (key === "none") {
+            onChange(null);
+        }
+        else if (key === "custom") {
+            onChange(value ?? presetRule("weekly", startWeekday));
+        }
+        else {
+            onChange({ ...presetRule(key, startWeekday), exceptions: value?.exceptions ?? [] });
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("select", { id: "event-recurrence", "aria-label": "Recurrence", className: SELECT_CLASS, value: selected, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "none", children: "Does not repeat" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: startWeekday ? `Weekly on ${WEEKDAY_NAME[startWeekday]}` : "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Annually" }), _jsx("option", { value: "weekdays", children: "Every weekday (Monday to Friday)" }), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), selected === "custom" && _jsx(RecurrenceEditor, { value: value, onChange: onChange, allDay: allDay, startWeekday: startWeekday, hideToggle: true })] }));
+}
+/** [start date] [start time] to [end time] [end date], then "All day", the "Time zone" link (and its menu) and how the event repeats. */
+export function DateTimeControls({ c }) {
+    const { values } = c;
+    const [zoneOpen, setZoneOpen] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx("input", { type: "date", "aria-label": "Event start date", className: `${SELECT_CLASS} min-w-0`, value: values.start.slice(0, 10), onChange: (e) => c.setStart(`${e.target.value}${values.start.slice(10)}`) }), !values.allDay && (_jsx("input", { type: "time", "aria-label": "Event start time", className: `${SELECT_CLASS} min-w-0`, value: values.start.slice(11, 16), onChange: (e) => c.setStart(`${values.start.slice(0, 11)}${e.target.value}`) })), _jsx("span", { className: "text-text-muted", children: "to" }), !values.allDay && (_jsx("input", { type: "time", "aria-label": "Event end time", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(11, 16), onChange: (e) => c.setEnd(`${values.end.slice(0, 11)}${e.target.value}`) })), _jsx("input", { type: "date", "aria-label": "Event end date", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(0, 10), onChange: (e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: values.allDay, onChange: (e) => c.onAllDayChange(e.target.checked) }), "All day"] }), _jsx("button", { type: "button", "aria-expanded": zoneOpen, className: "text-primary-dark hover:underline", onClick: () => setZoneOpen((open) => !open), children: "Time zone" }), !c.editingSingleOccurrence && (_jsx(RecurrenceSelect, { value: values.recurrenceRule, onChange: (rule) => c.update({ recurrenceRule: rule }), allDay: values.allDay, startWeekday: c.startWeekday }))] }), zoneOpen && (_jsx("select", { "aria-label": "Time zone", className: `${SELECT_CLASS} self-start max-w-full`, value: values.formZone, onChange: (e) => c.onTimeZoneChange(e.target.value), children: c.timeZones.map((zone) => (_jsx("option", { value: zone, children: zone }, zone))) }))] }));
+}
+/** The calendar this event is in: its colour and name, a choice between calendars (and mailboxes) when an event is being created. */
+export function CalendarField({ c }) {
+    const { values } = c;
+    const mailboxChoices = !c.occurrence && c.mailboxOptions && c.mailboxOptions.length > 1 ? c.mailboxOptions : undefined;
+    const calendarChoices = !c.occurrence && c.calendarChoices && c.calendarChoices.length > 1 ? c.calendarChoices : undefined;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [mailboxChoices && (_jsx("select", { "aria-label": "Mailbox", className: `${SELECT_CLASS} self-start 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))) })), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 h-3 rounded-full shrink-0", style: { backgroundColor: c.calendarColor } }), calendarChoices ? (_jsx("select", { "aria-label": "Calendar", className: `${SELECT_CLASS} min-w-0 max-w-full`, value: values.targetFolderUid, onChange: (e) => c.update({ targetFolderUid: e.target.value }), children: calendarChoices.map((cal) => (_jsx("option", { value: cal.uid, children: cal.name }, cal.uid))) })) : (_jsx("span", { className: "truncate", children: c.calendarName }))] })] }));
+}
+/**
+ * The description row: the rich-text box (`DescriptionEditor`). In the full card it is always there; in the quick-create popover (`collapsible`) it is an
+ * "Add description" row that opens the same box in place, as Google Calendar does - and stays open once there is text in it.
+ */
+export function DescriptionRow({ c, collapsible }) {
+    const [opened, setOpened] = useState(false);
+    if (collapsible && !opened && !hasDescriptionText(c.values.descriptionHtml)) {
+        return (_jsx(IconRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 20 }), children: _jsx("button", { type: "button", className: "text-sm text-text-muted hover:text-text py-1.5", onClick: () => setOpened(true), children: "Add description" }) }));
+    }
+    return (_jsx(IconRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 20 }), children: _jsx(LazyDescriptionEditor, { value: c.values.descriptionHtml, onChange: (html) => c.update({ descriptionHtml: html }), autoFocus: collapsible && opened }) }));
+}
+/** Who may see the event's details, with what each choice means underneath. */
+export function VisibilitySelect({ c }) {
+    const { visibility } = c.values;
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("select", { "aria-label": "Visibility", "aria-describedby": "event-visibility-help", className: `${SELECT_CLASS} !w-auto self-start`, value: visibility, onChange: (e) => c.update({ visibility: e.target.value }), children: VISIBILITIES.map((option) => (_jsx("option", { value: option, children: VISIBILITY_LABEL[option] }, option))) }), _jsx("p", { id: "event-visibility-help", className: "text-xs text-text-muted", children: VISIBILITY_HELP[visibility] })] }));
+}
+const GUEST_PERMISSIONS = [
+    {
+        key: "guestsCanModify",
+        label: "Modify event",
+        help: "Guests can ask you to change the title, location, description or time. What they ask for is sent to you and applied automatically when this is on.",
+    },
+    {
+        key: "guestsCanInviteOthers",
+        label: "Invite others",
+        help: "Guests can ask you to add more guests; those are added automatically when this is on.",
+    },
+    {
+        key: "guestsCanSeeGuestList",
+        label: "See guest list",
+        help: "When this is off, each guest is sent an invitation that names only themselves and you.",
+    },
+];
+/** What guests may do with the event: ask for it to change, ask for guests to be added, see who else is invited. Only the organizer sets these. */
+export function GuestPermissions({ c }) {
+    return (_jsxs("fieldset", { className: "flex flex-col gap-2 min-w-0", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Guest permissions" }), GUEST_PERMISSIONS.map(({ key, label, help }) => (_jsxs("div", { children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", "aria-describedby": `event-${key}-help`, checked: c.values[key], onChange: (e) => c.update({ [key]: e.target.checked }) }), label] }), _jsx("p", { id: `event-${key}-help`, className: "text-xs text-text-muted pl-6", children: help })] }, key)))] }));
+}

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

@@ -1,16 +1,9 @@
 import React from "react";
 import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-/**
- * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
- * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
- *
- * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
- * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
- * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
- * one.
- */
-export declare const VIDEO_LOCATION_PLACEHOLDER = "Video call \u2014 link in this invitation";
+import { EventAnchor } from "./EventShell.js";
+export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
+export type { EventAnchor } from "./EventShell.js";
 export interface EventModalProps {
     open: boolean;
     onClose: () => void;
@@ -36,6 +29,8 @@ export interface EventModalProps {
             name: string;
         }[];
     }[];
+    /** Each calendar's colour, keyed by folder uid: the dot next to the calendar's name. */
+    folderColors?: Record<string, 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`. */
@@ -45,12 +40,30 @@ export interface EventModalProps {
     /** Prefilled start/end for create mode (e.g. the day/slot the user clicked). */
     initialStart?: Date;
     initialEnd?: Date;
+    /** Create mode: start as an all-day event on `initialStart`'s day (a day of the month view was clicked). */
+    initialAllDay?: boolean;
+    /** Create mode: what was clicked (a slot, a day, the New event button), which the quick-create popover opens beside. Without one it
+     * opens centered near the top of the window. */
+    anchor?: EventAnchor;
+    /** Where the booking plugin's Settings pages are (`/settings/booking-types`) when it is running: a new event then has an Appointment
+     * schedule tab, and its More options opens the plugin's own new-link page. Without it there are only the Event and Task tabs. */
+    bookingHref?: string;
     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
+ * The calendar's event dialog, in three faces drawn through one frame (`EventShell`):
+ *
+ * - **A new event** opens as a quick-create popover (`EventQuickForm`, beside what was clicked; a bottom sheet on a phone). "More options"
+ * grows it into the full card (`EventExpandedForm`) with everything typed so far still in it.
+ * The popover has tabs (`QuickCreateTabs`): Event, Task, and - when the booking plugin is running (`bookingHref`) - Appointment schedule.
+ * The Task and Appointment faces are drawn by `QuickCreateFaces`, share the Event tab's title, mailbox and calendar, and only ever
+ * create a task or a booking type; the Event tab is the form it always was.
+ * - **An existing event** opens read-only (`EventDetails`): what the event says, the invited reader's Accept / Tentative / Decline,
+ * and Delete. The reader who organized it also gets Modify, which turns the same card into the full form; closing that form returns
+ * to the details, discarding the edits (a save closes everything, as it always did).
+ *
+ * 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;
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, onSaved, onDeleted, }: EventModalProps): React.JSX.Element | null;