@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef, useState } from "react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { BsEraser, BsLink45Deg, BsListOl, BsListUl, BsTypeBold, BsTypeItalic, BsTypeUnderline } from "react-icons/bs";
+import { safeDescriptionHref } from "@rapidmx/react-shared/calendar/eventDescription.js";
+/**
+ * The plain text on a clipboard as paragraphs, one for each line - what `handlePaste` inserts instead of the pasted formatting. Empty lines are kept as
+ * empty paragraphs, so a pasted block keeps its shape.
+ */
+function paragraphsOf(text) {
+    return text.split(/\r\n|\r|\n/).map((line) => ({ type: "paragraph", content: line ? [{ type: "text", text: line }] : [] }));
+}
+/**
+ * What a typed link address is: an `http`, `https` or `mailto` link, with `https://` put in front of an address that names no scheme ("example.com") and
+ * `mailto:` in front of a plain email address. `undefined` for anything else (`javascript:`, `data:`, ...).
+ */
+export function linkFromInput(input) {
+    const text = input.trim();
+    if (/\s/.test(text)) {
+        return undefined;
+    }
+    if (/^[a-z][a-z0-9+.-]*:/i.test(text)) {
+        return safeDescriptionHref(text);
+    }
+    return safeDescriptionHref(/^[^\s@/]+@[^\s@/]+$/.test(text) ? `mailto:${text}` : `https://${text}`);
+}
+const NO_MARKS = { bold: false, italic: false, underline: false, bulletList: false, orderedList: false, link: false };
+/**
+ * The rich-text box of an event's description, as Google Calendar draws it: a toolbar (bold, italic, underline, numbered list, bulleted list, link, remove
+ * formatting) over the text. Built on TipTap with only the schema an event description may hold - paragraphs, line breaks, bold, italic, underline, lists and
+ * `http`/`https`/`mailto` links, so the HTML it writes has nothing the server would remove. Ctrl/Cmd+B, I and U format, Ctrl/Cmd+K asks for a link, and a
+ * paste keeps the text and drops the formatting.
+ *
+ * The toolbar is a WAI-ARIA toolbar: one tab stop, the arrow keys, Home and End move along it, and each toggle says whether it is on (`aria-pressed`). The
+ * buttons do not take focus from the text, so a selection survives pressing one.
+ */
+export default function DescriptionEditor({ value, onChange, autoFocus, label = "Description" }) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const openLinkRef = useRef(null);
+    // The paste handler is created with the editor, before the editor exists.
+    const editorRef = useRef(null);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: false,
+                blockquote: false,
+                code: false,
+                codeBlock: false,
+                horizontalRule: false,
+                strike: false,
+                dropcursor: false,
+                gapcursor: false,
+                trailingNode: false,
+                link: {
+                    openOnClick: false,
+                    autolink: false,
+                    linkOnPaste: false,
+                    protocols: ["http", "https", "mailto"],
+                    HTMLAttributes: { rel: "noopener noreferrer", target: "_blank", class: "text-primary-dark underline" },
+                },
+            }),
+            Placeholder.configure({ placeholder: "Add description" }),
+        ],
+        content: value,
+        autofocus: autoFocus ? "end" : false,
+        immediatelyRender: false,
+        editorProps: {
+            attributes: { role: "textbox", "aria-multiline": "true", "aria-label": label },
+            handlePaste: (_view, event) => {
+                // A paste that came without a clipboard (ProseMirror then reads it back through a hidden field) has no text to give.
+                const text = event.clipboardData?.getData("text/plain") ?? "";
+                if (!text) {
+                    return false;
+                }
+                event.preventDefault();
+                editorRef.current.chain().focus().insertContent(paragraphsOf(text)).run();
+                return true;
+            },
+            handleKeyDown: (_view, event) => {
+                if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === "k") {
+                    event.preventDefault();
+                    openLinkRef.current();
+                    return true;
+                }
+                return false;
+            },
+        },
+        onUpdate: ({ editor: updated }) => onChangeRef.current(updated.getHTML()),
+    });
+    editorRef.current = editor;
+    // Which formats the caret is in (re-read on every transaction). There is no editor until it has mounted, and then nothing is on.
+    const marks = useEditorState({
+        editor,
+        selector: ({ editor: current }) => current
+            ? {
+                bold: current.isActive("bold"),
+                italic: current.isActive("italic"),
+                underline: current.isActive("underline"),
+                bulletList: current.isActive("bulletList"),
+                orderedList: current.isActive("orderedList"),
+                link: current.isActive("link"),
+            }
+            : NO_MARKS,
+    });
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [linkText, setLinkText] = useState("");
+    const [linkError, setLinkError] = useState(null);
+    const [focusIndex, setFocusIndex] = useState(0);
+    const buttons = useRef([]);
+    function openLink() {
+        setLinkText(editor.getAttributes("link").href ?? "");
+        setLinkError(null);
+        setLinkOpen(true);
+    }
+    openLinkRef.current = openLink;
+    function closeLink() {
+        setLinkOpen(false);
+        editor.commands.focus();
+    }
+    function submitLink(event) {
+        // The description sits inside the event's own form: applying a link must not submit that.
+        event.preventDefault();
+        event.stopPropagation();
+        const chain = editor.chain().focus();
+        if (linkText.trim() === "") {
+            chain.extendMarkRange("link").unsetLink().run();
+        }
+        else {
+            const href = linkFromInput(linkText);
+            if (!href) {
+                setLinkError("Enter a web address (http or https) or an email address.");
+                return;
+            }
+            if (editor.state.selection.empty && !editor.isActive("link")) {
+                chain.insertContent({ type: "text", text: linkText.trim(), marks: [{ type: "link", attrs: { href } }] }).run();
+            }
+            else {
+                chain.extendMarkRange("link").setLink({ href }).run();
+            }
+        }
+        setLinkOpen(false);
+    }
+    const items = [
+        { label: "Bold", icon: BsTypeBold, pressed: marks.bold, onClick: () => editor.chain().focus().toggleBold().run() },
+        { label: "Italic", icon: BsTypeItalic, pressed: marks.italic, onClick: () => editor.chain().focus().toggleItalic().run() },
+        { label: "Underline", icon: BsTypeUnderline, pressed: marks.underline, onClick: () => editor.chain().focus().toggleUnderline().run() },
+        { label: "Numbered list", icon: BsListOl, pressed: marks.orderedList, onClick: () => editor.chain().focus().toggleOrderedList().run() },
+        { label: "Bulleted list", icon: BsListUl, pressed: marks.bulletList, onClick: () => editor.chain().focus().toggleBulletList().run() },
+        { label: "Link", icon: BsLink45Deg, pressed: marks.link, onClick: openLink },
+        { label: "Remove formatting", icon: BsEraser, onClick: () => editor.chain().focus().unsetAllMarks().run() },
+    ];
+    function handleToolbarKeyDown(event) {
+        const last = items.length - 1;
+        const next = event.key === "ArrowRight" ? (focusIndex === last ? 0 : focusIndex + 1)
+            : event.key === "ArrowLeft" ? (focusIndex === 0 ? last : focusIndex - 1)
+                : event.key === "Home" ? 0
+                    : event.key === "End" ? last
+                        : undefined;
+        if (next !== undefined) {
+            event.preventDefault();
+            setFocusIndex(next);
+            buttons.current[next].focus();
+        }
+    }
+    return (_jsxs("div", { className: "border border-border rounded-md bg-surface focus-within:border-primary", children: [_jsx("div", { role: "toolbar", "aria-label": "Description formatting", onKeyDown: handleToolbarKeyDown, className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1 border-b border-border", children: items.map((item, index) => (_jsx("button", { ref: (element) => {
+                        buttons.current[index] = element;
+                    }, type: "button", "aria-label": item.label, title: item.label, "aria-pressed": item.pressed, disabled: !editor, tabIndex: index === focusIndex ? 0 : -1, onFocus: () => setFocusIndex(index), 
+                    // Pressing a button must not move focus (and the selection) out of the text.
+                    onMouseDown: (event) => event.preventDefault(), onClick: item.onClick, className: [
+                        "w-7 h-7 flex items-center justify-center rounded-sm disabled:opacity-40",
+                        item.pressed ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:bg-surface-alt hover:text-text",
+                    ].join(" "), children: _jsx(item.icon, { size: 15, "aria-hidden": "true" }) }, item.label))) }), linkOpen && (_jsxs("div", { className: "flex flex-col gap-1 px-2 py-1.5 border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "Link address", placeholder: "https://example.com", value: linkText, onChange: (event) => {
+                                    setLinkText(event.target.value);
+                                    setLinkError(null);
+                                }, onKeyDown: (event) => {
+                                    if (event.key === "Enter") {
+                                        submitLink(event);
+                                    }
+                                    else if (event.key === "Escape") {
+                                        // Closes the prompt, not the dialog around it.
+                                        event.stopPropagation();
+                                        closeLink();
+                                    }
+                                }, className: "flex-1 min-w-0 text-sm py-1 px-2 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "button", onClick: submitLink, className: "text-xs font-semibold text-primary-dark hover:underline", children: "Apply" }), _jsx("button", { type: "button", onClick: closeLink, className: "text-xs font-medium text-text-muted hover:underline", children: "Cancel" })] }), linkError && (_jsx("p", { role: "alert", className: "text-xs text-danger", children: linkError }))] })), _jsx(EditorContent, { editor: editor, className: "px-3 py-2 text-sm max-h-64 overflow-y-auto [&_.tiptap]:outline-none [&_.tiptap]:min-h-[4.5rem] [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-5 [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-5 [&_.tiptap_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_.tiptap_p.is-editor-empty:first-child]:before:text-text-muted [&_.tiptap_p.is-editor-empty:first-child]:before:float-left [&_.tiptap_p.is-editor-empty:first-child]:before:h-0 [&_.tiptap_p.is-editor-empty:first-child]:before:pointer-events-none" })] }));
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface EventDescriptionViewProps {
+    /** The description as HTML, from the server or an invitation - untrusted, so it is read into allowed elements only (`parseEventDescription()`) and drawn as
+     * React elements, never as markup. */
+    html?: string | null;
+    /** The plain-text description, shown (line breaks kept) when there is no HTML, or when the HTML holds nothing this can draw. */
+    text?: string | null;
+    className?: string;
+}
+/**
+ * An event's description, read-only: the rich text with its bold, italics, underline, lists and links (which open in a new tab, `noopener noreferrer`),
+ * else the plain text. Nothing is drawn for an event with no description.
+ */
+export default function EventDescriptionView({ html, text, className }: EventDescriptionViewProps): React.JSX.Element | null;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { htmlToPlainText, parseEventDescription } from "@rapidmx/react-shared/calendar/eventDescription.js";
+function renderNodes(nodes) {
+    return nodes.map((node, index) => {
+        if ("text" in node) {
+            return node.text;
+        }
+        switch (node.tag) {
+            case "br":
+                return _jsx("br", {}, index);
+            case "a":
+                return (_jsx("a", { href: node.href, target: "_blank", rel: "noopener noreferrer", className: "text-primary-dark underline break-words", children: renderNodes(node.children) }, index));
+            case "ul":
+                return (_jsx("ul", { className: "list-disc pl-5 my-0.5", children: renderNodes(node.children) }, index));
+            case "ol":
+                return (_jsx("ol", { className: "list-decimal pl-5 my-0.5", children: renderNodes(node.children) }, index));
+            case "p":
+                return (_jsx("p", { className: "mb-1 last:mb-0 min-h-[1lh]", children: renderNodes(node.children) }, index));
+            case "li":
+                return _jsx("li", { children: renderNodes(node.children) }, index);
+            case "strong":
+                return _jsx("strong", { children: renderNodes(node.children) }, index);
+            case "em":
+                return _jsx("em", { children: renderNodes(node.children) }, index);
+            case "u":
+                return _jsx("u", { children: renderNodes(node.children) }, index);
+        }
+    });
+}
+/**
+ * An event's description, read-only: the rich text with its bold, italics, underline, lists and links (which open in a new tab, `noopener noreferrer`),
+ * else the plain text. Nothing is drawn for an event with no description.
+ */
+export default function EventDescriptionView({ html, text, className }) {
+    if (htmlToPlainText(html) !== "") {
+        return _jsx("div", { className: ["break-words", className].filter(Boolean).join(" "), children: renderNodes(parseEventDescription(html)) });
+    }
+    return text?.trim() ? _jsx("div", { className: ["break-words whitespace-pre-wrap", className].filter(Boolean).join(" "), children: text }) : null;
+}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { AttendeeResponseInput } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+export interface EventDetailsProps {
+    occurrence: CalendarOccurrence;
+    /** Whether this mailbox is invited to the event rather than organizing it: only the organizer can change an event, so there is no
+     * Modify, and the mailbox may answer instead. */
+    isInvited: boolean;
+    /** Set only when this mailbox is an invited attendee (one of the attendees, and not the organizer): the answer it has given so far, which
+     * also switches on the Accept / Tentative / Decline block. */
+    myResponse?: AttendeeResponseInput | "needsAction";
+    /** Whether an address is one of this mailbox's own (its primary address or an alias): tells the reader's own entry from the other guests when the organizer
+     * has hidden the guest list. */
+    isOwnAddress?: (address: string) => boolean;
+    calendarName?: string;
+    calendarColor?: string;
+    onClose: () => void;
+    /** Modify: switch to the edit form. */
+    onModify: () => void;
+    onSaved: () => void;
+    onDeleted: () => void;
+}
+/**
+ * What clicking an existing event shows first: everything the event says, read-only. The reader who organized it (or whose event has no
+ * other organizer) can Modify or Delete it; one who was invited can answer (Accept, Tentative, Decline) or remove it from their own
+ * calendar, but not change it - the organizer's next update would overwrite that anyway. When the organizer allows guests to ask for changes (or for
+ * guests to be added) the invited reader can "Request a change" / "Add guests": the request goes to the organizer (`RequestChangeForm`) and nothing here
+ * changes until their update arrives. When the organizer hides the guest list the reader sees only themselves and is told so.
+ *
+ * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
+ * its time and that it is busy - with nothing to change, delete or answer.
+ */
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }: EventDetailsProps): React.JSX.Element;

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineBriefcase, HiOutlineCheck, HiOutlineClock, HiOutlineMapPin, HiOutlineUser, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark, } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { guestPermissionsOf, respondToEvent, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { htmlToPlainText } from "@rapidmx/react-shared/calendar/eventDescription.js";
+import { deleteEventOccurrence, deleteEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
+import { describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { getVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
+import EventDescriptionView from "./EventDescriptionView.js";
+import RequestChangeForm from "./RequestChangeForm.js";
+import { BUSY_STATUS_LABEL, RESPONSE_STATUS_LABEL, VISIBILITY_LABEL, describeGuestPermissions, describeReminder, formatStoredWhen } from "./eventFormat.js";
+const ROLE_LABEL = { required: "", optional: "Optional", resource: "Room/equipment" };
+function DetailRow({ icon, children }) {
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted mt-0.5", children: icon }), _jsx("div", { className: "flex-1 min-w-0 break-words", children: children })] }));
+}
+/**
+ * What clicking an existing event shows first: everything the event says, read-only. The reader who organized it (or whose event has no
+ * other organizer) can Modify or Delete it; one who was invited can answer (Accept, Tentative, Decline) or remove it from their own
+ * calendar, but not change it - the organizer's next update would overwrite that anyway. When the organizer allows guests to ask for changes (or for
+ * guests to be added) the invited reader can "Request a change" / "Add guests": the request goes to the organizer (`RequestChangeForm`) and nothing here
+ * changes until their update arrives. When the organizer hides the guest list the reader sees only themselves and is told so.
+ *
+ * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
+ * its time and that it is busy - with nothing to change, delete or answer.
+ */
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }) {
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [requesting, setRequesting] = useState(false);
+    // The organizer's own join link for the event's video meeting: `undefined` while it is fetched, `null` once known to be none.
+    const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
+    const videoMeetingUid = occurrence.videoMeetingUid;
+    // The link lives on the meeting, not on the event, so it is fetched once here. A failure and a meeting with no link at all are the
+    // same thing to this view - there is nothing to open either way - so both settle on `null`.
+    useEffect(() => {
+        if (!videoMeetingUid) {
+            return;
+        }
+        let cancelled = false;
+        void getVideoMeeting(videoMeetingUid)
+            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .catch(() => null)
+            .then((url) => {
+            if (!cancelled) {
+                setOrganizerJoinUrl(url);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [videoMeetingUid]);
+    // The same scheme allow-list a reminder's own location gets: a hostile or malformed join link never reaches `window.open()`.
+    const joinUrl = joinMeetingUrl(organizerJoinUrl);
+    async function handleDelete(scope) {
+        setError(null);
+        setBusy(true);
+        try {
+            if (occurrence.isRecurringOccurrence && scope === "occurrence") {
+                await deleteEventOccurrence(occurrence);
+            }
+            else {
+                await deleteEventSeries(occurrence);
+            }
+            onDeleted();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not delete this event.");
+            setBusy(false);
+        }
+    }
+    // `@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.
+    async function handleRespond(responseStatus) {
+        setError(null);
+        setBusy(true);
+        try {
+            await respondToEvent(occurrence.uid, responseStatus);
+            // A decline soft-deletes the mailbox's own copy server-side - treat it the same as a
+            // delete rather than a save so the calendar view drops it immediately.
+            if (responseStatus === "declined") {
+                onDeleted();
+            }
+            else {
+                onSaved();
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not send your response.");
+            setBusy(false);
+        }
+    }
+    if (occurrence.redacted) {
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: "Busy" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 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" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [_jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) }), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "This time is busy. The event\u2019s details are private, so only its time is shown." })] }), _jsx("div", { className: "flex px-5 pb-4", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" }) })] }));
+    }
+    const permissions = guestPermissionsOf(occurrence);
+    // The organizer hid the guest list: this mailbox's own copy lists only itself (the server sends nothing more), and that is all that is shown.
+    const hiddenList = isInvited && !permissions.guestsCanSeeGuestList;
+    const allGuests = occurrence.attendees.filter((a) => !a.isOrganizer);
+    const guests = hiddenList ? allGuests.filter((a) => !!isOwnAddress?.(a.address)) : allGuests;
+    const hasDescription = htmlToPlainText(occurrence.descriptionHtml) !== "" || !!occurrence.description?.trim();
+    // An invited reader may ask the organizer for what the organizer allows.
+    const askable = isInvited && myResponse !== undefined;
+    const canChange = askable && permissions.guestsCanModify;
+    const canInvite = askable && permissions.guestsCanInviteOthers;
+    const organizerName = occurrence.organizer.displayName;
+    const eventZone = occurrence.timezone;
+    const answers = [
+        { response: "accepted", label: "Accept" },
+        { response: "tentative", label: "Tentative" },
+        { response: "declined", label: "Decline" },
+    ];
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: occurrence.title || "(no title)" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 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" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [error && _jsx(Alert, { children: error }), _jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) }), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] }), !occurrence.allDay && eventZone && eventZone !== deviceTimeZone() && (_jsxs("div", { className: "text-text-muted", children: ["Event time zone: ", eventZone.replace(/_/g, " ")] }))] }), occurrence.location && (_jsx(DetailRow, { icon: _jsx(HiOutlineMapPin, { size: 18 }), children: _jsx("div", { children: occurrence.location }) })), hasDescription && (_jsx(DetailRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 18 }), children: _jsx(EventDescriptionView, { html: occurrence.descriptionHtml, text: occurrence.description }) })), videoMeetingUid && (_jsx(DetailRow, { icon: _jsx(HiOutlineVideoCamera, { size: 18 }), children: _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !joinUrl, onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }) })), _jsxs(DetailRow, { icon: _jsx(HiOutlineUser, { size: 18 }), children: [_jsx("div", { children: organizerName || occurrence.organizer.address }), _jsxs("div", { className: "text-text-muted", children: [organizerName ? `${occurrence.organizer.address} · ` : "", "Organizer"] })] }), (guests.length > 0 || hiddenList) && (_jsxs(DetailRow, { icon: _jsx(HiOutlineUserGroup, { size: 18 }), children: [_jsx("div", { className: "font-medium mb-1", children: hiddenList ? "The organizer has hidden the guest list" : guests.length === 1 ? "1 guest" : `${guests.length} guests` }), _jsx("ul", { className: "flex flex-col gap-1", children: guests.map((guest, i) => (_jsxs("li", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("span", { className: "min-w-0 truncate", children: [guest.displayName || guest.address, ROLE_LABEL[guest.role] && _jsxs("span", { className: "text-text-muted", children: [" (", ROLE_LABEL[guest.role], ")"] })] }), _jsx("span", { className: "shrink-0 text-xs text-text-muted", children: RESPONSE_STATUS_LABEL[guest.responseStatus] })] }, i))) }), !isInvited && _jsx("div", { className: "text-xs text-text-muted mt-1", children: describeGuestPermissions(permissions) })] })), _jsxs(DetailRow, { icon: _jsx(HiOutlineBriefcase, { size: 18 }), children: [_jsx("div", { children: BUSY_STATUS_LABEL[occurrence.busyStatus] }), _jsx("div", { className: "text-text-muted", children: VISIBILITY_LABEL[visibilityOf(occurrence)] }), occurrence.autoReplyEnabled && (_jsx("div", { className: "text-text-muted", children: "Sends an automatic reply while this event is happening" }))] }), _jsx(DetailRow, { icon: _jsx(HiOutlineBell, { size: 18 }), children: _jsx("div", { children: describeReminder(occurrence.reminderMinutesBeforeStart) }) }), calendarName && (_jsxs("div", { className: "flex items-center gap-3 text-text-muted", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 h-3 ml-[3px] rounded-full shrink-0", style: { backgroundColor: calendarColor } }), _jsx("span", { className: "truncate", children: calendarName })] })), isInvited && (_jsxs("p", { className: "text-xs text-text-muted", children: ["You were invited to this event. Only the organizer can change its details", canChange || canInvite ? ", but you can ask them to." : "."] }))] }), requesting && (_jsx("div", { className: "mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: _jsx(RequestChangeForm, { subject: {
+                        uid: occurrence.uid,
+                        title: occurrence.title,
+                        location: occurrence.location,
+                        startDate: occurrence.startDate,
+                        endDate: occurrence.endDate,
+                        allDay: occurrence.allDay,
+                        recurring: occurrence.isRecurringOccurrence,
+                        description: occurrence.description,
+                        descriptionHtml: occurrence.descriptionHtml,
+                        guestAddresses: occurrence.attendees.map((a) => a.address),
+                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md 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" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
+                                    const current = myResponse === response;
+                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => void handleRespond(response), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
+                                }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
+}

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

@@ -0,0 +1,59 @@
+import React, { MutableRefObject } from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { QuickCreateConfig } from "./QuickCreateFaces.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";
+export interface EventEditorProps {
+    /** The quick-create popover's face of the form, or the full form's (only a new event, which has `quickCreate`, has the quick one). Both show the same values. */
+    layout: "quick" | "expanded";
+    /** "More options": the quick face asks to become the full one. */
+    onExpand: () => void;
+    /** Leave without saving (nothing was stored). */
+    onCancel: () => void;
+    /** Something was stored: the dialog closes and the calendar reloads. */
+    onSaved: () => void;
+    /** A series save could not move every occurrence edited on its own with it (`detachedOccurrenceSyncFailed`). */
+    onSyncWarning: () => void;
+    /** Kept up to date with whether the form holds anything a stray click outside it would throw away. */
+    dirtyRef: MutableRefObject<boolean>;
+    mailboxUid: string;
+    folderUid: string;
+    calendars?: {
+        uid: string;
+        name: string;
+    }[];
+    mailboxOptions?: {
+        mailbox: Mailbox;
+        calendars: {
+            uid: string;
+            name: string;
+        }[];
+    }[];
+    /** Each calendar's colour, keyed by folder uid. */
+    folderColors?: Record<string, string>;
+    organizerAddress: string;
+    /** `null` when creating a new event. */
+    occurrence: CalendarOccurrence | null;
+    initialStart?: Date;
+    initialEnd?: Date;
+    /** A new event starting as an all-day one (a day cell of the month view was clicked). */
+    initialAllDay?: boolean;
+    /** A new event's tabs (Event, Task, Appointment schedule): with it the form is drawn by `QuickCreateFaces`; without it, as the full card. */
+    quickCreate?: QuickCreateConfig;
+}
+/**
+ * The event form and everything it does: create, and edit (one occurrence, or the entire series, of a recurring event - the choice
+ * Outlook's own convention offers for the same ambiguity, see `calendarMutations.ts`), plus video conferencing. It owns the form's
+ * one set of values and draws them as either the quick-create popover or the full card (`layout`), so growing the one into the other
+ * keeps what was typed.
+ */
+export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyncWarning, dirtyRef, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, occurrence, initialStart, initialEnd, initialAllDay, quickCreate, }: EventEditorProps): React.JSX.Element;