@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -10,6 +10,7 @@ import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMai
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { buildComposeBodyHtml } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import { findActivePublicKey, getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
@@ -219,11 +220,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             if (cancelled) {
                 return;
             }
-            setMailboxes(result);
+            // Listed with the caller's own (primary) mailbox first, and defaulted to below.
+            const ordered = orderMailboxes(result, userUid);
+            setMailboxes(ordered);
             // Never default to a mailbox already known to be view-only (see the effect below for one
             // that turns out to be).
-            const candidates = result.filter((mb) => peekMailboxWritability(mb, userUid, trusted) !== false);
-            setFromMailboxUid((current) => current ?? (candidates.find((mb) => mb.ownerUserUid === userUid) ?? candidates[0])?.uid);
+            const candidates = ordered.filter((mb) => peekMailboxWritability(mb, userUid, trusted) !== false);
+            setFromMailboxUid((current) => current ?? primaryMailboxUid(candidates, userUid));
         })
             .catch((err) => {
             // Only fatal when there's no mailbox to fall back on - a session that already names one just
@@ -481,7 +484,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         if (!fromIsViewOnly || hasUploads) {
             return;
         }
-        const ordered = [...mailboxes.filter((mb) => mb.ownerUserUid === userUid), ...mailboxes.filter((mb) => mb.ownerUserUid !== userUid)];
+        const ordered = orderMailboxes(mailboxes, userUid);
         const alternative = ordered.find((mb) => writability[mb.uid] === true) ?? ordered.find((mb) => writability[mb.uid] === undefined);
         if (alternative) {
             handleFromChange(alternative.uid);
@@ -685,6 +688,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                 encryptRequested: current.encryptRequested,
                 forcePlaintext,
                 saved: saveInFlightRef.current,
+                threading: session.threading,
             };
             if (request.to.length === 0) {
                 setSendError("At least one recipient is required.");
@@ -1141,11 +1145,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/compose/RecipientInput.d.ts

@@ -22,6 +22,26 @@ export interface RecipientInputProps {
     disabled?: boolean;
     /** Focuses the input when it mounts - a new message starts in To. */
     autoFocus?: boolean;
+    /** Called whenever the field's entries change: every committed entry (chips - a picked suggestion, a finished or
+     * pasted one, or a typed one committed by Enter or leaving the field) and the text still being typed (`""` after a
+     * commit). Lets a field that keeps its entries as something other than text (attendees) read them without parsing
+     * `value` and guessing which part of it is still being typed. */
+    onEdit?: (chips: string[], pending: string) => void;
+    /** Text being typed already when the input mounts (the last recipient of `value`), so a field that is remounted
+     * (a popover growing into a form) keeps it in the input instead of turning it into a chip. */
+    initialPending?: string;
+    /** Chips this returns true for are not drawn (they stay in the value, and out of the suggestions): a field that
+     * lists some entries itself. Backspace in an empty input removes the last chip that is drawn. */
+    hideChip?: (chip: string) => boolean;
+    placeholder?: string;
+    /** The input's accessible name, for a field without a `<label htmlFor>`. */
+    ariaLabel?: string;
+    /** The chip list's accessible name; `${label} recipients` by default. */
+    listLabel?: string;
+    /** Classes for the field's outer element, after its own (a border, padding). */
+    className?: string;
+    /** The suggestions' `z-index`, for a field inside an overlay that stacks above the default's (`z-[60]`). */
+    dropdownZIndex?: number;
 }
 /**
  * A To/Cc/Bcc field: committed recipients as removable chips, and a WAI-ARIA combobox for the one being typed that
@@ -33,4 +53,4 @@ export interface RecipientInputProps {
  * least two characters, and a newer query aborts an older request. Arrow keys move through them, Enter or Tab picks
  * one (as `Name <address>`), Escape closes them, and Backspace in an empty input removes the last chip.
  */
-export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions, debounceMs, disabled, autoFocus, }: RecipientInputProps): React.JSX.Element;
+export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions, debounceMs, disabled, autoFocus, onEdit, initialPending, hideChip, placeholder, ariaLabel, listLabel, className, dropdownZIndex, }: RecipientInputProps): React.JSX.Element;

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

@@ -41,8 +41,8 @@ function dropdownPosition(anchor) {
  * least two characters, and a newer query aborts an older request. Arrow keys move through them, Enter or Tab picks
  * one (as `Name <address>`), Escape closes them, and Backspace in an empty input removes the last chip.
  */
-export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions = fetchRecipientSuggestions, debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS, disabled, autoFocus, }) {
-    const [pending, setPending] = useState("");
+export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions = fetchRecipientSuggestions, debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS, disabled, autoFocus, onEdit, initialPending = "", hideChip, placeholder, ariaLabel, listLabel, className, dropdownZIndex, }) {
+    const [pending, setPending] = useState(initialPending);
     const [suggestions, setSuggestions] = useState([]);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -58,6 +58,8 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
     const chips = pendingActive ? tokens.slice(0, -1) : tokens;
     const inputValue = pendingActive ? pending : "";
     const query = pendingActive ? pendingText : "";
+    const drawn = chips.map((chip, index) => ({ chip, index })).filter(({ chip }) => !hideChip?.(chip));
+    const lastDrawn = drawn.length > 0 ? drawn[drawn.length - 1].index : -1;
     const listboxId = `${id}-suggestions`;
     const optionId = (index) => `${id}-suggestion-${index}`;
     useEffect(() => {
@@ -113,6 +115,7 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
     });
     function emit(nextChips, nextPending) {
         onChange([...nextChips, nextPending.trim()].filter((part) => part.length > 0).join(", "));
+        onEdit?.(nextChips, nextPending.trim());
     }
     function handleInputChange(e) {
         const { finished, rest } = splitTypedRecipients(e.target.value);
@@ -122,17 +125,22 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         emit([...chips, ...finished], nextPending);
     }
     function commitPending() {
-        const next = [...chips, pendingText].filter((part) => part.length > 0).join(", ");
+        const committed = [...chips, pendingText].filter((part) => part.length > 0);
         setPending("");
         setOpen(false);
-        return next;
+        if (pendingText) {
+            onEdit?.(committed, "");
+        }
+        return committed.join(", ");
     }
     function select(suggestion) {
-        const next = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })].join(", ");
+        const committed = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })];
+        const next = committed.join(", ");
         setPending("");
         setOpen(false);
         setSuggestions([]);
         onChange(next);
