@rapidmx/web-client 0.14.1 → 0.15.1

package/dist/apps/shared/components/mail/SwipeRow.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineArchiveBox, HiOutlineFolder } from "react-icons/hi2";
+import { useSwipe } from "../../gestures/useSwipe.js";
+/** How long the row takes to leave, or come back - `motion-reduce` skips it. */
+const SLIDE = "transform 150ms ease-out";
+/**
+ * A row of a list of mail that slides with a finger: right to left it takes the row away to Archive (a green panel with the
+ * archive icon follows the row in), left to right it comes back and asks for a folder to move it to (a blue panel with a
+ * folder). The panels are children of the row placed just outside its edges, so they travel with it and fill the gap it leaves
+ * without the row's own markup, or the list's, changing; the list has to clip them (`overflow-x-clip`).
+ *
+ * Only a swipe that starts out horizontal counts (see `useSwipe()`), so scrolling the list is untouched, and it is an addition
+ * to, never the only way of, archiving and moving: the selection bar and the reading pane do the same.
+ */
+export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, children, className, style, ...rest }) {
+    const [offset, setOffset] = useState(0);
+    const [width, setWidth] = useState(0);
+    /** The row is on its way out (or waiting for the server to confirm it), so a finger can't drag it. */
+    const [leaving, setLeaving] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const element = useRef(null);
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const swipe = useSwipe({
+        enabled: enabled && !leaving,
+        onDrag: (next) => {
+            setDragging(next !== 0);
+            setOffset(next);
+        },
+        onSwipe: (direction) => {
+            if (direction === "right") {
+                onMove();
+                return;
+            }
+            // A swipe is only ever heard by the row's own element, which is what `element` holds.
+            const rowWidth = element.current.clientWidth;
+            setWidth(rowWidth);
+            setLeaving(true);
+            setOffset(-rowWidth);
+            void onArchive().then((archived) => {
+                // Unmounted on success, once the list has dropped the row; a refusal brings it back.
+                if (!archived && mounted.current) {
+                    setLeaving(false);
+                    setOffset(0);
+                }
+            });
+        },
+    });
+    if (!enabled) {
+        return (_jsx(Tag, { className: className, style: style, ...rest, children: children }));
+    }
+    const active = offset !== 0;
+    return (_jsxs(Tag, { ...rest, ...swipe.handlers, ref: (node) => {
+            element.current = node;
+        }, className: className, style: {
+            ...style,
+            ...swipe.style,
+            transform: active ? `translateX(${offset}px)` : undefined,
+            transition: dragging ? "none" : SLIDE,
+        }, "data-swiping": active ? "true" : undefined, children: [children, (active || leaving) && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-swipe-panel": "move", className: "absolute inset-y-0 right-full w-full bg-primary text-white flex items-center justify-end pr-6", children: _jsx(HiOutlineFolder, { size: 24 }) }), _jsx("span", { "aria-hidden": "true", "data-swipe-panel": "archive", style: width ? { width } : undefined, className: "absolute inset-y-0 left-full w-full bg-success text-white flex items-center justify-start pl-6", children: _jsx(HiOutlineArchiveBox, { size: 24 }) })] }))] }));
+}

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -1141,11 +1141,16 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsxs("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Restore", onClick: onToggleMinimize, icon: HiOutlineArrowsPointingOut }), _jsx(HeaderButton, { label: "Discard draft", onClick: handleDiscard, icon: HiOutlineXMark, disabled: closing })] })] }) }), discardModal] }));
     }
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
-                    "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
+                    "shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
+                    // `fixed` and `relative` may not both be on the element: Tailwind emits `.relative` after `.fixed`, so it wins and the
+                    // sheet sat in the flow of the little fixed container the windows are stacked in instead of covering the screen.
                     isMobile
                         ? "fixed inset-0 w-full h-full rounded-none border-0"
