@rapidmx/web-client 0.16.0 → 0.17.2

package/dist/apps/shared/navigation/pageTitle.js

@@ -0,0 +1,12 @@
+/** The name the deployment goes by in the browser tab: its branding title, else its company name, else RapidMX. */
+export function brandName(branding) {
+    return branding?.title || branding?.companyName || "RapidMX";
+}
+/**
+ * The `title` export of a webmail page: `export const title = pageTitle("Calendar")`. `@rapidrest/react` renders it into the
+ * document's `<title>` on the server - so the tab is right from the first byte, and a crawler sees it - and sends it with every
+ * client navigation, so the tab follows the page. `label` is the app's name (`Acme: Calendar`), the same for all of an app's pages.
+ */
+export function pageTitle(label) {
+    return ({ branding }) => `${brandName(branding)}: ${label}`;
+}

package/dist/apps/www/_shell.d.ts

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren } from "react";
+import { type AppShellActive, type AppShellProps } from "../shared/components/layout/AppShell.js";
+/**
+ * The webmail's persistent app frame: `@rapidrest/react`'s app shell (`_shell.tsx`), rendered around every page of `apps/www` -
+ * on the server, in the same tree the browser hydrates - and kept mounted while the router swaps the pages inside it, so that
+ * moving between Mail, Calendar, Contacts, Tasks and Settings replaces only the page. It is what holds the state that must outlive
+ * a page: the compose windows in progress, the unlock prompt, the idle-key timer, the sign-out listener, the mail connection (one
+ * push socket for every app), the user menu and the notification pop-ups (all `AppChrome`'s).
+ *
+ * The props are the current page's - `WwwRoute.fetchProps()`'s, the same for every page: the user, the auth-server URL, the
+ * branding, the plugin navigation, the impersonation state and the appearance - and are fetched again on every navigation, so a
+ * change of any of them (a plugin installed, the branding edited) shows on the next page. A page still renders its own shell
+ * (`MailShell`, `CalendarShell`, ...) with `AppShell` inside it as it always did; inside this frame that renders only its children.
+ *
+ * What a page load did by itself and the router now does after each navigation - focus moves to the content, the window scrolls to
+ * the top, a screen reader is told the page's title - is configured here (`useNavigationEffects()`); the tab's title is each
+ * page's `title` export (`pageTitle()`). `busy` is the router's pending state: the content is `aria-busy` while the next page
+ * loads and the old one is still on screen.
+ */
+export type WwwShellProps = PropsWithChildren<Omit<AppShellProps, "active">>;
+/**
+ * The app-rail entry (or `"settings"`, which has none) that a route highlights: the first segment of its template names the
+ * app. Anything else - Mail's `/` and `/messages/:uid` - is Mail.
+ */
+export declare function activeAppOf(route: string): AppShellActive;
+export default function WwwShell({ children, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, branding, appearance, }: WwwShellProps): React.JSX.Element;

package/dist/apps/www/_shell.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useMemo, useState } from "react";
+import { useNavigationEffects, useRouter } from "@rapidrest/react/client";
+import { AppChrome } from "../shared/components/layout/AppShell.js";
+import { AppFrameContext } from "../shared/navigation/frameContext.js";
+import { titleWithUnread } from "../shared/mail/useUnreadTitle.js";
+/**
+ * The app-rail entry (or `"settings"`, which has none) that a route highlights: the first segment of its template names the
+ * app. Anything else - Mail's `/` and `/messages/:uid` - is Mail.
+ */
+export function activeAppOf(route) {
+    const app = route.split("/")[1];
+    return app === "calendar" || app === "contacts" || app === "tasks" || app === "settings" ? app : "mail";
+}
+export default function WwwShell({ children, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, branding, appearance, }) {
+    const { route, pending } = useRouter();
+    const [takeovers, setTakeovers] = useState(0);
+    const enterTakeover = useCallback(() => {
+        setTakeovers((n) => n + 1);
+        return () => setTakeovers((n) => n - 1);
+    }, []);
+    const frame = useMemo(() => ({ enterTakeover }), [enterTakeover]);
+    // The content region is what a page load would have started at: focus it (it is only focusable by script), start at the top, and say the
+    // page's title - without the unread count that the tab's title carries in front of it.
+    useNavigationEffects({ focus: "#app-content", scroll: "top", announce: ({ title }) => titleWithUnread(title, 0) });
+    return (_jsx(AppFrameContext.Provider, { value: frame, children: _jsx(AppChrome, { active: activeAppOf(route), busy: pending, hideChrome: takeovers > 0, userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, branding: branding, appearance: appearance, children: children }) }));
+}