+        onEdit?.(committed, "");
         onCommit?.(next);
     }
     function removeChip(index) {
@@ -181,9 +189,9 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
                 }
                 return;
             case "Backspace":
-                if (inputValue === "" && chips.length > 0) {
+                if (inputValue === "" && lastDrawn >= 0) {
                     e.preventDefault();
-                    emit(chips.slice(0, -1), "");
+                    emit(chips.filter((_, i) => i !== lastDrawn), "");
                 }
                 return;
         }
@@ -192,12 +200,12 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         const next = commitPending();
         onBlur?.(next);
     }
-    return (_jsxs("div", { ref: anchorRef, className: "flex-1 min-w-0 flex flex-wrap items-center gap-1", children: [chips.length > 0 && (_jsx("ul", { role: "list", "aria-label": `${label} recipients`, className: "contents", children: chips.map((chip, index) => {
+    return (_jsxs("div", { ref: anchorRef, className: `flex-1 min-w-0 flex flex-wrap items-center gap-1${className ? ` ${className}` : ""}`, children: [drawn.length > 0 && (_jsx("ul", { role: "list", "aria-label": listLabel ?? `${label} recipients`, className: "contents", children: drawn.map(({ chip, index }) => {
                     const recipient = parseRecipient(chip);
                     const valid = isValidRecipientAddress(recipient.address);
                     const name = recipient.displayName || recipient.address;
                     return (_jsxs("li", { title: chip, className: `flex items-center gap-1 max-w-full min-w-0 rounded-pill border pl-2 pr-0.5 py-px text-xs ${valid ? "bg-surface-alt border-border text-text" : "bg-danger-bg border-danger text-danger"}`, children: [_jsx("span", { className: "truncate", children: name }), !valid && _jsx("span", { className: "sr-only", children: " (not a valid email address)" }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${recipient.address}`, disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => removeChip(index), className: "shrink-0 w-4 h-4 flex items-center justify-center rounded-pill text-text-muted hover:bg-border hover:text-text", children: _jsx(HiOutlineXMark, { size: 10 }) })] }, `${index}-${chip}`));
-                }) })), _jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listboxId, "aria-activedescendant": expanded ? optionId(active) : undefined, disabled: disabled, autoFocus: autoFocus, className: "flex-1 min-w-[6rem] text-sm bg-transparent outline-none py-0.5", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: expanded ? `${visible.length} ${visible.length === 1 ? "suggestion" : "suggestions"}` : "" }), expanded &&
+                }) })), _jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-label": ariaLabel, placeholder: placeholder, "aria-expanded": expanded, "aria-controls": listboxId, "aria-activedescendant": expanded ? optionId(active) : undefined, disabled: disabled, autoFocus: autoFocus, className: "flex-1 min-w-[6rem] text-sm bg-transparent outline-none py-0.5", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: expanded ? `${visible.length} ${visible.length === 1 ? "suggestion" : "suggestions"}` : "" }), expanded &&
                 position &&
-                createPortal(_jsx("ul", { id: listboxId, role: "listbox", "aria-label": `${label} suggestions`, onMouseDown: (e) => e.preventDefault(), style: { position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, className: "z-[60] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1", children: visible.map((suggestion, index) => (_jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === active, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActiveIndex(index), onClick: () => select(suggestion), className: `flex items-center gap-2 px-3 py-1.5 cursor-pointer ${index === active ? "bg-primary/10" : ""}`, children: [_jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate text-sm text-text", children: suggestion.displayName || suggestion.address }), suggestion.displayName && _jsx("span", { className: "block truncate text-xs text-text-muted", children: suggestion.address })] }), _jsx("span", { className: "shrink-0 text-[11px] leading-4 px-1.5 rounded-pill bg-surface-alt text-text-muted", children: KIND_LABELS[suggestion.kind] ?? "Directory" })] }, `${index}-${suggestion.address}`))) }), document.body)] }));
+                createPortal(_jsx("ul", { id: listboxId, role: "listbox", "aria-label": `${label} suggestions`, onMouseDown: (e) => e.preventDefault(), style: { position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight, zIndex: dropdownZIndex }, className: "z-[60] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1", children: visible.map((suggestion, index) => (_jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === active, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActiveIndex(index), onClick: () => select(suggestion), className: `flex items-center gap-2 px-3 py-1.5 cursor-pointer ${index === active ? "bg-primary/10" : ""}`, children: [_jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate text-sm text-text", children: suggestion.displayName || suggestion.address }), suggestion.displayName && _jsx("span", { className: "block truncate text-xs text-text-muted", children: suggestion.address })] }), _jsx("span", { className: "shrink-0 text-[11px] leading-4 px-1.5 rounded-pill bg-surface-alt text-text-muted", children: KIND_LABELS[suggestion.kind] ?? "Directory" })] }, `${index}-${suggestion.address}`))) }), document.body)] }));
 }

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;