-                        : ["border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-                ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, value: mailboxUid ?? "", disabled: hasUploads, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
+                        : ["relative border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
+                ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, 
+                                        // Two or more options only exist once the mailboxes have loaded, and the same answer that lets them list
+                                        // (one that isn't known to be view-only) is what picks the default sender, so a sender is always chosen by now.
+                                        value: mailboxUid, disabled: hasUploads, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
                                 // De-duplicated by the same normalized key `recipientStatuses` itself is keyed by - two
                                 // fields (or one field twice) naming the same mailbox in different casing now resolve to
                                 // one shared status object (see `addressCacheKey()`'s own doc comment), so without this

package/dist/apps/shared/components/mail/invite/InviteRowChip.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+export interface InviteRowChipProps {
+    message: Message;
+    /** Called with the row's message carrying the reader's new answer (`meetingResponse`), after an RSVP, so the list can show it. */
+    onResponded?: (updated: Message) => void;
+    /** The chip's horizontal margins - the row's own padding. Default `mx-4`. */
+    className?: string;
+}
+/** Whether a list row draws the chip: a meeting request the server can read (an encrypted message's calendar file is inside its ciphertext). */
+export declare function showsInviteChip(message: Pick<Message, "meetingMethod" | "encrypted">): boolean;
+/**
+ * The line a meeting request gets in a list of mail, under its preview, as Outlook draws it: a calendar icon, when the meeting starts (in the reader's
+ * zone), under that whether it conflicts with the reader's calendar - or, once answered, the answer - and an RSVP button that opens the day view with
+ * Accept, Decline and Tentative (`InviteRsvpPopover`).
+ *
+ * The invitation is looked up (once, through the shared cache) only for a row that `showsInviteChip()` - the rest of the list is never asked about. Until
+ * it arrives, or when the lookup fails, the chip says only "Meeting request", with no button.
+ *
+ * It lives beside the row's open button, not inside it (a button can't hold a button), and keeps taps and touches to itself: pressing RSVP neither
+ * opens the row nor starts a swipe of it. That holds for the popover too, which React nests under the chip even though it is drawn on the page.
+ */
+export default function InviteRowChip({ message, onResponded, className }: InviteRowChipProps): React.JSX.Element | null;

package/dist/apps/shared/components/mail/invite/InviteRowChip.js

@@ -0,0 +1,46 @@
+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 { HiOutlineCalendarDays } from "react-icons/hi2";
+import { ANSWER_LABEL, formatRowStart } from "./inviteFormat.js";
+import { useMessageInvite } from "./inviteStore.js";
+import InviteRsvpPopover from "./InviteRsvpPopover.js";
+/** Whether a list row draws the chip: a meeting request the server can read (an encrypted message's calendar file is inside its ciphertext). */
+export function showsInviteChip(message) {
+    return message.meetingMethod === "REQUEST" && !message.encrypted;
+}
+/**
+ * The line a meeting request gets in a list of mail, under its preview, as Outlook draws it: a calendar icon, when the meeting starts (in the reader's
+ * zone), under that whether it conflicts with the reader's calendar - or, once answered, the answer - and an RSVP button that opens the day view with
+ * Accept, Decline and Tentative (`InviteRsvpPopover`).
+ *
+ * The invitation is looked up (once, through the shared cache) only for a row that `showsInviteChip()` - the rest of the list is never asked about. Until
+ * it arrives, or when the lookup fails, the chip says only "Meeting request", with no button.
+ *
+ * It lives beside the row's open button, not inside it (a button can't hold a button), and keeps taps and touches to itself: pressing RSVP neither
+ * opens the row nor starts a swipe of it. That holds for the popover too, which React nests under the chip even though it is drawn on the page.
+ */
+export default function InviteRowChip({ message, onResponded, className = "mx-4" }) {
+    const eligible = showsInviteChip(message);
+    const { invite, setInvite } = useMessageInvite(message.uid, eligible);
+    const [open, setOpen] = useState(false);
+    const rsvpRef = useRef(null);
+    if (!eligible) {
+        return null;
+    }
+    const answer = invite?.response ?? message.meetingResponse;
+    const conflicts = invite?.conflicts.length ?? 0;
+    const start = invite ? formatRowStart(invite) : undefined;
+    function answered(updated) {
+        setInvite(updated);
+        onResponded?.({ ...message, meetingResponse: updated.response ?? message.meetingResponse });
+    }
+    const stop = (event) => event.stopPropagation();
+    return (_jsxs("div", { "data-invite-chip": true, onClick: stop, onTouchStart: stop, onTouchMove: stop, onTouchEnd: stop, onTouchCancel: stop, className: [className, "mb-2 -mt-1 flex items-center gap-2 rounded-sm border border-border bg-surface px-2 py-1.5 text-xs font-normal"].join(" "), children: [_jsx(HiOutlineCalendarDays, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-text", children: start ?? "Meeting request" }), invite && (_jsx("div", { className: [
+                            "truncate",
+                            answer === "accepted" ? "text-success" : answer === "declined" ? "text-danger" : conflicts > 0 ? "text-danger" : "text-text-muted",
+                        ].join(" "), children: answer ? ANSWER_LABEL[answer] : conflicts > 0 ? `Conflicts with ${conflicts} ${conflicts === 1 ? "event" : "events"}` : "No conflicts" }))] }), invite?.canRespond && !invite.isOrganizer && (_jsx("button", { ref: rsvpRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": `RSVP to ${invite.summary?.trim() || "this meeting"}`, onClick: () => setOpen((wasOpen) => !wasOpen), className: "shrink-0 py-1 px-3 rounded-sm border border-border text-xs font-semibold text-text hover:bg-surface-alt", children: "RSVP" })), open && invite && (_jsx(InviteRsvpPopover, { messageUid: message.uid, invite: invite, anchorRef: rsvpRef, onDone: answered, onClose: () => setOpen(false) }))] }));
+}

package/dist/apps/shared/components/mail/invite/InviteRsvpPopover.d.ts

@@ -0,0 +1,20 @@
+import React, { RefObject } from "react";
+import { MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+export interface InviteRsvpPopoverProps {
+    messageUid: string;
+    invite: MessageInvite;
+    /** The RSVP button: the popover hangs from it, and focus goes back to it when the popover closes. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Called with the invitation as it stands after an answer or a proposal. The popover has closed itself. */
+    onDone: (invite: MessageInvite) => void;
+    onClose: () => void;
+}
+/**
+ * What the RSVP button opens: an anchored popover on a desktop, a dialog on a phone. A day view of the reader's schedule around the meeting, with
+ * the invitation highlighted and its conflicts marked, and Accept, Decline, a "?" for Tentative and a "..." menu (Propose new time, Open in calendar).
+ * An answer is sent to the server, which puts the meeting on the calendar and replies to the organizer; the popover then closes and hands the
+ * updated invitation to its caller. A failure raises a pop-up and leaves the popover open.
+ *
+ * Focus moves to the first button when it opens, Escape closes it (a menu open inside it first), and focus returns to the RSVP button.
+ */
+export default function InviteRsvpPopover({ messageUid, invite, anchorRef, onDone, onClose }: InviteRsvpPopoverProps): React.JSX.Element;

package/dist/apps/shared/components/mail/invite/InviteRsvpPopover.js

@@ -0,0 +1,141 @@
+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, useId, useRef, useState } from "react";
+import { HiOutlineCheck, HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+import { proposeNewTime, respondToMessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { notifyApiError } from "../../../notifications/apiErrors.js";
+import { calendarHref, conflictSummary, formatInviteWhen } from "./inviteFormat.js";
+import InviteTimeline from "./InviteTimeline.js";
+import ProposeTimeForm from "./ProposeTimeForm.js";
+/** The popover's width, and the room it leaves the window's edges. */
+const WIDTH = 360;
+const WINDOW_MARGIN = 16;
+/** What the popover is tall for its own text and footer, before the day view (px), and how tall the day view is per hour drawn. */
+const CHROME_HEIGHT = 190;
+const CONFLICT_LINE_HEIGHT = 22;
+const HOURS_HEIGHT = 36;
+const PROPOSE_HEIGHT = 340;
+/** The hours the day view draws for an invitation, as `InviteTimeline` will (a fixed estimate is all a popover's box needs). */
+function estimateHeight(invite, proposing) {
+    const cap = window.innerHeight - WINDOW_MARGIN;
+    if (proposing) {
+        return Math.min(PROPOSE_HEIGHT, cap);
+    }
+    const start = invite.startDate ? new Date(invite.startDate) : undefined;
+    const end = invite.endDate ? new Date(invite.endDate) : undefined;
+    const spanHours = start && end ? Math.max(0, (end.getTime() - start.getTime()) / 3600000) : 1;
+    // The day view spans the invitation with two hours either side, and never less than five.
+    const hours = Math.min(24, Math.max(5, Math.ceil(spanHours) + 4));
+    const allDay = invite.schedule.filter((entry) => entry.allDay).length;
+    return Math.min(CHROME_HEIGHT + hours * HOURS_HEIGHT + allDay * CONFLICT_LINE_HEIGHT + (invite.conflicts.length > 0 ? CONFLICT_LINE_HEIGHT : 0), cap);
+}
+const RESPONSES = [
+    { response: "accepted", label: "Accept", text: "Accept", failure: "Couldn't accept this meeting" },
+    { response: "declined", label: "Decline", text: "Decline", failure: "Couldn't decline this meeting" },
+    { response: "tentative", label: "Tentative", text: "?", failure: "Couldn't respond tentatively to this meeting" },
+];
+/** What is inside the RSVP popover (or dialog): the meeting, a day view around it and the buttons that answer it. */
+function RsvpPanel({ messageUid, invite, onDone, onClose, onProposingChange }) {
+    const titleId = useId();
+    const [pending, setPending] = useState(null);
+    const [proposing, setProposingState] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const rootRef = useRef(null);
+    const moreRef = useRef(null);
+    const menuRef = useRef(null);
+    const busy = pending !== null;
+    const when = formatInviteWhen(invite);
+    // Focus goes to the first thing to do when the panel opens.
+    useEffect(() => {
+        rootRef.current?.querySelector("button:not([disabled])")?.focus();
+    }, []);
+    function setProposing(next) {
+        setProposingState(next);
+        onProposingChange?.(next);
+    }
+    async function answer(response, failure) {
+        setPending(response);
+        try {
+            onDone(await respondToMessageInvite(messageUid, response));
+        }
+        catch (err) {
+            notifyApiError(err, failure);
+            setPending(null);
+        }
+    }
+    async function propose(proposal) {
+        setPending("propose");
+        try {
+            onDone(await proposeNewTime(messageUid, proposal));
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't send the proposed time");
+            setPending(null);
+        }
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            if (menuOpen) {
+                setMenuOpen(false);
+                moreRef.current?.focus();
+            }
+            else {
+                onClose();
+            }
+        }
+    }
+    function handleMenuKeyDown(event) {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+            return;
+        }
+        event.preventDefault();
+        const items = Array.from(menuRef.current.querySelectorAll('[role="menuitem"]'));
+        const at = items.indexOf(document.activeElement);
+        items[(at + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus();
+    }
+    return (_jsxs("div", { ref: rootRef, role: "group", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: handleKeyDown, className: "relative flex-1 min-h-0 flex flex-col text-sm text-text outline-none", children: [_jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto px-4 pt-3 pb-2 flex flex-col gap-2", children: [_jsx("h3", { id: titleId, className: "font-semibold break-words", children: invite.summary?.trim() || "(no title)" }), when && _jsxs("p", { className: "break-words", children: [when, invite.recurring && _jsx("span", { className: "text-text-muted", children: " (Repeats)" })] }), invite.conflicts.length > 0 && (_jsxs("p", { className: "text-danger break-words", children: [_jsx("span", { className: "font-medium", children: "Conflicts with:" }), " ", conflictSummary(invite.conflicts)] })), proposing ? (_jsx(ProposeTimeForm, { invite: invite, busy: pending === "propose", onSubmit: (proposal) => void propose(proposal), onCancel: () => setProposing(false) })) : (_jsx(InviteTimeline, { invite: invite }))] }), !proposing && (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border", "aria-busy": busy || undefined, children: [RESPONSES.map(({ response, label, text, failure }) => {
+                        const current = invite.response === response;
+                        return (_jsxs(Button, { type: "button", variant: response === "accepted" && !current ? "primary" : "secondary", className: ["!w-auto", response === "tentative" ? "!px-3" : "", current ? "!bg-primary/10 !border-primary disabled:!opacity-100" : ""].join(" "), "aria-label": label, title: label, "aria-pressed": current, "aria-busy": pending === response || undefined, loading: pending === response, disabled: busy || current, onClick: () => void answer(response, failure), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), text] }, response));
+                    }), _jsxs("div", { className: "ml-auto relative", children: [_jsx("button", { ref: moreRef, type: "button", "aria-label": "More actions", "aria-haspopup": "menu", "aria-expanded": menuOpen, disabled: busy, onClick: () => setMenuOpen((open) => !open), className: "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-text hover:bg-surface-alt disabled:opacity-50", children: _jsx(HiOutlineEllipsisHorizontal, { size: 18, "aria-hidden": "true" }) }), menuOpen && (_jsxs("div", { ref: (node) => {
+                                    menuRef.current = node;
+                                    // A menu that has just opened takes the focus, as a menu does.
+                                    node?.querySelector('[role="menuitem"]')?.focus();
+                                }, role: "menu", "aria-label": "More actions", onKeyDown: handleMenuKeyDown, className: "absolute bottom-full right-0 mb-1 w-48 py-1 rounded-md border border-border bg-surface shadow-modal z-10", children: [invite.canPropose && (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
+                                            setMenuOpen(false);
+                                            setProposing(true);
+                                        }, className: "w-full px-3 py-2 text-left hover:bg-surface-alt", children: "Propose new time" })), _jsx("a", { role: "menuitem", href: calendarHref(invite), className: "block px-3 py-2 hover:bg-surface-alt", children: "Open in calendar" })] }))] })] }))] }));
+}
+/**
+ * What the RSVP button opens: an anchored popover on a desktop, a dialog on a phone. A day view of the reader's schedule around the meeting, with
+ * the invitation highlighted and its conflicts marked, and Accept, Decline, a "?" for Tentative and a "..." menu (Propose new time, Open in calendar).
+ * An answer is sent to the server, which puts the meeting on the calendar and replies to the organizer; the popover then closes and hands the
+ * updated invitation to its caller. A failure raises a pop-up and leaves the popover open.
+ *
+ * Focus moves to the first button when it opens, Escape closes it (a menu open inside it first), and focus returns to the RSVP button.
+ */
+export default function InviteRsvpPopover({ messageUid, invite, anchorRef, onDone, onClose }) {
+    const isMobile = useIsMobile();
+    const [proposing, setProposing] = useState(false);
+    const title = invite.summary?.trim() || "(no title)";
+    function close() {
+        onClose();
+        anchorRef.current?.focus();
+    }
+    function done(updated) {
+        onDone(updated);
+        close();
+    }
+    const panel = _jsx(RsvpPanel, { messageUid: messageUid, invite: invite, onDone: done, onClose: close, onProposingChange: setProposing });
+    if (isMobile) {
+        return (_jsx(Modal, { open: true, onClose: close, title: "Meeting invitation", children: panel }));
+    }
+    return (_jsx(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: WIDTH, height: estimateHeight(invite, proposing), "aria-label": `RSVP: ${title}`, children: panel }));
+}