package/dist/apps/www/calendar/index.d.ts

@@ -1,3 +1,8 @@
+import React from "react";
 import { CalendarShellProps } from "../../shared/components/calendar/layout/CalendarShell.js";
-declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<CalendarShellProps>;
-export default _default;
+declare function CalendarPage(props: CalendarShellProps): React.JSX.Element;
+export default CalendarPage;
+/** The tab's title: `Brand: Calendar` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/calendar/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3, HiOutlinePlus } from "react-icons/hi2";
@@ -346,4 +346,6 @@ function CalendarContent({ userUid, bookingHref }) {
     const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => setViewDate(startOfDay(date)) }), _jsx(CalendarListSidebar, { mailboxCalendars: mailboxCalendars, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar, colorFor: colorFor })] }));
     return (_jsxs("div", { className: "flex-1 min-w-0 flex min-h-0", children: [_jsx("div", { className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), !isMobile && (_jsx(Button, { type: "button", onClick: (e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below")), className: "!w-auto shrink-0", ...newEventHint, children: "+ New event" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", ...previousHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, ...todayHint, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", ...nextHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex flex-wrap gap-1", children: VIEW_TYPES.map((v) => (_jsx(ViewButton, { view: v, current: view, onSelect: setView }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), _jsx("div", { ref: swipe.ref, className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden", ...swipe.handlers, style: swipe.style, children: _jsx("div", { "data-swipe-phase": swipe.phase, className: "flex-1 min-w-0 flex flex-col min-h-0", style: swipe.contentStyle, children: _jsx("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", style: wheelSlide.style, children: loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragStart: () => setDragging(true), onDragEnd: handleDragEnd, onDragCancel: () => setDragging(false), children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor, true) })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor) })) })) }) }) }), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, initialAllDay: modal.initialAllDay, anchor: modal.anchor, bookingHref: bookingHref, onSaved: handleSaved, onDeleted: handleDeleted })), isMobile && mailboxUid && folderUid && !modal && _jsx(FloatingActionButton, { label: "New event", icon: HiOutlinePlus, onClick: () => openNewEvent() })] })] }));
 }
-export default routedPage("/calendar", CalendarPage);
+export default CalendarPage;
+/** The tab's title: `Brand: Calendar` (see `pageTitle()`). */
+export const title = pageTitle("Calendar");

package/dist/apps/www/contacts/[uid].d.ts

@@ -1,7 +1,18 @@
+import React from "react";
 import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
-declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<ContactsShellProps & {
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
+ * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
+ * equivalent "new contact" route — an unsaved contact has no uid to route on, so creation stays an
+ * in-place mode-switch on every device (see `apps/www/contacts/index.tsx`'s `handleNew`).
+ */
+declare function ContactDetailPage(props: ContactsShellProps & {
     params: {
         uid: string;
     };
-}>;
-export default _default;
+}): React.JSX.Element;
+export default ContactDetailPage;
+/** The tab's title: `Brand: Contacts` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/contacts/[uid].js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
-import { useNavigate } from "../../shared/navigation/AppRouter.js";
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
+import { useNavigate } from "../../shared/navigation/index.js";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { deleteContact, getContact } from "@rapidmx/react-shared/contacts/contactsApi.js";
@@ -72,4 +72,6 @@ function ContactDetailContent({ uid }) {
     }
     return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref, onKeysChanged: handleKeysChanged }) }));
 }
-export default routedPage("/contacts/:uid", ContactDetailPage);
+export default ContactDetailPage;
+/** The tab's title: `Brand: Contacts` (see `pageTitle()`). */
+export const title = pageTitle("Contacts");

package/dist/apps/www/contacts/index.d.ts

@@ -1,3 +1,8 @@
+import React from "react";
 import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
-declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<ContactsShellProps>;
-export default _default;
+declare function ContactsPage(props: ContactsShellProps): React.JSX.Element;
+export default ContactsPage;
+/** The tab's title: `Brand: Contacts` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/contacts/index.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
-import { useNavigate } from "../../shared/navigation/AppRouter.js";
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
+import { useNavigate } from "../../shared/navigation/index.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createContact, deleteContact, listContacts, listDeletedContacts, setContactFavorite, updateContact, } from "@rapidmx/react-shared/contacts/contactsApi.js";
@@ -344,6 +344,8 @@ function ContactsContent({ userUid }) {
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted }), _jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex", children: [_jsxs("div", { className: [
                             "w-full md:w-[clamp(16rem,32vw,26rem)] min-w-0 md:shrink-0 md:border-r border-border md:flex flex-col min-h-0",
                             mode === "new" ? "hidden md:flex" : "flex",
-                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
+                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
 }
-export default routedPage("/contacts", ContactsPage);
+export default ContactsPage;
+/** The tab's title: `Brand: Contacts` (see `pageTitle()`). */
+export const title = pageTitle("Contacts");

package/dist/apps/www/index.d.ts

@@ -1,3 +1,8 @@
+import React from "react";
 import { MailShellProps } from "../shared/components/mail/layout/MailShell.js";
-declare const _default: import("../shared/navigation/AppRouter.js").RoutedPageComponent<MailShellProps>;
-export default _default;
+declare function InboxPage(props: MailShellProps): React.JSX.Element;
+export default InboxPage;
+/** The tab's title: `Brand: Mail` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/index.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "./_routedPage.js";
-import { useNavigate } from "../shared/navigation/AppRouter.js";
-import { whenIdle } from "../shared/navigation/idle.js";
+import { pageTitle } from "../shared/navigation/pageTitle.js";
+import { useNavigate } from "../shared/navigation/index.js";
+import { whenIdle } from "@rapidrest/react/client";
 import { prefetchComposeWindow } from "../shared/components/mail/compose/ComposeContext.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -38,6 +38,10 @@ import MoveToFolderDialog from "../shared/components/mail/MoveToFolderDialog.js"
 import { EncryptedPreview } from "../shared/components/mail/reading/EncryptedPreview.js";
 import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
 import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
+import EmptyFolderBar from "../shared/components/mail/EmptyFolderBar.js";
+import { EMPTIABLE_FOLDER_TYPES } from "../shared/mail/permanentDelete.js";
+import { usePermanentDelete } from "../shared/mail/usePermanentDelete.js";
+import { useMailboxUpdateAccess } from "../shared/mail/useMailboxUpdateAccess.js";
 import { CONVERSATION_SORT_NOTE, CONVERSATION_SORT_UNAVAILABLE, MAIL_LIST_CLASSIFICATION_FILTERS, getMailListPreferences, setMailListPreferences, sortConversations, } from "../shared/components/mail/listPreferences.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
@@ -365,7 +369,7 @@ function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
 function InboxContent({ userUid }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, noteFolderUids, live, trackMessageChange, folderCountOf, mobileSearchSlot } = useMailShell();
     const isMobile = useIsMobile();
     const navigate = useNavigate();
     const { requestUnlock } = useUnlockPrompt();
@@ -408,6 +412,8 @@ function InboxContent({ userUid }) {
     // or it would act on a selection that is still arriving.
     const [resolvingSelection, setResolvingSelection] = useState(0);
     const [bulkBusy, setBulkBusy] = useState(false);
+    // Delete on what is already in Deleted Items, and Empty folder: confirmed, then done for good (see `usePermanentDelete()`).
+    const permanent = usePermanentDelete();
     // Bumped to force the list effect below to re-run - a bulk update is deliberately neither atomic nor
     // all-or-nothing (see `bulkUpdateMessages()`), so a rejection means refetching rather than guessing
     // which half of the selection actually landed.
@@ -467,6 +473,8 @@ function InboxContent({ userUid }) {
     // Always set once this page renders: a caller with no mailbox at all gets `MailboxProvisioning` from the shell instead.
     const activeMailboxUid = (mailboxUid ?? primaryMailboxUid(mailboxes, userUid));
     const mailboxKeys = mailboxes.find((mb) => mb.uid === activeMailboxUid)?.keys ?? [];
+    // False for a mailbox shared with the reader view-only: Empty folder is not offered there (the server would refuse it).
+    const mailboxWritable = useMailboxUpdateAccess(mailboxes.find((mb) => mb.uid === activeMailboxUid));
     // The Sort/Filter menus' and "Show as conversations"' current settings, remembered per mailbox across
     // reloads (`listPreferences.ts`). Read during render, not in an effect, so the very first listing
     // already uses the remembered arrangement rather than fetching the default one and immediately
@@ -1744,6 +1752,49 @@ function InboxContent({ userUid }) {
     function moveSelectionToType(type, name, chosen) {
         return runBulkAction((moving) => moveToFolderOfType(moving, type, name), true, chosen);
     }
+    /**
+     * Permanently deletes `chosen` - messages that are already in Deleted Items - once the reader has confirmed it (`usePermanentDelete()`
+     * asks, deletes, tells the badges and says what happened). The rows that went leave the list, and selection and advance behave as for
+     * Archive; a conversation list is reloaded, as after every bulk action on it, and so is a flat one when the server refused some
+     * (those stay listed, and the reload shows what is really there). Resolves whether anything was deleted.
+     */
+    async function purgeChosen(chosen) {
+        const outcome = await permanent.requestPermanentDelete(chosen);
+        if (!outcome) {
+            return false;
+        }
+        if (asConversations) {
+            setSelectedConversationIds(new Set());
+            setConversationMessagesById({});
+            setRefreshKey((n) => n + 1);
+        }
+        else {
+            removeListedMessages(new Set(outcome.deleted.map((m) => m.uid)));
+            if (outcome.failed.length > 0) {
+                setRefreshKey((n) => n + 1);
+            }
+        }
+        setSelectedUids(new Set());
+        return outcome.deleted.length > 0;
+    }
+    /** Empty folder: permanently deletes everything in the folder being listed (Deleted Items or Junk Email) after the reader has confirmed. */
+    async function emptyListedFolder(folder, count) {
+        const outcome = await permanent.requestEmptyFolder({ uid: folder.uid, name: folder.name }, count);
+        if (!outcome) {
+            return;
+        }
+        if (outcome.emptied) {
+            setMessages([]);
+            setConversations([]);
+        }
+        setSelectedUid(null);
+        setOpenThread(null);
+        setSelectedUids(new Set());
+        setSelectedConversationIds(new Set());
+        setConversationMessagesById({});
+        // What is really left - after a partial delete, or one that failed outright - is whatever the server lists.
+        setRefreshKey((n) => n + 1);
+    }
     // ---- Swiping a row on a phone (see `SwipeRow`): right to left archives, left to right asks for a folder. Both go through the same
     // ---- bulk path as the selection bar's Archive and Move to, so the badges, the optimistic bookkeeping and the failure pop-up are one
     // ---- implementation. Not offered where the actions aren't (an aggregate view spans mailboxes, search results are a mixed bag, the
@@ -1864,6 +1915,10 @@ function InboxContent({ userUid }) {
     function folderTypeOf(folderUidOfMessage) {
         return mailboxFolders.flatMap((mf) => mf.folders).find((f) => f.uid === folderUidOfMessage)?.type;
     }
+    /** Whether a message is in its mailbox's Deleted Items - where Delete is the permanent one. */
+    function inDeletedItems(message) {
+        return folderTypeOf(message.folderUid) === "deleted_items";
+    }
     /** Moves the keyboard's focus to a row - and scrolls it into view - once the selection has moved to it. */
     function focusRow(uid) {
         // Only called from a key press, when the list is on screen.
@@ -1921,13 +1976,13 @@ function InboxContent({ userUid }) {
         return all.filter((m) => !folderUid || crossMailbox || m.folderUid === folderUid);
     }
     /**
-     * Runs a bulk action on what the keyboard acts on - the ticked rows in select mode, else the open message or conversation - keeping only
-     * the messages `applies` accepts (Delete leaves out what is already in Deleted Items, Mark read what is already read: nothing to do
-     * then). Held while another bulk action is on the wire, like the bar's buttons. Closes the open thread after a move away from it.
+     * What the keyboard acts on - the ticked rows in select mode, else the open message or conversation - keeping only the messages `applies`
+     * accepts (Mark read leaves out what is already read: nothing to do then). Nothing (an empty list) while another bulk action or a
+     * permanent delete is on the wire, like the bar's buttons, or when the open conversation could not be loaded.
      */
-    async function runOnKeyboardTargets(action, removesRows, applies = () => true) {
-        if (bulkBusy || resolvingSelection > 0) {
-            return;
+    async function keyboardTargets(applies = () => true) {
+        if (bulkBusy || resolvingSelection > 0 || permanent.busy) {
+            return [];
         }
         let chosen;
         try {
@@ -1939,23 +1994,48 @@ function InboxContent({ userUid }) {
         }
         catch (err) {
             notifyApiError(err, "Couldn't load the messages in that conversation");
-            return;
+            return [];
         }
-        chosen = chosen.filter(applies);
+        return chosen.filter(applies);
+    }
+    /** Closes the open thread (and the selection in it) - what a delete of the whole conversation leaves nothing to show of. */
+    function closeOpenThread() {
+        setOpenThread(null);
+        setSelectedUid(null);
+    }
+    /** Runs a bulk action on `chosen` (from `keyboardTargets()`), closing the open thread after a move away from it. */
+    async function actOnKeyboardTargets(chosen, action, removesRows) {
         if (chosen.length === 0) {
             return;
         }
         const succeeded = await runBulkAction(action, removesRows, chosen);
         if (succeeded && removesRows && threadPane && !selectMode) {
-            setOpenThread(null);
-            setSelectedUid(null);
+            closeOpenThread();
+        }
+    }
+    /** Runs a bulk action on what the keyboard acts on (`keyboardTargets()`). */
+    async function runOnKeyboardTargets(action, removesRows, applies = () => true) {
+        await actOnKeyboardTargets(await keyboardTargets(applies), action, removesRows);
+    }
+    /**
+     * Delete, from the keyboard: what is in Deleted Items is permanently deleted (after a confirmation), anything else moves to its mailbox's
+     * Deleted Items - as the selection bar's Delete does. A mix (search results from several folders) moves only what is not in Deleted Items yet.
+     */
+    async function deleteFromKeyboard() {
+        const targets = await keyboardTargets();
+        if (targets.length > 0 && targets.every(inDeletedItems)) {
+            if ((await purgeChosen(targets)) && threadPane && !selectMode) {
+                closeOpenThread();
+            }
+            return;
         }
+        await actOnKeyboardTargets(targets.filter((message) => !inDeletedItems(message)), (chosen) => moveToFolderOfType(chosen, "deleted_items", "Deleted Items"), true);
     }
     useShortcut(SHORTCUTS.mail.next, () => selectNeighbour(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previous, () => selectNeighbour(-1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.nextUnread, () => selectNextUnread(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previousUnread, () => selectNextUnread(-1), { enabled: canMoveSelection });
-    useShortcut(SHORTCUTS.mail.delete, () => void runOnKeyboardTargets((chosen) => moveToFolderOfType(chosen, "deleted_items", "Deleted Items"), true, (message) => folderTypeOf(message.folderUid) !== "deleted_items"), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.delete, () => void deleteFromKeyboard(), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.markRead, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, true, { patch: patchListedMessage, track: trackMessageChange }), false, isUnread), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.markUnread, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, false, { patch: patchListedMessage, track: trackMessageChange }), false, (message) => !isUnread(message)), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(SHORTCUTS.mail.flag, () => 
@@ -1995,6 +2075,19 @@ function InboxContent({ userUid }) {
     const labelsDisabledReason = crossMailbox && selectedMessages.some((m) => m.mailboxUid !== activeMailboxUid)
         ? "Labels can only be applied here to messages in the open mailbox"
         : undefined;
+    // Delete is the permanent one for what is in Deleted Items: for the selection when there is one (search results can come from any folder),
+    // else for the folder being viewed, so the button says so before anything is ticked.
+    const deletesPermanently = selectedMessages.length > 0 ? selectedMessages.every(inDeletedItems) : currentFolders.find((f) => f.uid === folderUid)?.type === "deleted_items";
+    // Empty folder is offered at the top of the list of a mailbox's own Deleted Items or Junk Email - not for search results, nor for the "All
+    // mailboxes" views, which have no one folder to empty.
+    const emptiableFolder = !isSearching && !aggregateFolderType ? currentFolders.find((f) => f.uid === folderUid && EMPTIABLE_FOLDER_TYPES.includes(f.type)) : undefined;
+    // How many it holds as the sidebar's counts have it (kept right as messages leave), unless that says none while the list shows some.
+    const emptiableCount = emptiableFolder && folderCountOf(emptiableFolder).total > 0 ? folderCountOf(emptiableFolder).total : undefined;
+    const emptyDisabledReason = !mailboxWritable
+        ? "This mailbox is shared with you view-only"
+        : listedRowCount === 0 && emptiableCount === undefined
+            ? "This folder is already empty"
+            : undefined;
     if (!folderUid && !aggregateFolderType) {
         // `MailShell` never renders this component at all until a mailbox is resolved (see its own
         // full-screen `MailboxProvisioning` takeover otherwise) — this is purely the brief gap before
@@ -2014,7 +2107,10 @@ function InboxContent({ userUid }) {
                         // Optimistic: the rows and the folder badges change now, and change back if the server refuses.
                         (chosen) => setReadStateMany(chosen, read, { patch: patchListedMessage, track: trackMessageChange }), false), onSetFlagged: (flagged) => void runBulkAction((chosen) => setMessagesFlagged(chosen, flagged), false), shortcuts: keyboardActions, onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: async (targetFolderUid) => {
                             await runBulkAction((chosen) => moveMessages(chosen, targetFolderUid), true);
-                        }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void moveSelectionToType("deleted_items", "Deleted Items"), busy: bulkBusy || resolvingSelection > 0 })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
+                        }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void (deletesPermanently
+                            ? purgeChosen(selectedMessages)
+                            : // A mix (search results from several folders) moves only what is not in Deleted Items yet.
+                                moveSelectionToType("deleted_items", "Deleted Items", selectedMessages.filter((m) => !inDeletedItems(m)))), deletesPermanently: deletesPermanently, busy: bulkBusy || resolvingSelection > 0 || permanent.busy })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
                         // A conversation row is a thread summary, so only some of the keys have anything to
                         // order by - the rest stay pickable and are applied to the rows already fetched.
                         unavailableSortKeys: asConversations ? CONVERSATION_SORT_UNAVAILABLE : undefined, sortKeysNote: isSearching
@@ -2027,7 +2123,7 @@ function InboxContent({ userUid }) {
                             ? "Open a mailbox's own folder to select messages"
                             : loading
                                 ? "Wait for this folder to finish loading"
-                                : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
+                                : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), emptiableFolder && !selectMode && (_jsx(EmptyFolderBar, { folderName: emptiableFolder.name, count: emptiableCount, disabled: !!emptyDisabledReason || permanent.busy || bulkBusy, disabledReason: emptyDisabledReason, onEmpty: () => void emptyListedFolder(emptiableFolder, emptiableCount) })), permanent.dialog, offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
                                 "flex-1 py-1.5 font-semibold",
                                 preferences.filter === value
                                     ? "text-primary-dark border-b-2 border-primary-dark"
@@ -2062,6 +2158,8 @@ function InboxContent({ userUid }) {
                         // whichever folder is currently being viewed (into Archive), so it's removed
                         // from the list rather than patched in place.
                         removeListedMessage(updated.uid);
-                    }, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) }), _jsx(MoveToFolderDialog, { open: moveDialog !== null, onClose: () => setMoveDialog(null), mailboxUid: activeMailboxUid, folders: currentFolders, currentFolderUid: folderUid, count: moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount, onMove: swipeMove, onFolderCreated: onFolderCreated })] }));
+                    }, onChanged: patchListedMessage, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) }), _jsx(MoveToFolderDialog, { open: moveDialog !== null, onClose: () => setMoveDialog(null), mailboxUid: activeMailboxUid, folders: currentFolders, currentFolderUid: folderUid, count: moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount, onMove: swipeMove, onFolderCreated: onFolderCreated })] }));
 }
