@rapidmx/web-client 0.15.1 → 0.17.0

package/dist/apps/shared/components/admin/mailboxes/LeftoverMailboxesSection.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listLeftoverMailboxes } from "@rapidmx/react-shared/admin/leftoverMailboxApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import EraseLeftoverDataDialog from "./EraseLeftoverDataDialog.js";
+/** How many deleted mailboxes one request asks for. */
+const PAGE_SIZE = 50;
+/** How often the list is refreshed while an erasure is under way. */
+export const LEFTOVER_REFRESH_INTERVAL_MS = 5000;
+const HEADING_CLASS = "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border";
+const CELL_CLASS = "py-2.5 px-2.5 border-b border-border align-middle";
+/** Whether the erasure the server last filed for `item` is still to finish. */
+function isErasing(item) {
+    return item.erasure?.status === "approved" || item.erasure?.status === "in_progress";
+}
+/**
+ * "Deleted mailboxes with remaining data": deleting a mailbox keeps everything in it, and the address can't be used again until
+ * that is erased, so this lists what is left (from `GET /mailboxes/leftover`) with an "Erase data" action for each. It shows nothing
+ * at all while there is nothing left - the section is only there when it is needed. An erasure that is under way shows as such, and
+ * the list refreshes itself until it has finished.
+ */
+export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_REFRESH_INTERVAL_MS, pollIntervalMs }) {
+    const [items, setItems] = useState([]);
+    const [next, setNext] = useState(undefined);
+    const [error, setError] = useState(null);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [target, setTarget] = useState(null);
+    // Only the newest reload is applied: a slow earlier one can't put back what a later one already removed.
+    const generation = useRef(0);
+    async function reload() {
+        const current = ++generation.current;
+        try {
+            const page = await listLeftoverMailboxes({ limit: PAGE_SIZE });
+            if (current !== generation.current)
+                return;
+            setItems(page.items);
+            setNext(page.next);
+            setError(null);
+        }
+        catch (err) {
+            if (current === generation.current) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not check for deleted mailboxes with remaining data.");
+            }
+        }
+    }
+    async function loadMore() {
+        const current = generation.current;
+        setLoadingMore(true);
+        try {
+            const page = await listLeftoverMailboxes({ limit: PAGE_SIZE, after: next });
+            if (current !== generation.current)
+                return;
+            setItems((existing) => [...existing, ...page.items.filter((item) => !existing.some((seen) => seen.mailboxUid === item.mailboxUid))]);
+            setNext(page.next);
+        }
+        catch (err) {
+            if (current === generation.current) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load more deleted mailboxes.");
+            }
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }
+    useEffect(() => {
+        void reload();
+    }, []);
+    const anyErasing = items.some(isErasing);
+    useEffect(() => {
+        if (!anyErasing) {
+            return;
+        }
+        const timer = setInterval(() => void reload(), refreshIntervalMs);
+        return () => clearInterval(timer);
+    }, [anyErasing, refreshIntervalMs]);
+    // Only there when something is left (or the check failed).
+    const section = items.length > 0 || error !== null ? (_jsxs("section", { className: "mt-10", "aria-labelledby": "leftover-heading", children: [_jsx("h2", { id: "leftover-heading", className: "text-sm font-bold uppercase tracking-wide text-text-muted mb-2", children: "Deleted mailboxes with remaining data" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Deleting a mailbox keeps everything in it, and its address can\u2019t be used for a new mailbox until that data is erased. Erasing is permanent." }), error && _jsx(Alert, { children: error }), items.length > 0 && (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("caption", { className: "sr-only", children: "Deleted mailboxes with remaining data" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: HEADING_CLASS, children: "Address" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Folders" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Messages" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Erasure" }), _jsx("th", { scope: "col", className: "border-b border-border", children: _jsx("span", { className: "sr-only", children: "Actions" }) })] }) }), _jsx("tbody", { children: items.map((item) => (_jsxs("tr", { children: [_jsx("td", { className: `${CELL_CLASS} break-all`, children: item.mailboxUid }), _jsx("td", { className: CELL_CLASS, children: item.folderCount }), _jsx("td", { className: CELL_CLASS, children: item.messageCount }), _jsx("td", { className: CELL_CLASS, children: isErasing(item) ? (_jsx("span", { className: "inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Erasing" })) : (_jsx("span", { className: "text-text-muted", children: "Not erased" })) }), _jsx("td", { className: `${CELL_CLASS} text-right`, children: _jsx(Button, { type: "button", variant: "secondary", className: isErasing(item) ? "!w-auto" : "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", "aria-label": `${isErasing(item) ? "Show the erasure of" : "Erase data of"} ${item.mailboxUid}`, onClick: () => setTarget(item), children: isErasing(item) ? "Show progress" : "Erase data" }) })] }, item.mailboxUid))) })] }) })), next !== undefined && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", loading: loadingMore, disabled: loadingMore, onClick: () => void loadMore(), children: "Load more" }))] })) : null;
+    // The dialog outlives the row it was opened from - erasing the last one empties the list while its "erased" message is still up - and
+    // keeps its place among the fragment's children whether or not the section is there, so it is not rebuilt (and does not lose where it
+    // is) when the section goes.
+    const dialog = target && (_jsx(EraseLeftoverDataDialog, { address: target.mailboxUid, counts: { folders: target.folderCount, messages: target.messageCount }, resume: isErasing(target) && target.erasure ? { uid: target.erasure.uid, status: target.erasure.status } : undefined, pollIntervalMs: pollIntervalMs, onErased: () => void reload(), onClose: () => {
+            setTarget(null);
+            void reload();
+        } }, target.mailboxUid));
+    return (_jsxs(_Fragment, { children: [section, dialog] }));
+}