package/dist/apps/shared/components/mail/invite/InviteTimeline.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+/** A block of the day and where it sits among the blocks it overlaps. */
+export interface PlacedBlock {
+    /** Which of the overlapping columns it is drawn in. */
+    column: number;
+    /** How many columns its cluster of overlapping blocks needs. */
+    columns: number;
+}
+/**
+ * Lays overlapping blocks side by side: blocks that overlap (directly or through a chain of others) form a cluster, and each block takes the first
+ * column of the cluster that is free where it starts. `blocks` must be sorted by start; the result is in the same order.
+ */
+export declare function placeBlocks(blocks: {
+    start: number;
+    end: number;
+}[]): PlacedBlock[];
+export interface InviteTimelineProps {
+    invite: Pick<MessageInvite, "startDate" | "endDate" | "summary" | "conflicts" | "schedule">;
+}
+/**
+ * A small day agenda around an invitation, as Outlook draws it in its RSVP card: hour rows for the invitation's day (from a couple of hours before it
+ * to a couple after), the invitation itself as a highlighted block, and the reader's other events as blocks - the ones that overlap it marked in red
+ * (and named as conflicts to a screen reader). Overlapping blocks stand side by side. All-day events are listed above the hours rather than drawn.
+ * Draws nothing when the invitation has no usable time.
+ */
+export default function InviteTimeline({ invite }: InviteTimelineProps): React.JSX.Element | null;

