@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addMinutes, format, isSameDay, startOfDay } from "date-fns";
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+/**
+ * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
+ * events across calendars can be compared side by side. A deliberately separate component from
+ * `TimeGridView` rather than a generalization of it — it shares that component's visual language
+ * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
+ * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
+ * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
+ * click-only (select an event, or click a slot to create one already targeted at that column's
+ * calendar) — a practical scope cut, not an oversight.
+ */
+export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }) {
+    const dayOccurrences = occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day));
+    const dayStart = startOfDay(day);
+    return (_jsxs("div", { role: "region", "aria-label": "Split view", className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), columns.map((col) => (_jsxs("div", { className: "flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border", children: [_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: col.color } }), _jsx("span", { className: "text-xs font-semibold truncate", children: col.name })] }, col.folderUid)))] }), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), columns.map((col) => (_jsx(SplitColumn, { column: col, dayStart: dayStart, occurrences: dayOccurrences.filter((occ) => occ.folderUid === col.folderUid), onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, col.folderUid)))] })] }));
+}
+function SplitColumn({ column, dayStart, occurrences, onSelectEvent, onSelectSlot, }) {
+    return (_jsxs("div", { className: "flex-1 min-w-0 relative border-l border-border", children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return (_jsx("button", { type: "button", onClick: () => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid), style: { height: HOUR_HEIGHT_PX / 2 }, className: "block w-full border-b border-border/50 text-left", "aria-label": `New event at ${format(slotStart, "h:mm a")} in ${column.name}` }, i));
+            }), occurrences.map((occurrence) => {
+                const start = new Date(occurrence.startDate);
+                const end = new Date(occurrence.endDate);
+                const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+                const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
+                const isFree = occurrence.busyStatus === "free";
+                return (_jsxs("div", { onClick: () => onSelectEvent(occurrence), style: {
+                        position: "absolute",
+                        top,
+                        height,
+                        left: 2,
+                        right: 2,
+                        ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
+                    }, className: [
+                        "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                        isFree ? "bg-surface-alt text-text-muted" : "",
+                    ].join(" "), children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") })] }, occurrence.occurrenceKey));
+            })] }));
+}

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
+import { eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+/** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
+ * differ only in how many day columns are shown), with a day-header row and all-day events in a
+ * header strip above it. */
+export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
+    const allDayEvents = occurrences.filter((occ) => occ.allDay);
+    const timedEvents = occurrences.filter((occ) => !occ.allDay);
+    return (_jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
+                            .filter((occ) => isSameDay(new Date(occ.startDate), day))
+                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
+}
+function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
+    const dayStart = startOfDay(day);
+    return (_jsxs("div", { className: ["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" "), children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return _jsx(TimeSlot, { start: slotStart, onSelectSlot: onSelectSlot }, i);
+            }), occurrences.map((occurrence) => (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
+}
+function TimeSlot({ start, onSelectSlot }) {
+    const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
+    return (_jsx("button", { ref: setNodeRef, type: "button", onClick: () => onSelectSlot(start, addMinutes(start, SLOT_MINUTES)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
+}
+function EventBlock({ occurrence, color, dayStart, onSelect, }) {
+    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
+    const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
+        id: resizeDragId(occurrence),
+    });
+    const isFree = occurrence.busyStatus === "free";
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+    // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
+    // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
+    // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
+    // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
+    const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
+    return (_jsxs("div", { ref: setNodeRef, onClick: () => onSelect(occurrence), style: {
+            position: "absolute",
+            top,
+            height,
+            left: 2,
+            right: 2,
+            transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
+            zIndex: isDragging ? 10 : undefined,
+            ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
+        }, className: [
+            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+            isFree ? "bg-surface-alt text-text-muted" : "",
+            isDragging ? "opacity-50" : "",
+        ].join(" "), ...listeners, ...attributes, children: [_jsx("div", { className: "font-medium truncate", children: occurrence.title }), _jsx("div", { className: "truncate", children: format(start, "h:mma") }), _jsx("div", { ref: setResizeRef, className: "absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize", "aria-label": `Resize "${occurrence.title}"`, ...resizeListeners, ...resizeAttributes })] }));
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -0,0 +1,96 @@
+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 { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+const CalendarShellContext = createContext({ calendarFolders: [], mailboxes: [], reloadFolders: () => undefined });
+/** Reads the mailbox/folder the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
+export function useCalendarShell() {
+    return useContext(CalendarShellContext);
+}
+/**
+ * The Calendar app's shell — structurally identical to `ContactsShell`/`TasksShell` (a mailbox has
+ * exactly one well-known `calendar` folder, guaranteed to exist by `BaseMailboxRoute.create()`'s
+ * eager provisioning in `@rapidmx/restapi`), just bound to a different folder type. Unlike Contacts/
+ * Tasks, the actual view being looked at (month/week/day, and which one) is *not* shell state — it
+ * lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between views/dates must
+ * be instant (no full page reload) and this framework has no client-side router to make a URL-driven
+ * approach for that free.
+ */
+export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const [mailboxes, setMailboxes] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [folderError, setFolderError] = useState(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            setMailboxes(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+    const [folderRefreshToken, setFolderRefreshToken] = useState(0);
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            return;
+        }
+        setFolderError(null);
+        listFolders(mailboxUid)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's calendar folder."));
+    }, [mailboxUid, folderRefreshToken]);
+    const calendarFolders = useMemo(() => folders.filter((f) => f.type === "calendar"), [folders]);
+    const folderUid = calendarFolders[0]?.uid;
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders: () => setFolderRefreshToken((t) => t + 1) }), [mailboxUid, folderUid, calendarFolders, mailboxes]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
+    // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return _jsx(MailboxProvisioning, {});
+    }
+    let inner = null;
+    if (userUid && status === "checking") {
+        // Renders immediately (no network round trip needed) so switching into Calendar never shows a
+        // blank pane while `listMailboxes()` is in flight — the actual sidebar (mini date-picker +
+        // calendar list) lives in `apps/www/calendar/index.tsx`'s own content, so this mimics its rough
+        // shape rather than the (minimal, mailbox-switcher-only) shape of this shell's own sidebar.
+        inner = (_jsxs("div", { className: "w-56 shrink-0 bg-surface border-r border-border p-3 flex flex-col gap-4", children: [_jsx(Skeleton, { height: "h-40", className: "rounded-md" }), _jsx(SkeletonList, { count: 4 })] }));
+    }
+    else if (userUid && status === "error") {
+        inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — see MailShell/ContactsShell's identical comment: it's
+        // rendered twice (desktop `<aside>` + mobile `Drawer`), possibly simultaneously mounted, so the
+        // `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct value per instance.
+        const mailboxSwitcher = (idPrefix) => mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-calendar-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-calendar-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
+                        window.location.href = `/calendar?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                    }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] }));
+        inner = (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsx("div", { className: "hidden md:block w-56 shrink-0 bg-surface border-r border-border p-3", children: mailboxSwitcher("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsxs("div", { className: "flex flex-col gap-3", children: [mailboxSwitcher("mobile"), folderError && _jsx(Alert, { children: folderError })] }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), folderError && (_jsx("div", { className: "hidden md:block p-3", children: _jsx(Alert, { children: folderError }) })), _jsx(CalendarShellContext.Provider, { value: contextValue, children: children })] })] }));
+    }
+    return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+}

package/dist/apps/shared/components/contacts/ContactDetailPane.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
+/**
+ * A contact's read-only detail view. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`,
+ * always visible alongside the contact list) and the mobile detail route
+ * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
+ */
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref }) {
+    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] }))] })] }));
+}

