@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function formatBytes(bytes) {
+    if (bytes >= 1000000000)
+        return `${(bytes / 1000000000).toFixed(1)} GB`;
+    if (bytes >= 1000000)
+        return `${(bytes / 1000000).toFixed(1)} MB`;
+    if (bytes >= 1000)
+        return `${(bytes / 1000).toFixed(1)} KB`;
+    return `${bytes} B`;
+}
+export default function MailboxTable({ mailboxes }) {
+    if (mailboxes.length === 0) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "No mailboxes found." });
+    }
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Address" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Display name" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Owner" }), _jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: "Quota used" }), _jsx("th", { className: "border-b border-border" })] }) }), _jsx("tbody", { children: mailboxes.map((mailbox) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.primarySmtpAddress }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.displayName }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: mailbox.ownerUserUid ?? (_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: "Shared" })) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-middle", children: [formatBytes(mailbox.usedBytes), " / ", formatBytes(mailbox.quotaBytes)] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-middle text-right", children: _jsx("a", { href: `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`, className: "text-primary-dark font-medium hover:underline", children: "View" }) })] }, mailbox.uid))) })] }) }));
+}

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.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 SELECT_CLASS = "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/**
+ * Lets an admin view and edit a resource mailbox's booking settings — same load/edit/PUT/reload
+ * interaction shape as `ShareAccessCard`, adapted the same way `MemberListCard` already adapted it:
+ * these seven fields live directly on the `Mailbox` the parent detail page already loaded (not a
+ * separate resource fetched by its own endpoint, unlike a mailbox's ACL), so this receives the
+ * already-loaded `mailbox` and pushes the `PUT` response back up rather than fetching independently.
+ * Only rendered by the detail page when `mailbox.isResource` is already `true` — a mailbox becomes a
+ * resource at creation time (`apps/admin/mailboxes/new`), not retroactively from here.
+ */
+export default function ResourceSettingsCard({ mailbox, onUpdate }) {
+    const [resourceType, setResourceType] = useState(mailbox.resourceType ?? "room");
+    const [resourceCapacity, setResourceCapacity] = useState(mailbox.resourceCapacity?.toString() ?? "");
+    const [autoAcceptBookings, setAutoAcceptBookings] = useState(!!mailbox.autoAcceptBookings);
+    const [allowConflicts, setAllowConflicts] = useState(!!mailbox.allowConflicts);
+    const [bookingWindowDays, setBookingWindowDays] = useState(mailbox.bookingWindowDays?.toString() ?? "");
+    const [maxDurationMinutes, setMaxDurationMinutes] = useState(mailbox.maxDurationMinutes?.toString() ?? "");
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({
+                uid: mailbox.uid,
+                version: mailbox.version,
+                resourceType,
+                resourceCapacity: resourceCapacity ? Number(resourceCapacity) : undefined,
+                autoAcceptBookings,
+                allowConflicts,
+                bookingWindowDays: bookingWindowDays ? Number(bookingWindowDays) : undefined,
+                maxDurationMinutes: maxDurationMinutes ? Number(maxDurationMinutes) : undefined,
+            });
+            onUpdate(updated);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save resource settings.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-4", children: "Resource settings" }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Resource type" }), _jsxs("select", { "aria-label": "Resource type", className: SELECT_CLASS, value: resourceType, onChange: (e) => setResourceType(e.target.value), children: [_jsx("option", { value: "room", children: "Room" }), _jsx("option", { value: "equipment", children: "Equipment" })] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Capacity (optional)" }), _jsx("input", { type: "number", min: 0, step: 1, "aria-label": "Capacity", className: INPUT_CLASS, value: resourceCapacity, onChange: (e) => setResourceCapacity(e.target.value), placeholder: "Informational only" })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoAcceptBookings, onChange: (e) => setAutoAcceptBookings(e.target.checked) }), "Automatically accept booking requests"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: allowConflicts, onChange: (e) => setAllowConflicts(e.target.checked) }), "Allow conflicting bookings (skip conflict checking entirely)"] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Booking window, in days (optional)" }), _jsx("input", { type: "number", min: 0, step: 1, "aria-label": "Booking window, in days", className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(e.target.value), placeholder: "No limit" })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Maximum duration, in minutes (optional)" }), _jsx("input", { type: "number", min: 0, step: 1, "aria-label": "Maximum duration, in minutes", className: INPUT_CLASS, value: maxDurationMinutes, onChange: (e) => setMaxDurationMinutes(e.target.value), placeholder: "No limit" })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save resource settings" }) })] })] }));
+}

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getMailboxAcl, grantMailboxAccess, revokeMailboxAccess } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const DEFAULT_DELEGATE_ACTIONS = ["read", "list", "count", "exists"];
+/**
+ * Lets an admin (or, eventually, the mailbox owner) view and edit a mailbox's delegate access — the
+ * mechanism behind Exchange-style shared mailboxes. `records` on a mailbox's own ACL doubles as both the
+ * owner's grant (if any) and every delegate's — see `BaseMailboxRoute`'s doc comment in `@rapidmx/restapi`.
+ */
+export default function ShareAccessCard({ mailboxUid }) {
+    const [acl, setAcl] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [newUserUid, setNewUserUid] = useState("");
+    const [saving, setSaving] = useState(false);
+    function reload() {
+        setLoading(true);
+        setError(null);
+        getMailboxAcl(mailboxUid)
+            .then(setAcl)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load share settings."))
+            .finally(() => setLoading(false));
+    }
+    useEffect(reload, [mailboxUid]);
+    async function handleGrant(e) {
+        e.preventDefault();
+        const userUid = newUserUid.trim();
+        if (!userUid) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            await grantMailboxAccess(mailboxUid, userUid, DEFAULT_DELEGATE_ACTIONS);
+            setNewUserUid("");
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function handleRevoke(userOrRoleId) {
+        setSaving(true);
+        setError(null);
+        try {
+            await revokeMailboxAccess(mailboxUid, userOrRoleId);
+            reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not revoke access.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Shared access" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Grants read access to this mailbox for another user, independent of ownership." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("ul", { className: "flex flex-col gap-2 mb-4", children: [(acl?.records ?? []).length === 0 && (_jsx("li", { className: "text-sm text-text-muted", children: "No grants on this mailbox yet." })), acl?.records.map((record) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: record.userOrRoleId }), _jsx("div", { className: "text-xs text-text-muted", children: record.actions.join(", ") })] }), _jsx("button", { type: "button", onClick: () => handleRevoke(record.userOrRoleId), disabled: saving, className: "text-sm text-danger hover:underline disabled:opacity-55", children: "Revoke" })] }, record.userOrRoleId)))] })), _jsxs("form", { onSubmit: handleGrant, className: "flex gap-2", children: [_jsx("input", { type: "text", value: newUserUid, onChange: (e) => setNewUserUid(e.target.value), placeholder: "User uid to grant access to", className: "flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary" }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Grant" })] })] }));
+}

package/dist/apps/shared/components/booking/AvailabilityEditor.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const INPUT_CLASS = "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+function minutesToTimeValue(minutes) {
+    const h = Math.floor(minutes / 60)
+        .toString()
+        .padStart(2, "0");
+    const m = (minutes % 60).toString().padStart(2, "0");
+    return `${h}:${m}`;
+}
+function timeValueToMinutes(value) {
+    const [h, m] = value.split(":").map(Number);
+    return h * 60 + m;
+}
+/**
+ * Adds/removes `BookingType.availability` weekly windows — deliberately does not cover `dateOverrides`
+ * (per-date blackouts/exceptions), a separate, less commonly needed escape hatch left for a future pass;
+ * `BookingUtils.generateCandidateSlots()` already handles an empty `dateOverrides` array gracefully.
+ */
+export default function AvailabilityEditor({ value, onChange }) {
+    const [dayOfWeek, setDayOfWeek] = useState(1);
+    const [startTime, setStartTime] = useState("09:00");
+    const [endTime, setEndTime] = useState("17:00");
+    const [error, setError] = useState(null);
+    function handleAdd() {
+        const startMinute = timeValueToMinutes(startTime);
+        const endMinute = timeValueToMinutes(endTime);
+        if (startMinute >= endMinute) {
+            setError("Start time must be before end time.");
+            return;
+        }
+        setError(null);
+        onChange([...value, { dayOfWeek, startMinute, endMinute }]);
+    }
+    function handleRemove(index) {
+        onChange(value.filter((_, i) => i !== index));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [error && _jsx("p", { className: "text-sm text-danger", children: error }), value.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No availability windows yet \u2014 add one below." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: value.map((window, index) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm text-sm", children: [_jsxs("span", { children: [DAY_LABELS[window.dayOfWeek], " ", minutesToTimeValue(window.startMinute), "\u2013", minutesToTimeValue(window.endMinute)] }), _jsx("button", { type: "button", onClick: () => handleRemove(index), className: "text-sm text-danger hover:underline", children: "Remove" })] }, index))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { "aria-label": "Day of week", value: dayOfWeek, onChange: (e) => setDayOfWeek(Number(e.target.value)), className: INPUT_CLASS, children: DAY_LABELS.map((label, i) => (_jsx("option", { value: i, children: label }, label))) }), _jsx("input", { type: "time", "aria-label": "Start time", value: startTime, onChange: (e) => setStartTime(e.target.value), className: INPUT_CLASS }), _jsx("span", { className: "text-sm text-text-muted", children: "to" }), _jsx("input", { type: "time", "aria-label": "End time", value: endTime, onChange: (e) => setEndTime(e.target.value), className: INPUT_CLASS }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleAdd, children: "Add window" })] })] }));
+}

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { CALENDAR_COLOR_PALETTE, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+/**
+ * Calendar's left-sidebar checklist of "My calendars" — one row per `calendar`-type folder, a color
+ * swatch matching `colorForFolder`, and a checkbox controlling whether that calendar's events are
+ * currently shown (the checked set is owned by `apps/www/calendar/index.tsx`, since it drives which
+ * folders get fanned out to on every reload). "+ Add calendar" is a real `createFolder({type:
+ * "calendar", ...})` call — see the Phase 4 plan's own note that folder creation has no type
+ * restriction server-side, so this needed no new backend route.
+ */
+export default function CalendarListSidebar({ calendars, checkedFolderUids, onToggle, onAddCalendar }) {
+    const [adding, setAdding] = useState(false);
+    const [name, setName] = useState("");
+    const [color, setColor] = useState(CALENDAR_COLOR_PALETTE[0]);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    async function handleAdd(e) {
+        e.preventDefault();
+        if (!name.trim()) {
+            return;
+        }
+        setError(null);
+        setSaving(true);
+        try {
+            await onAddCalendar(name.trim(), color);
+            setName("");
+            setColor(CALENDAR_COLOR_PALETTE[0]);
+            setAdding(false);
+        }
+        catch {
+            setError("Could not create this calendar.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("nav", { "aria-label": "My calendars", className: "p-3 border-t border-border", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "My calendars" }), _jsx("button", { type: "button", onClick: () => setAdding(true), "aria-label": "Add calendar", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), error && (_jsx("div", { className: "mb-1", children: _jsx(Alert, { children: error }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: calendars.map((folder) => (_jsxs("label", { className: "flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: checkedFolderUids.has(folder.uid), onChange: () => onToggle(folder.uid), style: { accentColor: colorForFolder(folder) } }), _jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: colorForFolder(folder) } }), _jsx("span", { className: "truncate", children: folder.name })] }, folder.uid))) }), adding && (_jsxs("form", { onSubmit: handleAdd, className: "flex flex-col gap-1.5 mt-2", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New calendar name", value: name, onChange: (e) => setName(e.target.value), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("div", { className: "flex items-center gap-1", role: "radiogroup", "aria-label": "Calendar color", children: CALENDAR_COLOR_PALETTE.map((swatch) => (_jsx("button", { type: "button", "aria-label": `Color ${swatch}`, "aria-pressed": color === swatch, onClick: () => setColor(swatch), className: ["w-4 h-4 rounded-full shrink-0", color === swatch ? "ring-2 ring-offset-1 ring-text" : ""].join(" "), style: { backgroundColor: swatch } }, swatch))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "submit", disabled: saving, className: "text-xs font-semibold text-primary-dark", children: "Add" }), _jsx("button", { type: "button", onClick: () => setAdding(false), className: "text-xs text-text-muted", children: "Cancel" })] })] }))] }));
+}

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

@@ -0,0 +1,167 @@
+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 { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createCalendarEvent, respondToEvent, updateCalendarEvent, } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.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 RecurrenceEditor from "./RecurrenceEditor.js";
+import ResourcePicker from "./ResourcePicker.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 SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+const ATTENDEE_ROLES = ["required", "optional", "resource"];
+const BUSY_STATUSES = ["busy", "free", "tentative", "oof"];
+const BUSY_STATUS_LABEL = { busy: "Busy", free: "Free", tentative: "Tentative", oof: "Out of office" };
+const RESPONSE_STATUS_LABEL = {
+    needsAction: "Awaiting response",
+    accepted: "Accepted",
+    declined: "Declined",
+    tentative: "Tentative",
+};
+/**
+ * Create/view/edit/delete for a single calendar event. Editing or deleting a recurring event's
+ * occurrence offers a choice between "this event" and "the entire series" (see
+ * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
+ */
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, organizerAddress, occurrence, initialStart, initialEnd, onSaved, onDeleted, }) {
+    const [targetFolderUid, setTargetFolderUid] = useState(folderUid);
+    const [title, setTitle] = useState(occurrence?.title ?? "");
+    const [location, setLocation] = useState(occurrence?.location ?? "");
+    const [start, setStart] = useState(toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString()));
+    const [end, setEnd] = useState(toDatetimeLocal(occurrence?.endDate ?? initialEnd?.toISOString() ?? new Date(Date.now() + 30 * 60000).toISOString()));
+    const [allDay, setAllDay] = useState(occurrence?.allDay ?? false);
+    const [timezone] = useState(occurrence?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
+    const [attendees, setAttendees] = useState(occurrence?.attendees ?? []);
+    const [recurrenceRule, setRecurrenceRule] = useState(occurrence?.recurrenceRule ?? null);
+    const [reminderMinutes, setReminderMinutes] = useState(occurrence?.reminderMinutesBeforeStart?.toString() ?? "");
+    const [busyStatus, setBusyStatus] = useState(occurrence?.busyStatus ?? "busy");
+    const [autoReplyEnabled, setAutoReplyEnabled] = useState(occurrence?.autoReplyEnabled ?? false);
+    const [autoReplyMessage, setAutoReplyMessage] = useState(occurrence?.autoReplyMessage ?? "");
+    const [editScope, setEditScope] = useState("occurrence");
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [responding, setResponding] = useState(false);
+    const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
+    const addResourceButtonRef = useRef(null);
+    // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
+    // `organizerAddress` is always this mailbox's own primary SMTP address (see `EventModalProps`), so
+    // finding it among `attendees` (and not as that attendee's own organizer flag) identifies exactly
+    // that case. `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own
+    // (see `calendarApi.ts`'s `respondToEvent` doc comment) — it always acts on `occurrence.uid` as a
+    // single event document, so this deliberately does not consult `editScope`.
+    const myAttendeeIndex = occurrence ? attendees.findIndex((a) => a.address.toLowerCase() === organizerAddress.toLowerCase()) : -1;
+    const canRespond = myAttendeeIndex !== -1 && !attendees[myAttendeeIndex].isOrganizer;
+    function updateAttendee(index, patch) {
+        setAttendees((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
+    }
+    function removeAttendee(index) {
+        setAttendees((prev) => prev.filter((_, i) => i !== index));
+    }
+    function addResource(mailbox) {
+        setAttendees((prev) => [
+            ...prev,
+            { address: mailbox.primarySmtpAddress, displayName: mailbox.displayName, role: "resource", responseStatus: "needsAction", isOrganizer: false },
+        ]);
+        setResourcePickerOpen(false);
+    }
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!title.trim()) {
+            setError("A title is required.");
+            return;
+        }
+        if (new Date(end) <= new Date(start)) {
+            setError("The end time must be after the start time.");
+            return;
+        }
+        const fields = {
+            title: title.trim(),
+            location: location.trim() || undefined,
+            startDate: new Date(start).toISOString(),
+            endDate: new Date(end).toISOString(),
+            allDay,
+            timezone,
+            organizer: { address: organizerAddress, type: "to" },
+            attendees,
+            recurrenceRule: recurrenceRule ?? undefined,
+            reminderMinutesBeforeStart: reminderMinutes.trim() ? Number(reminderMinutes) : undefined,
+            busyStatus,
+            autoReplyEnabled,
+            autoReplyMessage: autoReplyEnabled ? autoReplyMessage : undefined,
+        };
+        setSaving(true);
+        try {
+            if (!occurrence) {
+                await createCalendarEvent({ mailboxUid, folderUid: targetFolderUid, ...fields });
+            }
+            else if (occurrence.isRecurringOccurrence && editScope === "occurrence") {
+                await detachOccurrence(occurrence, fields);
+            }
+            else if (occurrence.isRecurringOccurrence) {
+                await saveEventSeries(occurrence, fields);
+            }
+            else {
+                await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...fields });
+            }
+            onSaved();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this event.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    // Only ever invoked from the Delete button(s) rendered inside the `{occurrence && (...)}` block
+    // below, so `occurrence` is always non-null here — no defensive null check needed.
+    async function handleDelete(scope) {
+        setError(null);
+        setSaving(true);
+        try {
+            if (occurrence.isRecurringOccurrence && scope === "occurrence") {
+                await deleteEventOccurrence(occurrence);
+            }
+            else {
+                await deleteEventSeries(occurrence);
+            }
+            onDeleted();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not delete this event.");
+            setSaving(false);
+        }
+    }
+    // Only rendered inside the `{canRespond && (...)}` block below, which already requires `occurrence`
+    // to be non-null (see `canRespond`'s own definition above) — same established pattern as
+    // `handleDelete`'s non-null assertion.
+    async function handleRespond(responseStatus) {
+        setError(null);
+        setResponding(true);
+        try {
+            await respondToEvent(occurrence.uid, responseStatus);
+            // A decline soft-deletes the mailbox's own copy server-side — treat it the same as a
+            // delete rather than a save so the calendar view drops it immediately.
+            if (responseStatus === "declined") {
+                onDeleted();
+            }
+            else {
+                onSaved();
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not send your response.");
+            setResponding(false);
+        }
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: occurrence ? "Edit event" : "New event", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [error && _jsx(Alert, { children: error }), !occurrence && calendars && calendars.length > 1 && (_jsx(FormField, { label: "Calendar", htmlFor: "event-calendar", children: _jsx("select", { id: "event-calendar", className: INPUT_CLASS, value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: calendars.map((cal) => (_jsx("option", { value: cal.uid, children: cal.name }, cal.uid))) }) })), _jsx(FormField, { label: "Title", htmlFor: "event-title", children: _jsx("input", { id: "event-title", type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }) }), _jsx(FormField, { label: "Location", htmlFor: "event-location", children: _jsx("input", { id: "event-location", type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-3", children: [_jsx("input", { type: "checkbox", checked: allDay, onChange: (e) => setAllDay(e.target.checked) }), "All day"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Start", htmlFor: "event-start", children: _jsx("input", { id: "event-start", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? start.slice(0, 10) : start, onChange: (e) => setStart(allDay ? `${e.target.value}T00:00` : e.target.value) }) }), _jsx(FormField, { label: "End", htmlFor: "event-end", children: _jsx("input", { id: "event-end", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? end.slice(0, 10) : end, onChange: (e) => setEnd(allDay ? `${e.target.value}T00:00` : e.target.value) }) })] }), _jsx(FormField, { label: "Attendees", htmlFor: "event-attendees", children: _jsxs("div", { id: "event-attendees", className: "flex flex-col gap-2", children: [attendees.map((attendee, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: attendee.address, onChange: (e) => updateAttendee(i, { address: e.target.value }), "aria-label": `Attendee email ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => 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("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt self-center", children: RESPONSE_STATUS_LABEL[attendee.responseStatus] }), _jsx("button", { type: "button", onClick: () => removeAttendee(i), className: "text-sm text-danger px-2", "aria-label": `Remove attendee ${i + 1}`, children: "\u00D7" })] }, i))), _jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("button", { type: "button", onClick: () => setAttendees((prev) => [...prev, { address: "", role: "required", responseStatus: "needsAction", isOrganizer: false }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add attendee" }), _jsx("button", { ref: addResourceButtonRef, type: "button", onClick: () => setResourcePickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" })] }), resourcePickerOpen && (_jsx(ResourcePicker, { anchorRef: addResourceButtonRef, onClose: () => setResourcePickerOpen(false), onSelect: addResource, excludeAddresses: attendees.map((a) => a.address.toLowerCase()) }))] }) }), canRespond && (_jsxs("div", { className: "flex flex-col gap-2 mb-3 p-3 rounded-sm bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("accepted"), children: "Accept" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("tentative"), children: "Tentative" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: responding, onClick: () => handleRespond("declined"), children: "Decline" })] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Busy status", htmlFor: "event-busyStatus", children: _jsx("select", { id: "event-busyStatus", className: INPUT_CLASS, value: busyStatus, onChange: (e) => setBusyStatus(e.target.value), children: BUSY_STATUSES.map((status) => (_jsx("option", { value: status, children: BUSY_STATUS_LABEL[status] }, status))) }) }), _jsx(FormField, { label: "Reminder (minutes before)", htmlFor: "event-reminder", children: _jsx("input", { id: "event-reminder", type: "number", min: 0, className: INPUT_CLASS, value: reminderMinutes, onChange: (e) => setReminderMinutes(e.target.value), placeholder: "None" }) })] }), _jsxs("div", { className: "mb-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: autoReplyEnabled, onChange: (e) => setAutoReplyEnabled(e.target.checked) }), "Send an automatic reply while this event is happening"] }), _jsx("p", { className: "text-xs text-text-muted mt-1", children: "Applies in addition to your mailbox\u2019s own Automatic Replies setting (see Settings) \u2014 this event\u2019s message takes over for its own start/end window." }), autoReplyEnabled && (_jsx("textarea", { "aria-label": "Automatic reply message", className: `${INPUT_CLASS} mt-2`, rows: 3, value: autoReplyMessage, onChange: (e) => setAutoReplyMessage(e.target.value), placeholder: "I'm out of office and back on..." }))] }), _jsx(FormField, { label: "Recurrence", htmlFor: "event-recurrence", children: _jsx(RecurrenceEditor, { value: recurrenceRule, onChange: setRecurrenceRule }) }), occurrence?.isRecurringOccurrence && (_jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm mb-3", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Apply changes to" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "occurrence", onChange: () => setEditScope("occurrence") }), "This event only"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "series", onChange: () => setEditScope("series") }), "The entire series"] })] })), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), occurrence &&
+                            (!occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2 ml-auto", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete series" })] })))] })] }) }));
+}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
+import { dayDropId, eventDragId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+const MAX_CHIPS_PER_DAY = 3;
+/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day/all-day
+ * events are shown only on their start day — a deliberate v1 simplification, not a bug. */
+export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent }) {
+    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
+    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+    return (_jsx("div", { className: "flex-1 grid grid-cols-7 grid-rows-6 min-h-0", role: "grid", "aria-label": "Month", children: days.map((day) => (_jsx(DayCell, { day: day, inCurrentMonth: isSameMonth(day, viewDate), occurrences: occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectDay: onSelectDay, onSelectEvent: onSelectEvent }, day.toISOString()))) }));
+}
+function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent }) {
+    const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
+    const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
+    const overflowCount = occurrences.length - visible.length;
+    return (_jsxs("div", { ref: setNodeRef, className: [
+            "border-b border-r border-border p-1 flex flex-col gap-0.5 min-h-0 overflow-hidden",
+            isOver ? "bg-primary/5" : "",
+            inCurrentMonth ? "bg-surface" : "bg-surface-alt",
+        ].join(" "), children: [_jsx("button", { type: "button", onClick: () => onSelectDay(day), className: [
+                    "self-start text-xs font-semibold w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                    isToday(day) ? "bg-primary text-white" : inCurrentMonth ? "text-text" : "text-text-muted",
+                ].join(" "), children: format(day, "d") }), _jsxs("div", { className: "flex-1 flex flex-col gap-0.5 min-h-0 overflow-hidden", children: [visible.map((occurrence) => (_jsx(EventChip, { occurrence: occurrence, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent }, occurrence.occurrenceKey))), overflowCount > 0 && (_jsxs("button", { type: "button", onClick: () => onSelectDay(day), className: "text-xs text-text-muted text-left hover:underline shrink-0", children: ["+", overflowCount, " more"] }))] })] }));
+}
+function EventChip({ occurrence, color, onSelect, }) {
+    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
+    const isFree = occurrence.busyStatus === "free";
+    return (_jsxs("button", { ref: setNodeRef, type: "button", onClick: () => onSelect(occurrence), style: {
+            ...(transform ? { transform: `translate(${transform.x}px, ${transform.y}px)`, zIndex: 10 } : undefined),
+            ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
+        }, className: [
+            "text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0",
+            isFree ? "bg-surface-alt text-text-muted" : "",
+            isDragging ? "opacity-50" : "",
+        ].join(" "), ...listeners, ...attributes, children: [occurrence.allDay ? "" : `${format(new Date(occurrence.startDate), "h:mma")} `, occurrence.title] }));
+}

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+const INPUT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+const FREQ_LABEL = {
+    daily: { unit: "day", unitPlural: "days" },
+    weekly: { unit: "week", unitPlural: "weeks" },
+    monthly: { unit: "month", unitPlural: "months" },
+    yearly: { unit: "year", unitPlural: "years" },
+};
+function endConditionOf(rule) {
+    if (rule.count)
+        return "count";
+    if (rule.until)
+        return "until";
+    return "never";
+}
+/**
+ * A recurring-event editor: frequency + interval, a weekday picker (weekly only), and an end
+ * condition (never / after N occurrences / on a date) — everything `RecurrenceRule` can express. The
+ * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
+ * `.toText()`), so it never drifts out of sync with what will actually be submitted.
+ */
+export default function RecurrenceEditor({ value, onChange }) {
+    function handleEnable(enabled) {
+        onChange(enabled ? { freq: "weekly", interval: 1, byDay: ["MO"], exceptions: [] } : null);
+    }
+    // `update`/`toggleDay` are only ever invoked from handlers rendered inside the `{value && (...)}`
+    // block below, so `value` is always non-null here — no defensive null check needed.
+    function update(patch) {
+        onChange({ ...value, ...patch });
+    }
+    function toggleDay(day) {
+        const current = value.byDay ?? [];
+        const next = current.includes(day) ? current.filter((d) => d !== day) : [...current, day];
+        update({ byDay: next });
+    }
+    function handleEndCondition(condition) {
+        if (condition === "never") {
+            update({ count: undefined, until: undefined });
+        }
+        else if (condition === "count") {
+            update({ count: 10, until: undefined });
+        }
+        else {
+            update({ until: new Date().toISOString(), count: undefined });
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: value !== null, onChange: (e) => handleEnable(e.target.checked) }), "Repeats"] }), value && (_jsxs("div", { className: "flex flex-col gap-3 pl-6 border-l-2 border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: "Every" }), _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.interval, onChange: (e) => update({ interval: Number(e.target.value) }), "aria-label": "Recurrence interval" }), _jsxs("select", { className: SELECT_CLASS, value: value.freq, onChange: (e) => update({ freq: e.target.value }), "aria-label": "Recurrence frequency", children: [_jsx("option", { value: "daily", children: value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural }), _jsx("option", { value: "weekly", children: value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural }), _jsx("option", { value: "monthly", children: value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural }), _jsx("option", { value: "yearly", children: value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural })] })] }), value.freq === "weekly" && (_jsx("div", { className: "flex gap-1", children: WEEKDAY_CODES.map((day) => (_jsx("button", { type: "button", onClick: () => toggleDay(day), "aria-pressed": (value.byDay ?? []).includes(day), "aria-label": WEEKDAY_LABELS[day], className: [
+                                "w-9 h-9 rounded-full text-xs font-semibold border",
+                                (value.byDay ?? []).includes(day)
+                                    ? "bg-primary text-white border-primary"
+                                    : "bg-surface text-text-muted border-border hover:border-primary",
+                            ].join(" "), children: _jsx("span", { "aria-hidden": "true", children: WEEKDAY_LABELS[day][0] }) }, day))) })), _jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Ends" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", checked: endConditionOf(value) === "never", onChange: () => handleEndCondition("never") }), "Never"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "After", checked: endConditionOf(value) === "count", onChange: () => handleEndCondition("count") }), "After", _jsx("input", { type: "number", min: 1, className: `${INPUT_CLASS} w-16`, value: value.count ?? 10, disabled: endConditionOf(value) !== "count", onChange: (e) => update({ count: Number(e.target.value) }), "aria-label": "Number of occurrences" }), "occurrences"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "recurrence-end", "aria-label": "On", checked: endConditionOf(value) === "until", onChange: () => handleEndCondition("until") }), "On", _jsx("input", { type: "date", className: INPUT_CLASS, value: value.until ? value.until.slice(0, 10) : "", disabled: endConditionOf(value) !== "until", onChange: (e) => update({ until: new Date(e.target.value).toISOString() }), "aria-label": "End date" })] })] }), ((value.freq !== "weekly" || (value.byDay ?? []).length > 0)) && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Repeats ", describeRecurrence(value), "."] }))] }))] }));
+}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listResourceMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+/**
+ * A searchable dropdown of bookable resource mailboxes (rooms/equipment), for adding one as a `"resource"`
+ * attendee in `EventModal` without typing its raw address. Fetches the caller's full visible resource-mailbox
+ * list once on open and filters it client-side by name/address as the reader types — the same
+ * "fetch-flat-list, filter-client-side" contract every other list endpoint in this codebase already uses
+ * (see `calendarApi.ts`'s `listCalendarEvents` doc comment), since there is no dedicated server-side search
+ * endpoint for mailboxes and the resource-mailbox count in any one org is expected to be small.
+ */
+export default function ResourcePicker({ anchorRef, onClose, onSelect, excludeAddresses }) {
+    const [resources, setResources] = useState(null);
+    const [error, setError] = useState(null);
+    const [query, setQuery] = useState("");
+    useEffect(() => {
+        listResourceMailboxes({ limit: 100 })
+            .then(setResources)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load resources."));
+    }, []);
+    const excluded = new Set(excludeAddresses);
+    const filtered = (resources ?? []).filter((mailbox) => {
+        if (excluded.has(mailbox.primarySmtpAddress.toLowerCase())) {
+            return false;
+        }
+        const haystack = `${mailbox.displayName} ${mailbox.primarySmtpAddress}`.toLowerCase();
+        return haystack.includes(query.trim().toLowerCase());
+    });
+    return (_jsxs(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: 280, height: 320, "aria-label": "Add a room or equipment resource", children: [_jsx("input", { type: "text", autoFocus: true, placeholder: "Search rooms & equipment\u2026", className: "text-sm py-2 px-3 border-b border-border bg-surface text-text focus:outline-none", value: query, onChange: (e) => setQuery(e.target.value) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [error && _jsx("p", { className: "text-xs text-danger p-3", children: error }), !error && resources === null && _jsx("p", { className: "text-xs text-text-muted p-3", children: "Loading\u2026" }), !error && resources !== null && filtered.length === 0 && (_jsx("p", { className: "text-xs text-text-muted p-3", children: "No matching resources." })), filtered.map((mailbox) => (_jsxs("button", { type: "button", onClick: () => onSelect(mailbox), className: "w-full text-left px-3 py-2 text-sm hover:bg-surface-alt flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate", children: mailbox.displayName }), _jsxs("span", { className: "text-xs text-text-muted shrink-0 capitalize", children: [mailbox.resourceType ?? "room", mailbox.resourceCapacity ? ` · ${mailbox.resourceCapacity}` : ""] })] }, mailbox.uid)))] })] }));
+}