package/dist/apps/shared/components/mail/invite/InviteTimeline.js

@@ -0,0 +1,120 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { validDate } from "./inviteFormat.js";
+/** How tall one hour is drawn, in px. */
+const HOUR_HEIGHT = 36;
+/** The room the hour labels take at the left, as a CSS length. */
+const LABEL_WIDTH = "3.25rem";
+/** The hours of context shown before the invitation and after it, and the least the day view is tall (in hours). */
+const CONTEXT_HOURS = 2;
+const MIN_HOURS = 5;
+const MINUTE_MS = 60000;
+/**
+ * Lays overlapping blocks side by side: blocks that overlap (directly or through a chain of others) form a cluster, and each block takes the first
+ * column of the cluster that is free where it starts. `blocks` must be sorted by start; the result is in the same order.
+ */
+export function placeBlocks(blocks) {
+    const placed = [];
+    let cluster = [];
+    let columnEnds = [];
+    let clusterEnd = -Infinity;
+    const close = () => {
+        for (const member of cluster) {
+            placed[member.index] = { column: member.column, columns: columnEnds.length };
+        }
+        cluster = [];
+        columnEnds = [];
+    };
+    blocks.forEach((block, index) => {
+        if (block.start >= clusterEnd) {
+            close();
+        }
+        let column = columnEnds.findIndex((end) => end <= block.start);
+        if (column === -1) {
+            column = columnEnds.length;
+        }
+        columnEnds[column] = block.end;
+        cluster.push({ index, column });
+        clusterEnd = Math.max(clusterEnd, block.end);
+    });
+    close();
+    return placed;
+}
+/** The hours the day view spans: the invitation's own, with `CONTEXT_HOURS` either side (at least `MIN_HOURS`), kept inside the invitation's day. */
+function hourWindow(start, end) {
+    const sameDay = start.toDateString() === end.toDateString();
+    const endHour = sameDay ? Math.ceil(end.getHours() + end.getMinutes() / 60) : 24;
+    let from = Math.max(0, start.getHours() - CONTEXT_HOURS);
+    let to = Math.min(24, endHour + CONTEXT_HOURS);
+    if (to - from < MIN_HOURS) {
+        to = Math.min(24, from + MIN_HOURS);
+        from = Math.max(0, to - MIN_HOURS);
+    }
+    return { from, to };
+}
+const BLOCK_CLASS = {
+    invite: "bg-primary/20 border-primary text-text font-semibold",
+    conflict: "bg-danger-bg border-danger text-danger",
+    busy: "bg-surface border-border text-text",
+    free: "bg-transparent border-border text-text-muted",
+};
+const CLOCK = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" });
+const HOUR = new Intl.DateTimeFormat(undefined, { hour: "numeric" });
+/**
+ * A small day agenda around an invitation, as Outlook draws it in its RSVP card: hour rows for the invitation's day (from a couple of hours before it
+ * to a couple after), the invitation itself as a highlighted block, and the reader's other events as blocks - the ones that overlap it marked in red
+ * (and named as conflicts to a screen reader). Overlapping blocks stand side by side. All-day events are listed above the hours rather than drawn.
+ * Draws nothing when the invitation has no usable time.
+ */
+export default function InviteTimeline({ invite }) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    if (!start || !end || end <= start) {
+        return null;
+    }
+    const { from, to } = hourWindow(start, end);
+    const windowStart = new Date(start.getFullYear(), start.getMonth(), start.getDate(), from).getTime();
+    const windowEnd = new Date(start.getFullYear(), start.getMonth(), start.getDate(), to).getTime();
+    const conflictUids = new Set(invite.conflicts.map((entry) => entry.uid));
+    // A conflict the schedule doesn't list is still drawn.
+    const entries = [...invite.schedule, ...invite.conflicts.filter((c) => !invite.schedule.some((s) => s.uid === c.uid))];
+    const allDay = entries.filter((entry) => entry.allDay);
+    const blocks = [{ key: "invite", title: invite.summary?.trim() || "(no title)", start: start.getTime(), end: end.getTime(), kind: "invite", tentative: false }];
+    for (const entry of entries) {
+        const entryStart = validDate(entry.startDate)?.getTime();
+        const entryEnd = validDate(entry.endDate)?.getTime();
+        if (entry.allDay || entryStart === undefined || entryEnd === undefined) {
+            continue;
+        }
+        blocks.push({
+            key: entry.uid,
+            title: entry.title || "(no title)",
+            start: entryStart,
+            end: entryEnd,
+            kind: conflictUids.has(entry.uid) ? "conflict" : entry.busy ? "busy" : "free",
+            tentative: entry.tentative,
+        });
+    }
+    // Clipped to the hours shown; a block entirely outside them isn't drawn.
+    const visible = blocks
+        .map((block) => ({ ...block, start: Math.max(block.start, windowStart), end: Math.min(block.end, windowEnd), fullStart: block.start, fullEnd: block.end }))
+        .filter((block) => block.end > block.start)
+        .sort((a, b) => a.start - b.start || a.end - b.end);
+    const placed = placeBlocks(visible);
+    const hours = Array.from({ length: to - from }, (_, i) => from + i);
+    return (_jsxs("div", { "aria-label": "Your schedule around this meeting", role: "group", className: "text-xs", children: [allDay.length > 0 && (_jsx("ul", { "aria-label": "All-day events", className: "mb-1 flex flex-col gap-0.5", children: allDay.map((entry) => (_jsxs("li", { className: "px-2 py-0.5 rounded-sm border border-border bg-surface text-text-muted truncate", children: ["All day: ", entry.title || "(no title)"] }, entry.uid))) })), _jsxs("div", { className: "relative border-t border-border", style: { height: hours.length * HOUR_HEIGHT }, children: [hours.map((hour) => (_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 border-b border-border text-text-muted", style: { top: (hour - from) * HOUR_HEIGHT, height: HOUR_HEIGHT }, children: _jsx("span", { className: "absolute left-0 top-0 pr-1 leading-none pt-0.5", style: { width: LABEL_WIDTH }, children: HOUR.format(new Date(2000, 0, 1, hour)) }) }, hour))), _jsx("ul", { "aria-label": "Events", children: visible.map((block, index) => {
+                            const { column, columns } = placed[index];
+                            const top = ((block.start - windowStart) / MINUTE_MS / 60) * HOUR_HEIGHT;
+                            const height = Math.max(18, ((block.end - block.start) / MINUTE_MS / 60) * HOUR_HEIGHT - 1);
+                            const range = `${CLOCK.format(block.fullStart)} to ${CLOCK.format(block.fullEnd)}`;
+                            return (_jsxs("li", { title: `${block.title}, ${range}`, "data-kind": block.kind, className: [
+                                    "absolute overflow-hidden rounded-sm border px-1.5 py-0.5 leading-tight",
+                                    BLOCK_CLASS[block.kind],
+                                    block.tentative ? "border-dashed" : "",
+                                ].join(" "), style: {
+                                    top,
+                                    height,
+                                    left: `calc(${LABEL_WIDTH} + (100% - ${LABEL_WIDTH}) * ${column} / ${columns})`,
+                                    width: `calc((100% - ${LABEL_WIDTH}) / ${columns} - 2px)`,
+                                }, children: [_jsx("span", { className: "block truncate", children: block.title }), _jsxs("span", { className: "sr-only", children: [", ", range, block.kind === "invite" ? ", this meeting" : "", block.kind === "conflict" ? ", conflicts with this meeting" : "", block.tentative ? ", tentative" : ""] })] }, block.key));
+                        }) })] })] }));
+}