package/dist/apps/shared/components/contacts/ContactForm.js

@@ -0,0 +1,85 @@
+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 { createContact, updateContact, } from "@rapidmx/react-shared/contacts/contactsApi.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";
+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 ADDRESS_KINDS = ["home", "work", "other"];
+/**
+ * A contact's create/edit form. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`) and the
+ * mobile detail route's own edit mode (`apps/www/contacts/[uid].tsx`) — creation itself stays
+ * desktop-and-mobile-inline (see that route's own doc comment on why "new" never gets a dedicated route).
+ */
+export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, onCancel }) {
+    const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
+    const [givenName, setGivenName] = useState(contact?.givenName ?? "");
+    const [surname, setSurname] = useState(contact?.surname ?? "");
+    const [company, setCompany] = useState(contact?.company ?? "");
+    const [jobTitle, setJobTitle] = useState(contact?.jobTitle ?? "");
+    const [notes, setNotes] = useState(contact?.notes ?? "");
+    const [favorite, setFavorite] = useState(contact?.favorite ?? false);
+    const [categoriesText, setCategoriesText] = useState((contact?.categories ?? []).join(", "));
+    const [emails, setEmails] = useState(contact?.emails ?? []);
+    const [phones, setPhones] = useState(contact?.phones ?? []);
+    const [address, setAddress] = useState(contact?.addresses[0] ?? null);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    function updateEmail(index, patch) {
+        setEmails((prev) => prev.map((e, i) => (i === index ? { ...e, ...patch } : e)));
+    }
+    function removeEmail(index) {
+        setEmails((prev) => prev.filter((_, i) => i !== index));
+    }
+    function updatePhone(index, patch) {
+        setPhones((prev) => prev.map((p, i) => (i === index ? { ...p, ...patch } : p)));
+    }
+    function removePhone(index) {
+        setPhones((prev) => prev.filter((_, i) => i !== index));
+    }
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!displayName.trim()) {
+            setError("A display name is required.");
+            return;
+        }
+        setSaving(true);
+        try {
+            const categories = categoriesText
+                .split(",")
+                .map((c) => c.trim())
+                .filter(Boolean);
+            const input = {
+                displayName: displayName.trim(),
+                givenName: givenName.trim() || undefined,
+                surname: surname.trim() || undefined,
+                company: company.trim() || undefined,
+                jobTitle: jobTitle.trim() || undefined,
+                notes: notes.trim() || undefined,
+                favorite,
+                categories,
+                emails,
+                phones,
+                addresses: address ? [address] : [],
+            };
+            const saved = contact
+                ? await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input })
+                : await createContact({ mailboxUid: mailboxUid, folderUid: folderUid, ...input });
+            onSaved(saved);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this contact.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: address ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => setAddress({ ...address, street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => setAddress({ ...address, city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => setAddress({ ...address, state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => setAddress({ ...address, postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => setAddress({ ...address, country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => setAddress({ ...address, type: e.target.value }), "aria-label": "Address type", children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => setAddress(null), className: "self-start text-xs font-medium text-danger hover:underline", children: "Remove address" })] })) : (_jsx("button", { type: "button", onClick: () => setAddress({ type: "home" }), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _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: onCancel, children: "Cancel" })] })] }));
+}