-export default routedPage("/", InboxPage);
+export default InboxPage;
+/** The tab's title: `Brand: Mail` (see `pageTitle()`). */
+export const title = pageTitle("Mail");

package/dist/apps/www/messages/[uid].d.ts

@@ -1,7 +1,18 @@
+import React from "react";
 import { MailShellProps } from "../../shared/components/mail/layout/MailShell.js";
-declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<MailShellProps & {
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/index.tsx` keeps its existing
+ * inline reading pane and never navigates here; see that file's `handleSelect`. A row of the conversation list
+ * comes with `?conversation=<id>` (`handleOpenConversation`), and then this page is the whole thread, opened at this
+ * message, as the desktop's reading pane is; without it (a flat list, a link to a message) it is that one message.
+ */
+declare function MessageDetailPage(props: MailShellProps & {
     params: {
         uid: string;
     };
-}>;
-export default _default;
+}): React.JSX.Element;
+export default MessageDetailPage;
+/** The tab's title: `Brand: Mail` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/messages/[uid].js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMessage } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -12,7 +12,7 @@ import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHook
 import { useMarkMessageRead } from "../../shared/mail/useMarkMessageRead.js";
 import MailShell, { useMailShell } from "../../shared/components/mail/layout/MailShell.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
-import { useLocationSearch } from "../../shared/navigation/AppRouter.js";
+import { useSearchParams } from "@rapidrest/react/client";
 import { ReadingPaneSkeleton } from "../../shared/components/mail/reading/MessageCard.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 /**
@@ -30,7 +30,7 @@ function MessageDetailContent({ uid }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [labels, setLabels] = useState([]);
-    const conversationId = new URLSearchParams(useLocationSearch()).get("conversation");
+    const conversationId = useSearchParams()[0].get("conversation");
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -80,6 +80,8 @@ function MessageDetailContent({ uid }) {
     if (conversationId) {
         return (_jsxs("div", { className: "flex flex-col h-full min-h-0", children: [_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" }), _jsx(LazyConversationThreadPane, { conversation: { conversationId, subject: message.subject, messageCount: 1 }, selectedUid: message.uid, mailboxUid: message.mailboxUid, folders: folders, labels: labels, shortcuts: true, onMessagePatched: () => undefined, onMessageRemoved: () => undefined, onLabelCreated: (label) => setLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })] }));
     }
-    return (_jsx(LazyMessageDetailPane, { shortcuts: true, message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: setMessage, onFolderCreated: onFolderCreated, onScheduledSendCanceled: setMessage, onArchived: setMessage, labels: labels, onLabelsChanged: setMessage, onLabelCreated: (label) => setLabels((prev) => [...prev, label]) }));
+    return (_jsx(LazyMessageDetailPane, { shortcuts: true, message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: setMessage, onFolderCreated: onFolderCreated, onScheduledSendCanceled: setMessage, onArchived: setMessage, onChanged: setMessage, labels: labels, onLabelsChanged: setMessage, onLabelCreated: (label) => setLabels((prev) => [...prev, label]) }));
 }
-export default routedPage("/messages/:uid", MessageDetailPage);
+export default MessageDetailPage;
+/** The tab's title: `Brand: Mail` (see `pageTitle()`). */
+export const title = pageTitle("Mail");

package/dist/apps/www/settings/appearance/index.d.ts

@@ -1,4 +1,10 @@
+import React from "react";
 import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
 export type SettingsAppearancePageProps = Omit<SettingsShellProps, "active">;
-declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsAppearancePageProps>;
-export default _default;
+/** Settings > Appearance: the colour scheme, theme colours and background. Not mailbox-scoped - it is the signed-in user's own. */
+declare function SettingsAppearancePage(props: SettingsAppearancePageProps): React.JSX.Element;
+export default SettingsAppearancePage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;

package/dist/apps/www/settings/appearance/index.js

@@ -3,11 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
+import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import SettingsShell from "../../../shared/components/settings/layout/SettingsShell.js";
 import AppearanceForm from "../../../shared/appearance/AppearanceForm.js";
 /** Settings > Appearance: the colour scheme, theme colours and background. Not mailbox-scoped - it is the signed-in user's own. */
 function SettingsAppearancePage(props) {
     return (_jsx(SettingsShell, { ...props, active: "appearance", children: _jsx(AppearanceForm, {}) }));
 }
-export default routedPage("/settings/appearance", SettingsAppearancePage);
+export default SettingsAppearancePage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export const title = pageTitle("Settings");

package/dist/apps/www/settings/auto-reply/index.d.ts

@@ -1,4 +1,9 @@
+import React from "react";
 import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
 export type SettingsAutoReplyPageProps = Omit<SettingsShellProps, "active">;
-declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsAutoReplyPageProps>;
-export default _default;
+declare function SettingsAutoReplyPage(props: SettingsAutoReplyPageProps): React.JSX.Element;
+export default SettingsAutoReplyPage;
+/** The tab's title: `Brand: Settings` (see `pageTitle()`). */
+export declare const title: (props: {
+    branding?: Pick<import("@rapidmx/react-shared/branding/brandingApi.js").Branding, "title" | "companyName"> | null;
+}) => string;