package/dist/apps/shared/components/mail/invite/ProposeTimeForm.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { MessageInvite, ProposedTime } from "@rapidmx/react-shared/calendar/inviteApi.js";
+export interface ProposeTimeFormProps {
+    /** The invitation being answered: its own time (in the reader's zone) is what the fields start out as. */
+    invite: Pick<MessageInvite, "startDate" | "endDate">;
+    /** A proposal is on its way: the form is off. */
+    busy?: boolean;
+    /** Called with the proposed instants once the fields are valid. The caller reports a failure and closes the form on success. */
+    onSubmit: (proposal: ProposedTime) => void;
+    onCancel: () => void;
+}
+/**
+ * The small form behind "Propose new time": a date and a start and end time - in the reader's own time zone, prefilled with the invitation's own
+ * time - and an optional note to the organizer. It validates what it can (all three fields, and an end after the start) before anything is sent.
+ * The end is on the start's day: a proposal spans one day, as Outlook's does from a list.
+ */
+export default function ProposeTimeForm({ invite, busy, onSubmit, onCancel }: ProposeTimeFormProps): React.JSX.Element;

package/dist/apps/shared/components/mail/invite/ProposeTimeForm.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useId, useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { isoDay, validDate } from "./inviteFormat.js";
+const INPUT_CLASS = "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text";
+/** `HH:MM` of an instant in the reader's zone, the value of a time input. */
+function clock(date) {
+    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+/**
+ * The small form behind "Propose new time": a date and a start and end time - in the reader's own time zone, prefilled with the invitation's own
+ * time - and an optional note to the organizer. It validates what it can (all three fields, and an end after the start) before anything is sent.
+ * The end is on the start's day: a proposal spans one day, as Outlook's does from a list.
+ */
+export default function ProposeTimeForm({ invite, busy = false, onSubmit, onCancel }) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    const [date, setDate] = useState(start ? isoDay(start) : "");
+    const [startTime, setStartTime] = useState(start ? clock(start) : "");
+    const [endTime, setEndTime] = useState(end ? clock(end) : "");
+    const [comment, setComment] = useState("");
+    const [error, setError] = useState(null);
+    const id = useId();
+    function submit(event) {
+        event.preventDefault();
+        if (!date || !startTime || !endTime) {
+            setError("Choose a date and a start and end time.");
+            return;
+        }
+        const proposedStart = new Date(`${date}T${startTime}:00`);
+        const proposedEnd = new Date(`${date}T${endTime}:00`);
+        if (proposedEnd <= proposedStart) {
+            setError("The end time must be after the start time.");
+            return;
+        }
+        setError(null);
+        const note = comment.trim();
+        onSubmit({ startDate: proposedStart.toISOString(), endDate: proposedEnd.toISOString(), ...(note ? { comment: note } : {}) });
+    }
+    return (_jsxs("form", { "aria-label": "Propose a new time", onSubmit: submit, noValidate: true, className: "flex flex-col gap-2 text-sm", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("div", { className: "flex-1 min-w-[9rem]", children: [_jsx("label", { htmlFor: `${id}-date`, className: "block text-xs text-text-muted mb-0.5", children: "Date" }), _jsx("input", { id: `${id}-date`, type: "date", value: date, disabled: busy, onChange: (e) => setDate(e.target.value), className: INPUT_CLASS })] }), _jsxs("div", { className: "flex-1 min-w-[6rem]", children: [_jsx("label", { htmlFor: `${id}-start`, className: "block text-xs text-text-muted mb-0.5", children: "Start" }), _jsx("input", { id: `${id}-start`, type: "time", value: startTime, disabled: busy, onChange: (e) => setStartTime(e.target.value), className: INPUT_CLASS })] }), _jsxs("div", { className: "flex-1 min-w-[6rem]", children: [_jsx("label", { htmlFor: `${id}-end`, className: "block text-xs text-text-muted mb-0.5", children: "End" }), _jsx("input", { id: `${id}-end`, type: "time", value: endTime, disabled: busy, onChange: (e) => setEndTime(e.target.value), className: INPUT_CLASS })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: `${id}-comment`, className: "block text-xs text-text-muted mb-0.5", children: "Comment (optional)" }), _jsx("textarea", { id: `${id}-comment`, rows: 2, value: comment, disabled: busy, onChange: (e) => setComment(e.target.value), className: `${INPUT_CLASS} resize-y` })] }), error && (_jsx("p", { role: "alert", className: "text-danger", children: error })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy, "aria-busy": busy || undefined, children: "Send proposal" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: onCancel, children: "Cancel" })] })] }));
+}