package/dist/apps/shared/components/contacts/ContactsSidebar.js

@@ -0,0 +1,105 @@
+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, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createContactList, listContactLists } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+export function contactsViewKey(view) {
+    switch (view.type) {
+        case "list":
+            return `list:${view.uid}`;
+        case "category":
+            return `category:${view.name}`;
+        default:
+            return view.type;
+    }
+}
+/** A fixed palette of colors for category swatches, cycled by name — Outlook's own categories are
+ * user-assigned colors, but nothing server-side models a color for a category (it's a plain string label
+ * on `Contact.categories`), so this is a deterministic client-side stand-in, same idea as `ContactAvatar`'s
+ * per-name color. */
+const CATEGORY_PALETTE = ["#dc2626", "#d97706", "#059669", "#2563eb", "#7c3aed", "#db2777"];
+function categoryColor(name) {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    }
+    return CATEGORY_PALETTE[Math.abs(hash) % CATEGORY_PALETTE.length];
+}
+function NavItem({ label, count, active, onClick, swatch, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? "true" : undefined, className: [
+            "w-full flex items-center justify-between gap-2 text-sm text-left px-2.5 py-1.5 rounded-sm",
+            active ? "bg-primary/10 text-primary-dark font-semibold" : "text-text hover:bg-surface-alt",
+        ].join(" "), children: [_jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [swatch && _jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: swatch } }), _jsx("span", { className: "truncate", children: label })] }), count !== undefined && _jsx("span", { className: "text-xs text-text-muted shrink-0", children: count })] }));
+}
+/**
+ * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Your contact
+ * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
+ * distinct `categories` values across the loaded contacts — no separate category registry exists
+ * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
+ * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
+ */
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken }) {
+    const [lists, setLists] = useState([]);
+    const [listsError, setListsError] = useState(null);
+    const [addingList, setAddingList] = useState(false);
+    const [newListName, setNewListName] = useState("");
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        if (!mailboxUid) {
+            setLists([]);
+            return;
+        }
+        setListsError(null);
+        listContactLists(mailboxUid, { limit: 200 })
+            .then(setLists)
+            .catch((err) => setListsError(err instanceof ApiRequestError ? err.message : "Could not load contact lists."));
+    }, [mailboxUid, refreshToken]);
+    const favoriteCount = useMemo(() => contacts.filter((c) => c.favorite).length, [contacts]);
+    const listCounts = useMemo(() => {
+        const counts = new Map();
+        for (const c of contacts) {
+            if (c.contactListUid) {
+                counts.set(c.contactListUid, (counts.get(c.contactListUid) ?? 0) + 1);
+            }
+        }
+        return counts;
+    }, [contacts]);
+    const categories = useMemo(() => {
+        const names = new Set();
+        for (const c of contacts) {
+            for (const category of c.categories ?? []) {
+                names.add(category);
+            }
+        }
+        return Array.from(names).sort((a, b) => a.localeCompare(b));
+    }, [contacts]);
+    async function handleAddList(e) {
+        e.preventDefault();
+        if (!mailboxUid || !newListName.trim()) {
+            return;
+        }
+        try {
+            const created = await createContactList({ mailboxUid, name: newListName.trim() });
+            setLists((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
+            setNewListName("");
+            setAddingList(false);
+        }
+        catch (err) {
+            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+        }
+    }
+    function handleSelect(view) {
+        onSelect(view);
+        setDrawerOpen(false);
+    }
+    // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
+    // `Drawer` (see MailShell/ContactsShell for the identical pattern and the duplicate-id reasoning
+    // behind the `idPrefix`).
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open contacts menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Contacts", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+}

package/dist/apps/shared/components/contacts/ContactsToolbar.js

@@ -0,0 +1,32 @@
+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 } from "react";
+import { HiOutlineArrowDownTray, HiOutlineArrowUpTray, HiOutlineEnvelope, HiOutlinePencil, HiOutlineStar, HiOutlineTag, HiOutlineTrash, HiOutlineUserPlus, HiStar, } from "react-icons/hi2";
+function ToolbarButton({ label, icon: Icon, disabled, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: "flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt", children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
+}
+function Divider() {
+    return _jsx("div", { className: "w-px self-stretch my-1 bg-border", "aria-hidden": "true" });
+}
+/**
+ * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, }) {
+    const importInputRef = useRef(null);
+    const hasSelection = selectedCount > 0;
+    function handleImportFileChosen(e) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+            onImportFile(file);
+        }
+    }
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Contacts actions", className: "border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1", children: [_jsx(ToolbarButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Edit", icon: HiOutlinePencil, disabled: selectedCount !== 1, onClick: onEdit }), _jsx(ToolbarButton, { label: "Delete", icon: HiOutlineTrash, disabled: !hasSelection, onClick: onDelete }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Email", icon: HiOutlineEnvelope, disabled: !hasSelection, onClick: onEmail }), _jsx(ToolbarButton, { label: allSelectedFavorited ? "Unfavorite" : "Favorite", icon: allSelectedFavorited ? HiStar : HiOutlineStar, disabled: !hasSelection, onClick: onToggleFavorite }), _jsx(ToolbarButton, { label: "Add category", icon: HiOutlineTag, disabled: !hasSelection, onClick: onAddCategory }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Export", icon: HiOutlineArrowUpTray, disabled: !hasSelection, onClick: onExportVCard }), _jsx(ToolbarButton, { label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click() }), _jsx("input", { ref: importInputRef, type: "file", accept: ".vcf", className: "sr-only", "aria-label": "Import contacts file", onChange: handleImportFileChosen })] }));
+}

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -0,0 +1,93 @@
+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 { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+const ContactsShellContext = createContext({ mailboxes: [] });
+/** Reads the mailbox/folder Contacts is currently showing, as resolved by the enclosing `ContactsShell`. */
+export function useContactsShell() {
+    return useContext(ContactsShellContext);
+}
+/**
+ * The Contacts app's shell: unlike `MailShell` (a folder tree, since a mailbox has many mail folders),
+ * a mailbox has exactly one well-known `contacts` folder — see `BaseMailboxRoute.create()`'s eager
+ * provisioning in `@rapidmx/restapi`, which guarantees it exists for every mailbox. This shell's own
+ * sidebar is therefore just a mailbox switcher (when the caller has more than one); the actual contact
+ * list/detail UI is `apps/www/contacts/index.tsx`'s own content, rendered as `children` here.
+ */
+export default function ContactsShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const [mailboxes, setMailboxes] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [folderError, setFolderError] = useState(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            setMailboxes(result);
+            setStatus("ready");
+        })
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            return;
+        }
+        setFolderError(null);
+        listFolders(mailboxUid)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's contacts folder."));
+    }, [mailboxUid]);
+    const folderUid = folders.find((f) => f.type === "contacts")?.uid;
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, mailboxes }), [mailboxUid, folderUid, mailboxes]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
+    // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return _jsx(MailboxProvisioning, {});
+    }
+    let inner = null;
+    if (userUid && status === "checking") {
+        // Renders immediately (no network round trip needed) so switching into Contacts never shows a
+        // blank pane while `listMailboxes()` is in flight — the real sidebar (favorites/lists/categories)
+        // lives in `apps/www/contacts/index.tsx`'s own content, so this mimics its rough shape rather
+        // than the (minimal, mailbox-switcher-only) shape of this shell's own sidebar.
+        inner = (_jsxs("div", { className: "w-56 shrink-0 border-r border-border flex flex-col gap-4 p-3", children: [_jsx(Skeleton, { height: "h-9" }), _jsx(SkeletonList, { count: 5 })] }));
+    }
+    else if (userUid && status === "error") {
+        inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — see MailShell's identical comment: it's rendered twice
+        // (desktop `<aside>` + mobile `Drawer`), possibly simultaneously mounted, so the `<select>`'s
+        // `id`/its `<label>`'s `htmlFor` need a distinct value per instance to avoid a duplicate-id
+        // label-association break.
+        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-contacts-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-contacts-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
+                                window.location.href = `/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
+    }
+    return (_jsx(AppShell, { active: "contacts", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+}