package/dist/apps/shared/components/admin/settings/BrandingForm.js

@@ -12,9 +12,9 @@ import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 /** A header that uses both variables - the snippet the Branding page offers to copy. */
-export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
-    <span>{APP_TITLE}</span>
-    <span>{USER_MENU}</span>
+export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
+    <span>{APP_TITLE}</span>
+    <span>{USER_MENU}</span>
 </div>`;
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export function isSvgFile(file) {

package/dist/apps/shared/components/admin/settings/MailboxCreateForm.js

@@ -6,12 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
+import { leftoverConflictOf } from "@rapidmx/react-shared/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, resolveMailboxOwner } from "@rapidmx/react-shared/mail/mailApi.js";
 import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.js";
+import EraseLeftoverDataDialog from "../mailboxes/EraseLeftoverDataDialog.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
@@ -40,6 +42,10 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [maxDurationMinutes, setMaxDurationMinutes] = useState("");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
+    // The address a deleted mailbox left data at, when creating a mailbox there was refused for that - and what to do about it.
+    const [leftover, setLeftover] = useState(null);
+    const [erasing, setErasing] = useState(false);
+    const formRef = useRef(null);
     // An empty `mail:domains` list (the default) means this server enforces no domain restriction —
     // the address field stays free text, exactly as before. Once an admin configures at least one
     // domain, every mailbox this server creates must be on one of them (enforced server-side too, in
@@ -61,10 +67,15 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             .catch(() => undefined);
     }, []);
     const constrained = domains.length > 0;
+    const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+    // What was said about one address is not said about another: typing a different one takes the explanation away.
+    useEffect(() => {
+        setLeftover((current) => (current && current.address !== address ? null : current));
+    }, [address]);
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
-        const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+        setLeftover(null);
         if (constrained ? !localPart.trim() : !primarySmtpAddress.trim()) {
             setError("A primary SMTP address is required.");
             return;
@@ -106,13 +117,24 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             onCreated(mailbox);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+            const conflict = leftoverConflictOf(err);
+            if (conflict) {
+                // Not a plain failure: the address is taken by what a deleted mailbox left, which can be erased right here.
+                setLeftover({ address, conflict });
+            }
+            else {
+                setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+            }
         }
         finally {
             setSaving(false);
         }
     }
-    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Owner" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "shared", onChange: () => {
+    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), leftover && (_jsxs("div", { role: "alert", className: "py-3 px-3.5 rounded-sm text-sm mb-5 bg-danger-bg text-danger", children: [_jsx("p", { className: "font-semibold mb-1", children: leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "The data left at this address is being erased."
+                            : "This address still has data from a deleted mailbox." }), _jsx("p", { className: "mb-3", children: leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "A new mailbox can be created there once the erasure has finished."
+                            : "Deleting a mailbox keeps everything in it, and a new mailbox can't take the address until that data is erased." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setErasing(true), children: leftover.conflict.reason === "mailbox-data-erasing" ? "Show the erasure" : "Erase the leftover data" })] })), erasing && leftover && (_jsx(EraseLeftoverDataDialog, { address: leftover.address, resume: leftover.conflict.reason === "mailbox-data-erasing" ? leftover.conflict.erasure : undefined, doneLabel: "Create mailbox", onDone: () => formRef.current?.requestSubmit(), onClose: () => setErasing(false) }, leftover.address)), _jsxs("form", { ref: formRef, onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Owner" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "shared", onChange: () => {
                                                     setOwnerMode("shared");
                                                     setResolvedOwner(null);
                                                 } }), "Shared mailbox (no single owner)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "owned", onChange: () => setOwnerMode("owned") }), "Owned by a specific person"] }), ownerMode === "owned" &&

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
 import { HiCheck } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
@@ -49,6 +50,7 @@ function errorMessage(err, fallback) {
  * except the domain can be passed over and configured later from the admin console.
  */
 export default function SetupWizard({ userUid }) {
+    const { navigate } = useRouter();
     const [step, setStep] = useState(null);
     const [status, setStatus] = useState();
     const [domains, setDomains] = useState([]);
@@ -141,7 +143,7 @@ export default function SetupWizard({ userUid }) {
             // Let a step still being recorded land first, so it can't arrive after setup is marked finished.
             await progress.current.running;
             await completeSetup();
-            window.location.href = "/admin";
+            void navigate("/admin");
         }
         catch (err) {
             setError(errorMessage(err, "Could not finish setup."));

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

@@ -131,6 +131,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             timezone: occurrence?.timezone ?? deviceZone,
             attendees: occurrence?.attendees ?? [],
             guestDraft: "",
+            guestInvalid: [],
             recurrenceRule: occurrence?.recurrenceRule ?? null,
             reminderMinutes: occurrence?.reminderMinutesBeforeStart?.toString() ?? "",
             busyStatus: occurrence?.busyStatus ?? "busy",
@@ -195,12 +196,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     }, [occurrence?.videoMeetingUid]);
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
-    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || hasDescriptionText(values.descriptionHtml));
-    function addGuests(text) {
-        const merged = mergeGuests(values.attendees, text);
-        update({ attendees: merged.attendees, guestDraft: merged.invalid.join(" ") });
-        return merged.invalid;
-    }
+    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
     function updateAttendee(index, patch) {
         setValues((prev) => ({ ...prev, attendees: prev.attendees.map((a, i) => (i === index ? { ...a, ...patch } : a)) }));
     }
@@ -382,8 +378,8 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             setError("A title is required.");
             return;
         }
-        // An address typed into the guests field but not added yet is added now - or, not being one, stops the save.
-        const merged = mergeGuests(values.attendees, values.guestDraft);
+        // An address typed into the guests field but not added yet is added now - or, not being one (nor what was already flagged there), stops the save.
+        const merged = mergeGuests(values.attendees, [...values.guestInvalid, values.guestDraft].join(", "), [effectiveOrganizerAddress]);
         if (merged.invalid.length > 0) {
             setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
             return;
@@ -394,7 +390,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             return;
         }
         if (values.guestDraft) {
-            update({ attendees: merged.attendees, guestDraft: "" });
+            update({ attendees: merged.attendees, guestDraft: "", guestInvalid: [] });
         }
         let startDate;
         let endDate;
@@ -521,7 +517,6 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         deviceZone,
         startWeekday: startWeekdayCode(values.allDay ? values.start : Number.isNaN(startMs) ? "" : new Date(startMs).toISOString(), values.allDay, values.timezone),
         editingSingleOccurrence,
-        addGuests,
         updateAttendee,
         removeAttendee,
         addResource,

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

@@ -17,8 +17,9 @@ export declare function VideoConferencingRow({ c }: {
     c: EventFormController;
 }): React.JSX.Element;
 /**
- * The guests field: an address box (Enter, a comma or a semicolon adds what is typed) and what has been added - chips in the quick popover,
- * rows with a role, the answer so far and a remove button in the full form, which also offers rooms and equipment.
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
  */
 export declare function GuestsField({ c, compact }: {
     c: EventFormController;

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

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
 import ResourcePicker from "./ResourcePicker.js";
@@ -31,27 +32,15 @@ export function VideoConferencingRow({ c }) {
     return (_jsxs(IconRow, { icon: _jsx(HiOutlineVideoCamera, { size: 20 }), children: [_jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: values.videoEnabled, onChange: (e) => c.update({ videoEnabled: e.target.checked }) }), "Add video conferencing"] }), values.videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), c.videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mb-1", children: c.videoError })), c.videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !c.joinUrl, onClick: () => window.open(c.joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !c.joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: c.organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }))] }));
 }
 /**
- * The guests field: an address box (Enter, a comma or a semicolon adds what is typed) and what has been added - chips in the quick popover,
- * rows with a role, the answer so far and a remove button in the full form, which also offers rooms and equipment.
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
  */
 export function GuestsField({ c, compact }) {
     const { values } = c;
-    const [hint, setHint] = useState(null);
     const [pickerOpen, setPickerOpen] = useState(false);
     const pickerAnchor = useRef(null);
-    function commit() {
-        const invalid = c.addGuests(values.guestDraft);
-        setHint(invalid.length > 0 ? `“${invalid[0]}” isn’t a valid email address.` : null);
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("input", { type: "text", "aria-label": "Add guests", placeholder: "Add guests", className: compact ? QUIET_INPUT_CLASS : INPUT_CLASS, value: values.guestDraft, onChange: (e) => {
-                    setHint(null);
-                    c.update({ guestDraft: e.target.value });
-                }, onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === "," || e.key === ";") {
-                        e.preventDefault();
-                        commit();
-                    }
-                } }), hint && (_jsx("p", { role: "alert", className: "text-xs text-danger", children: hint })), compact ? (values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-1.5", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5", children: [_jsx("span", { className: "truncate max-w-[16rem]", children: attendee.address }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, i))) }))) : (_jsxs(_Fragment, { children: [values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "w-7 h-7 shrink-0 rounded-full bg-primary/15 text-primary-dark text-xs font-semibold flex items-center justify-center uppercase", children: (attendee.displayName || attendee.address).charAt(0) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm truncate", children: attendee.displayName || attendee.address }), _jsxs("div", { className: "text-xs text-text-muted truncate", children: [attendee.displayName ? `${attendee.address} · ` : "", RESPONSE_STATUS_LABEL[attendee.responseStatus]] })] }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => c.updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }, i))) })), _jsx("button", { ref: pickerAnchor, type: "button", onClick: () => setPickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" }), pickerOpen && (_jsx(ResourcePicker, { anchorRef: pickerAnchor, onClose: () => setPickerOpen(false), onSelect: (mailbox) => {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(GuestInput, { id: "event-guests", label: "Add guests", placeholder: "Add guests", variant: compact ? "quiet" : "box", listedElsewhere: !compact, guests: values.attendees, invalid: values.guestInvalid, draft: values.guestDraft, skipAddresses: [c.organizerAddress], mailboxUid: values.targetMailboxUid, onChange: (next) => c.update({ attendees: next.guests, guestInvalid: next.invalid, guestDraft: next.draft }) }), compact ? null : (_jsxs(_Fragment, { children: [values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "w-7 h-7 shrink-0 rounded-full bg-primary/15 text-primary-dark text-xs font-semibold flex items-center justify-center uppercase", children: (attendee.displayName || attendee.address).charAt(0) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm truncate", children: attendee.displayName || attendee.address }), _jsxs("div", { className: "text-xs text-text-muted truncate", children: [attendee.displayName ? `${attendee.address} · ` : "", RESPONSE_STATUS_LABEL[attendee.responseStatus]] })] }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => c.updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }, i))) })), _jsx("button", { ref: pickerAnchor, type: "button", onClick: () => setPickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" }), pickerOpen && (_jsx(ResourcePicker, { anchorRef: pickerAnchor, onClose: () => setPickerOpen(false), onSelect: (mailbox) => {
                             c.addResource(mailbox);
                             setPickerOpen(false);
                         }, excludeAddresses: c.guestAddresses }))] }))] }));

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

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Attendee } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import type { ContactSuggestionOptions, RecipientSuggestion } from "@rapidmx/react-shared/mail/directoryApi.js";
+declare const VARIANT_CLASS: {
+    /** Reads as plain text until it is hovered or focused, as the rows of the quick-create popover do. */
+    quiet: string;
+    /** A bordered box, as the full form's fields are. */
+    box: string;
+};
+/** What a guests field holds: the guests added, what was committed but is not an address (kept in the field, flagged, until it is fixed or removed),
+ * and what is still being typed. */
+export interface GuestEntries {
+    guests: Attendee[];
+    invalid: string[];
+    draft: string;
+}
+export interface GuestInputProps extends GuestEntries {
+    /** The input's id, and the prefix of its suggestions' ids. */
+    id: string;
+    /** The input's accessible name. */
+    label: string;
+    placeholder?: string;
+    variant: keyof typeof VARIANT_CLASS;
+    /** The guests are listed elsewhere (rows with a role and an answer): the field draws chips only for what is not an address. */
+    listedElsewhere?: boolean;
+    /** Addresses that are never added - the organizer's, or the people already invited. */
+    skipAddresses?: string[];
+    /** The mailbox the event is on, whose contacts are suggested too. */
+    mailboxUid?: string;
+    onChange: (next: GuestEntries) => void;
+    /** Loads suggestions; defaults to the lookup compose's recipient fields use. */
+    fetchSuggestions?: (query: string, options: ContactSuggestionOptions) => Promise<RecipientSuggestion[]>;
+    debounceMs?: number;
+}
+/**
+ * The guests field of an event: compose's recipient field (`RecipientInput`) reading its chips as guests. Typing looks the name up among the
+ * caller's contacts and the server's mailboxes and distribution lists; a suggestion (or an address, `Name <address>`, a comma, a semicolon,
+ * Enter or leaving the field) becomes a chip, a paste of several addresses becomes several, and something that is not an address stays as
+ * a flagged chip once it is committed - nothing is said while it is being typed. A distribution list is added as its own address, one guest
+ * (as compose sends to one), which the mail server delivers to its members.
+ *
+ * The field is controlled: `guests` are the attendees, and every edit hands back the whole of the entries (see `applyGuestChips()`).
+ */
+export default function GuestInput({ id, label, placeholder, variant, listedElsewhere, skipAddresses, mailboxUid, guests, invalid, draft, onChange, fetchSuggestions, debounceMs, }: GuestInputProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import RecipientInput from "../mail/compose/RecipientInput.js";
+import { applyGuestChips, guestChip } from "./eventFormat.js";
+/** Above the event dialog's own backdrop (`z-[1000]`), which the suggestions would otherwise sit under. */
+const DIALOG_SUGGESTIONS_Z_INDEX = 1100;
+const VARIANT_CLASS = {
+    /** Reads as plain text until it is hovered or focused, as the rows of the quick-create popover do. */
+    quiet: "w-full text-sm py-1 border-b border-transparent hover:border-border focus-within:border-primary",
+    /** A bordered box, as the full form's fields are. */
+    box: "w-full text-sm py-1.5 px-3 border border-border rounded-md bg-surface text-text focus-within:border-primary",
+};
+/** What `RecipientInput` calls `onChange` with; the entries come through `onEdit`. */
+const IGNORED = () => undefined;
+/**
+ * The guests field of an event: compose's recipient field (`RecipientInput`) reading its chips as guests. Typing looks the name up among the
+ * caller's contacts and the server's mailboxes and distribution lists; a suggestion (or an address, `Name <address>`, a comma, a semicolon,
+ * Enter or leaving the field) becomes a chip, a paste of several addresses becomes several, and something that is not an address stays as
+ * a flagged chip once it is committed - nothing is said while it is being typed. A distribution list is added as its own address, one guest
+ * (as compose sends to one), which the mail server delivers to its members.
+ *
+ * The field is controlled: `guests` are the attendees, and every edit hands back the whole of the entries (see `applyGuestChips()`).
+ */
+export default function GuestInput({ id, label, placeholder, variant, listedElsewhere, skipAddresses, mailboxUid, guests, invalid, draft, onChange, fetchSuggestions, debounceMs, }) {
+    const value = [...guests.map(guestChip), ...invalid, draft].filter((part) => part.length > 0).join(", ");
+    const listed = new Set(listedElsewhere ? guests.map(guestChip) : []);
+    return (_jsx(RecipientInput, { id: id, label: label, ariaLabel: label, listLabel: "Guests", placeholder: placeholder, className: VARIANT_CLASS[variant], dropdownZIndex: DIALOG_SUGGESTIONS_Z_INDEX, value: value, initialPending: draft, mailboxUid: mailboxUid, hideChip: (chip) => listed.has(chip), fetchSuggestions: fetchSuggestions, debounceMs: debounceMs, onChange: IGNORED, onEdit: (chips, pending) => {
+            const merged = applyGuestChips(guests, chips, skipAddresses);
+            onChange({ guests: merged.attendees, invalid: merged.invalid, draft: pending });
+        } }));
+}

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

@@ -13,6 +13,7 @@ import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { notify } from "../../notifications/store.js";
 import { INPUT_CLASS } from "./EventFormParts.js";
+import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import { descriptionProblem, initialDescriptionHtml } from "./eventDialogFields.js";
 import { mergeGuests } from "./eventFormat.js";
@@ -35,41 +36,29 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
     const [start, setStart] = useState(subject.startDate ? toDatetimeLocal(subject.startDate) : "");
     const [end, setEnd] = useState(subject.endDate ? toDatetimeLocal(subject.endDate) : "");
     const [descriptionHtml, setDescriptionHtml] = useState(() => initialDescriptionHtml(subject));
-    const [added, setAdded] = useState([]);
-    const [guestDraft, setGuestDraft] = useState("");
+    // The guests to add (not the ones already invited: `subject.guestAddresses` are skipped), what is flagged in the field, and what is being typed.
+    const [entries, setEntries] = useState({ guests: [], invalid: [], draft: "" });
     const [error, setError] = useState(null);
     const [sending, setSending] = useState(false);
     const heading = canChange ? "Request a change" : "Add guests";
-    /** Adds what was typed into the guests box, returning the guests as they now stand; a mistyped address stays in the box and is said. */
+    /** Adds what was typed into the guests box, returning the guests to add as they now stand; something that is not an address is said. */
     function addTypedGuests() {
-        const invited = [...subject.guestAddresses, ...added.map((guest) => guest.address)].map((address) => ({ address }));
-        const merged = mergeGuests(invited.map((guest) => ({ ...guest, role: "required", responseStatus: "needsAction", isOrganizer: false })), guestDraft);
+        const merged = mergeGuests(entries.guests, [...entries.invalid, entries.draft].join(", "), subject.guestAddresses);
         if (merged.invalid.length > 0) {
             setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
-            setGuestDraft(merged.invalid.join(" "));
             return undefined;
         }
-        setGuestDraft("");
-        return merged.attendees.slice(invited.length).map((guest) => ({ address: guest.address }));
-    }
-    function handleGuestKey(event) {
-        if (event.key === "Enter" || event.key === "," || event.key === ";") {
-            event.preventDefault();
-            setError(null);
-            const more = addTypedGuests();
-            if (more) {
-                setAdded((current) => [...current, ...more]);
-            }
-        }
+        setEntries({ guests: merged.attendees, invalid: [], draft: "" });
+        return merged.attendees;
     }
     async function handleSubmit(event) {
         event.preventDefault();
         setError(null);
-        const typed = canInvite ? addTypedGuests() : [];
-        if (!typed) {
+        const added = canInvite ? addTypedGuests() : [];
+        if (!added) {
             return;
         }
-        const guests = [...added, ...typed];
+        const guests = added.map((guest) => (guest.displayName ? { address: guest.address, displayName: guest.displayName } : { address: guest.address }));
         const request = {};
         if (canChange) {
             if (title.trim() !== subject.title.trim()) {
@@ -134,5 +123,5 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
             setSending(false);
         }
     }
-    return (_jsxs("form", { onSubmit: (event) => void handleSubmit(event), "aria-label": heading, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: heading }), _jsx("button", { type: "button", "aria-label": "Cancel request", onClick: onCancel, className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you." }), error && _jsx(Alert, { children: error }), canChange && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Title", _jsx("input", { type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Location", _jsx("input", { type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) })] }), canChangeTime && (_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Starts", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Ends", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), !canChangeTime && (_jsx("p", { className: "text-xs text-text-muted", children: subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer." })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium", children: "Description" }), _jsx(LazyDescriptionEditor, { value: descriptionHtml, onChange: setDescriptionHtml })] })] })), canInvite && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Guests to add", _jsx("input", { type: "text", className: INPUT_CLASS, placeholder: "name@example.com", value: guestDraft, onChange: (e) => setGuestDraft(e.target.value), onKeyDown: handleGuestKey })] }), added.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-1.5", children: added.map((guest, index) => (_jsxs("li", { className: "flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5", children: [_jsx("span", { className: "truncate max-w-[16rem]", children: guest.address }), _jsx("button", { type: "button", "aria-label": `Remove ${guest.address}`, onClick: () => setAdded((current) => current.filter((_, i) => i !== index)), className: "w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, guest.address))) }))] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "submit", loading: sending, disabled: sending, className: "!w-auto", children: "Send request" }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", disabled: sending, onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: (event) => void handleSubmit(event), "aria-label": heading, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: heading }), _jsx("button", { type: "button", "aria-label": "Cancel request", onClick: onCancel, className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you." }), error && _jsx(Alert, { children: error }), canChange && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Title", _jsx("input", { type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Location", _jsx("input", { type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) })] }), canChangeTime && (_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Starts", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Ends", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), !canChangeTime && (_jsx("p", { className: "text-xs text-text-muted", children: subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer." })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium", children: "Description" }), _jsx(LazyDescriptionEditor, { value: descriptionHtml, onChange: setDescriptionHtml })] })] })), canInvite && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: "request-guests", className: "text-xs font-medium", children: "Guests to add" }), _jsx(GuestInput, { id: "request-guests", label: "Guests to add", placeholder: "Name or name@example.com", variant: "box", skipAddresses: subject.guestAddresses, ...entries, onChange: setEntries })] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "submit", loading: sending, disabled: sending, className: "!w-auto", children: "Send request" }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", disabled: sending, onClick: onCancel, children: "Cancel" })] })] }));
 }

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

@@ -22,6 +22,8 @@ export interface EventFormValues {
     attendees: Attendee[];
     /** What has been typed into the guests field but not added yet. */
     guestDraft: string;
+    /** What was committed to the guests field (Enter, a comma, leaving it) but is not an address: kept there, flagged, until it is fixed or removed. */
+    guestInvalid: string[];
     recurrenceRule: RecurrenceRule | null;
     /** Minutes before the start, as typed; blank means no reminder. */
     reminderMinutes: string;
@@ -57,8 +59,6 @@ export interface EventFormController {
     /** The address the event is organized from (the chosen mailbox's, for a new event). */
     organizerAddress: string;
     deviceZone: string;
-    /** Adds the addresses in `text`; returns the ones that are not valid addresses. */
-    addGuests: (text: string) => string[];
     updateAttendee: (index: number, patch: Partial<Attendee>) => void;
     removeAttendee: (index: number) => void;
     addResource: (mailbox: Mailbox) => void;

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

@@ -33,12 +33,24 @@ export type ReminderUnit = (typeof REMINDER_UNITS)[number]["unit"];
 export declare function bestReminderUnit(minutes: number): (typeof REMINDER_UNITS)[number];
 /** "Notify 30 minutes before" / "Notify 1 hour before" / "Notify at the start" for a stored reminder, or "No notification". */
 export declare function describeReminder(minutes: number | undefined): string;
-/** Splits what was typed into the guests field into its addresses: commas, semicolons and white space separate them. */
-export declare function splitGuestInput(text: string): string[];
-/** The loosest address check that is still worth making before an invitation is sent: something, an @, something. */
-export declare function isValidGuestAddress(address: string): boolean;
 /** An attendee as the guests field adds one. */
-export declare function newGuest(address: string): Attendee;
+export declare function newGuest(address: string, displayName?: string): Attendee;
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export declare function guestChip(guest: {
+    address: string;
+    displayName?: string;
+}): string;
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export declare function applyGuestChips(current: Attendee[], chips: string[], skipAddresses?: string[]): {
+    attendees: Attendee[];
+    invalid: string[];
+};
 /** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
  * itself parses such a string in, which needs no conversion. */
 export declare function wallStringToMs(value: string, zone: string, deviceZone: string): number;
@@ -55,9 +67,10 @@ export declare function localDateFromKey(key: string): Date;
 export declare function formatWhen(start: Date, end: Date, allDay: boolean, now?: Date): string;
 /** `formatWhen()` for a stored event: instants for a timed one, the date-only keys (with the exclusive end) for an all-day one. */
 export declare function formatStoredWhen(startDate: string, endDate: string, allDay: boolean, now?: Date): string;
-/** Adds the addresses typed into the guests field to `current`: an address already on the list (in any case) is skipped, and what is not an
- * address comes back as `invalid` for the field to keep. */
-export declare function mergeGuests(current: Attendee[], text: string): {
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export declare function mergeGuests(current: Attendee[], text: string, skipAddresses?: string[]): {
     attendees: Attendee[];
     invalid: string[];
 };