package/dist/apps/shared/components/mail/invite/inviteFormat.d.ts

@@ -0,0 +1,28 @@
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { InviteResponse, MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+/** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
+ * or by name, since mail clients disagree about which one they set (`text/calendar`, `application/ics`, or a bare `.ics` as octet-stream). */
+export declare function isCalendarAttachment(attachment: Pick<Attachment, "filename" | "mimeType">): boolean;
+/** `zone` if the browser knows it, else UTC - an all-day date is a calendar day, and needs a fixed zone to stay the same day for every reader. */
+export declare function allDayZone(zone: string | undefined): string;
+/** The instant an ISO string names, or `undefined` when it is missing or unparseable. */
+export declare function validDate(iso: string | undefined): Date | undefined;
+/**
+ * When the meeting is, in the reader's own locale and time zone: one date and a time range for a same-day event, both ends in full for
+ * one that spans days, and dates only for an all-day event (drawn in the organizer's zone, since a calendar day is not an instant). `undefined`
+ * when the invitation names no usable start. A missing or unusable end shows the start alone.
+ */
+export declare function formatInviteWhen(invite: Pick<MessageInvite, "startDate" | "endDate" | "allDay" | "timezone">): string | undefined;
+/** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */
+export declare function formatRowStart(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string | undefined;
+/** `YYYY-MM-DD` of an instant in the reader's zone, or in `timeZone` when given (`en-CA` writes a date that way). */
+export declare function isoDay(date: Date, timeZone?: string): string;
+/** Where "Open in Calendar" goes: the day view of the day the meeting starts (the `date`/`view` the calendar page reads), or the calendar itself
+ * when the invitation names no usable start. An all-day event's day is the organizer's; any other is the reader's. */
+export declare function calendarHref(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string;
+/** The reader's answer as a list row says it. */
+export declare const ANSWER_LABEL: Record<InviteResponse, string>;
+/** The titles of the events an invitation conflicts with, as "A, B and 2 more". */
+export declare function conflictSummary(conflicts: {
+    title: string;
+}[]): string;