@rapidmx/web-client 0.9.0 → 0.10.0

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

@@ -0,0 +1,56 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * What the client-side router (`AppRouter.tsx`) offers to the tree under it - the location and a way to navigate - and the hooks that read
+ * it. Kept apart from the router itself so that the app frame (`AppShell`), which the router renders, can use `useNavigate()` without a
+ * circular import. `AppRouter.tsx` re-exports everything here, so callers keep importing from there.
+ */
+import { createContext, useContext, useEffect, useState } from "react";
+export const RouterContext = createContext(null);
+/** Before the browser's own location has been read (the server render and the first client render, which must match). */
+export const UNKNOWN_LOCATION = { pathname: "", search: "", hash: "" };
+export function readWindowLocation() {
+    const { pathname, search, hash } = window.location;
+    return { pathname, search, hash };
+}
+/** What `useNavigate()` does outside a router: an ordinary navigation, exactly as `window.location.href = href` always was. */
+function navigateWithBrowser(href, options = {}) {
+    if (options.replace) {
+        window.location.replace(href);
+    }
+    else {
+        window.location.href = href;
+    }
+}
+/**
+ * The function to go somewhere with. `navigate("/calendar")` and `navigate("/?mailboxUid=a&folderUid=b")` change the page and
+ * the URL without a page load when the router knows the route (Mail, Calendar, Contacts, Tasks, Settings and their subpages),
+ * and load the page normally otherwise; outside the router it is always a normal navigation. Prefer a plain `<a href>` for
+ * anything the user clicks - the router intercepts it, and it stays a real link - and this for what code decides (after a
+ * save, a delete, a select). The returned function is stable across renders.
+ */
+export function useNavigate() {
+    const router = useContext(RouterContext);
+    return router ? router.navigate : navigateWithBrowser;
+}
+/**
+ * Where the app is now, as `{ pathname, search, hash }`, updating as the router navigates (folder changes are `search`
+ * changes, not page changes). Empty until the browser's location has been read in an effect after the first render, so that
+ * the server render and the first client render agree - read query parameters from it in an effect, not during render.
+ */
+export function useLocation() {
+    const router = useContext(RouterContext);
+    const [own, setOwn] = useState(UNKNOWN_LOCATION);
+    useEffect(() => {
+        if (!router) {
+            setOwn(readWindowLocation());
+        }
+    }, [router]);
+    return router ? router.location : own;
+}
+/** `useLocation().search` - what the shells read `?mailboxUid=` and the like from. */
+export function useLocationSearch() {
+    return useLocation().search;
+}

package/dist/apps/shared/navigation/routes.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from "react";
+/**
+ * One page the client-side router (`AppRouter`) can show without a page load. The table of them (`apps/www/_routes.ts`)
+ * mirrors the files under `apps/www`: what isn't in it (the admin and escrow consoles, plugin pages, anything else) is
+ * reached by a normal navigation.
+ */
+export interface RouteDefinition {
+    /** The route template: literal segments and `:name` parameters, the same shape as the file path (`/messages/:uid`
+     * for `messages/[uid].tsx`). The first entry that matches a URL wins, so list literal routes before parameterized
+     * ones (`/settings/filters/new` before `/settings/filters/:uid`). */
+    path: string;
+    /** The app-rail entry (or `"settings"`) highlighted while this page shows - what the page's shell passes as `active`. */
+    active: string;
+    /**
+     * Loads the page's module, which must have a `routedPage()` component as its default export. Written as
+     * `() => import("./calendar/index.js")` so the bundler makes the page its own chunk; it is called the first time the
+     * page is shown or prefetched (pointer over or focus on a link to it, or when the browser is idle).
+     */
+    load: () => Promise<{
+        default: ComponentType<any>;
+    }>;
+    /** Downloaded when the browser is idle after the first page has loaded - the app rail's own pages, which are the
+     * likeliest next click. */
+    idlePrefetch?: boolean;
+}
+export interface RouteMatch {
+    route: RouteDefinition;
+    /** The values of the template's `:name` segments, decoded. */
+    params: Record<string, string>;
+}
+/** The first route in `routes` whose template matches `pathname`, with its parameters. */
+export declare function matchRoute(routes: readonly RouteDefinition[], pathname: string): RouteMatch | undefined;

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

@@ -0,0 +1,37 @@
+/** Splits a path into segments, ignoring a trailing slash: `/` and `""` have none. */
+function segmentsOf(path) {
+    return path.split("/").filter((segment) => segment !== "");
+}
+/** Matches `pathname` against one route template - `undefined` when it doesn't, or a parameter isn't valid percent-encoding. */
+function matchTemplate(template, pathname) {
+    const expected = segmentsOf(template);
+    const actual = segmentsOf(pathname);
+    if (expected.length !== actual.length) {
+        return undefined;
+    }
+    const params = {};
+    for (let i = 0; i < expected.length; i++) {
+        if (expected[i].startsWith(":")) {
+            try {
+                params[expected[i].slice(1)] = decodeURIComponent(actual[i]);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        else if (expected[i] !== actual[i]) {
+            return undefined;
+        }
+    }
+    return params;
+}
+/** The first route in `routes` whose template matches `pathname`, with its parameters. */
+export function matchRoute(routes, pathname) {
+    for (const route of routes) {
+        const params = matchTemplate(route.path, pathname);
+        if (params) {
+            return { route, params };
+        }
+    }
+    return undefined;
+}

package/dist/apps/shared/search/LocalIndexLifecycle.js

@@ -22,7 +22,17 @@
  */
 import { useEffect, useRef } from "react";
 import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
-import { buildLocalIndex, cancelLocalIndexBuild } from "./localIndexBuilder.js";
+/**
+ * The index builder (with the message security code it decrypts through - PKI.js and the ASN.1/X.509 libraries, over half a
+ * megabyte) is loaded only once a mailbox is actually unlocked and a build is due, so an inbox that never unlocks - the
+ * common case - never downloads it.
+ */
+let builder;
+const loadBuilder = () => (builder ?? (builder = import("./localIndexBuilder.js").catch((err) => {
+    // A failed download is tried again the next time one is due.
+    builder = undefined;
+    throw err;
+})));
 import { destroyLocalIndex, pruneInaccessibleLocalIndexes } from "./localIndexRpcClient.js";
 export const POLL_INTERVAL_MS = 5000;
 /** Renders nothing - pure side-effect component, mounted by `MailShell.tsx`. */
@@ -42,7 +52,9 @@ export default function LocalIndexLifecycle({ mailboxUid, folders, accessibleMai
         trackedRef.current.set(targetMailboxUid, true);
         // Never an unhandled rejection - a broken local index is best-effort infrastructure, not a build
         // the rest of the app depends on.
-        buildLocalIndex(targetMailboxUid, unlocked, targetFolders).catch(() => undefined);
+        loadBuilder()
+            .then(({ buildLocalIndex }) => buildLocalIndex(targetMailboxUid, unlocked, targetFolders))
+            .catch(() => undefined);
     }
     useEffect(() => {
         if (mailboxUid) {
@@ -57,7 +69,9 @@ export default function LocalIndexLifecycle({ mailboxUid, folders, accessibleMai
                     trackedRef.current.set(trackedUid, false);
                     // Stop the pass still running with the now-destroyed keys; the destroy itself also makes
                     // the Worker reject anything that pass still sends.
-                    void cancelLocalIndexBuild(trackedUid);
+                    loadBuilder()
+                        .then(({ cancelLocalIndexBuild }) => cancelLocalIndexBuild(trackedUid))
+                        .catch(() => undefined);
                     void destroyLocalIndex(trackedUid);
                 }
             }

package/dist/apps/shared/styles/app.css

@@ -276,13 +276,31 @@ h5,
 h6 {
     font-family: var(--rr-font-display);
 }
-
-/* The compose editor's quoted original (`composeQuoting.ts`'s blockquote). TipTap keeps the element but not the
- * inline style it was seeded with, and Tailwind's preflight resets the browser's own blockquote indent - without
- * this the quote under a reply reads as if it were part of the new message. */
-.tiptap blockquote {
-    margin: 0;
-    padding-left: 1em;
-    border-left: 2px solid var(--rr-color-border);
-    color: var(--rr-color-text-muted);
-}
+
+/* The compose editor's quoted original (`composeQuoting.ts`'s blockquote). TipTap keeps the element but not the
+ * inline style it was seeded with, and Tailwind's preflight resets the browser's own blockquote indent - without
+ * this the quote under a reply reads as if it were part of the new message. */
+.tiptap blockquote {
+    margin: 0;
+    padding-left: 1em;
+    border-left: 2px solid var(--rr-color-border);
+    color: var(--rr-color-text-muted);
+}
+
+/* A new-mail pop-up (`NewMailToasts.tsx`) eases in from just above its place. Only for readers who have not asked their system
+ * for less motion: with `prefers-reduced-motion: reduce` it simply appears. */
+@media (prefers-reduced-motion: no-preference) {
+    .rr-toast-in {
+        animation: rr-toast-in 0.18s ease-out;
+    }
+}
+@keyframes rr-toast-in {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { ComponentType } from "react";
+import { RoutedPageComponent } from "../shared/navigation/AppRouter.js";
+/**
+ * Makes a `www` page the entry of the client-side router: the page's default export is `routedPage("/its/route", Page)`.
+ * `@rapidrest/react` server-renders and hydrates exactly that component, so what it renders - the router, with the persistent
+ * app frame (`AppChrome`) and `Page` inside it - is the whole client tree, and later pages replace `Page` without a page load.
+ * `path` is the page's route template, the same as its entry in `_routes.ts`.
+ *
+ * The result carries the plain `Page` as `.page`, which is what the router shows when it loads this module for a navigation
+ * (rendering the wrapped default export there would nest a second router).
+ */
+export declare function routedPage<P extends object>(path: string, Page: ComponentType<P>): RoutedPageComponent<P>;

package/dist/apps/www/_routedPage.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppRouter from "../shared/navigation/AppRouter.js";
+import { wwwRoutes } from "./_routes.js";
+/**
+ * Makes a `www` page the entry of the client-side router: the page's default export is `routedPage("/its/route", Page)`.
+ * `@rapidrest/react` server-renders and hydrates exactly that component, so what it renders - the router, with the persistent
+ * app frame (`AppChrome`) and `Page` inside it - is the whole client tree, and later pages replace `Page` without a page load.
+ * `path` is the page's route template, the same as its entry in `_routes.ts`.
+ *
+ * The result carries the plain `Page` as `.page`, which is what the router shows when it loads this module for a navigation
+ * (rendering the wrapped default export there would nest a second router).
+ */
+export function routedPage(path, Page) {
+    function RoutedPage(props) {
+        return _jsx(AppRouter, { routes: wwwRoutes, initialPath: path, initialPage: Page, pageProps: props });
+    }
+    RoutedPage.page = Page;
+    return RoutedPage;
+}

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

@@ -0,0 +1,11 @@
+import type { RouteDefinition } from "../shared/navigation/routes.js";
+/**
+ * Every `apps/www` page the client-side router can show without a page load (see `apps/shared/navigation/AppRouter.tsx`), in
+ * the order they are matched: literal routes before the parameterized ones that would also match them. Each page loads with a
+ * dynamic `import()`, which is what makes it a chunk of its own - only the page a document was rendered for is in its first
+ * JavaScript. Keep it in step with the files under `apps/www`; a page missing from here still works, it is just reached with a
+ * page load. (The file starts with `_` so `@rapidrest/react` doesn't treat it as a page.)
+ *
+ * The four app-rail pages are `idlePrefetch`ed: downloaded when the browser is idle after the first page has loaded.
+ */
+export declare const wwwRoutes: readonly RouteDefinition[];

package/dist/apps/www/_routes.js

@@ -0,0 +1,29 @@
+/**
+ * Every `apps/www` page the client-side router can show without a page load (see `apps/shared/navigation/AppRouter.tsx`), in
+ * the order they are matched: literal routes before the parameterized ones that would also match them. Each page loads with a
+ * dynamic `import()`, which is what makes it a chunk of its own - only the page a document was rendered for is in its first
+ * JavaScript. Keep it in step with the files under `apps/www`; a page missing from here still works, it is just reached with a
+ * page load. (The file starts with `_` so `@rapidrest/react` doesn't treat it as a page.)
+ *
+ * The four app-rail pages are `idlePrefetch`ed: downloaded when the browser is idle after the first page has loaded.
+ */
+export const wwwRoutes = [
+    { path: "/", active: "mail", load: () => import("./index.js"), idlePrefetch: true },
+    { path: "/messages/:uid", active: "mail", load: () => import("./messages/[uid].js") },
+    { path: "/calendar", active: "calendar", load: () => import("./calendar/index.js"), idlePrefetch: true },
+    { path: "/contacts", active: "contacts", load: () => import("./contacts/index.js"), idlePrefetch: true },
+    { path: "/contacts/:uid", active: "contacts", load: () => import("./contacts/[uid].js") },
+    { path: "/tasks", active: "tasks", load: () => import("./tasks/index.js"), idlePrefetch: true },
+    { path: "/settings/auto-reply", active: "settings", load: () => import("./settings/auto-reply/index.js") },
+    { path: "/settings/encryption", active: "settings", load: () => import("./settings/encryption/index.js") },
+    { path: "/settings/filters", active: "settings", load: () => import("./settings/filters/index.js") },
+    { path: "/settings/filters/new", active: "settings", load: () => import("./settings/filters/new/index.js") },
+    { path: "/settings/filters/:uid", active: "settings", load: () => import("./settings/filters/[uid].js") },
+    { path: "/settings/labels", active: "settings", load: () => import("./settings/labels/index.js") },
+    { path: "/settings/privacy", active: "settings", load: () => import("./settings/privacy/index.js") },
+    { path: "/settings/read-receipts", active: "settings", load: () => import("./settings/read-receipts/index.js") },
+    { path: "/settings/sharing", active: "settings", load: () => import("./settings/sharing/index.js") },
+    { path: "/settings/signatures", active: "settings", load: () => import("./settings/signatures/index.js") },
+    { path: "/settings/signatures/new", active: "settings", load: () => import("./settings/signatures/new/index.js") },
+    { path: "/settings/signatures/:uid", active: "settings", load: () => import("./settings/signatures/[uid].js") },
+];

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

@@ -1,3 +1,3 @@
-import React from "react";
 import { CalendarShellProps } from "../../shared/components/calendar/layout/CalendarShell.js";
-export default function CalendarPage(props: CalendarShellProps): React.JSX.Element;
+declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<CalendarShellProps>;
+export default _default;

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

@@ -3,6 +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 { useEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3 } from "react-icons/hi2";
@@ -24,11 +25,33 @@ import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-export default function CalendarPage(props) {
+import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
+import { useShortcut } from "../../shared/keyboard/useShortcut.js";
+import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
+function CalendarPage(props) {
     return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, { userUid: props.userUid }) }));
 }
 const VIEW_TYPES = ["month", "week", "workWeek", "day", "split"];
 const VIEW_LABELS = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+/** The shortcut that switches to a view (Outlook's Ctrl+Alt+1-4); the split view has none. */
+const VIEW_SHORTCUTS = {
+    day: SHORTCUTS.calendar.day,
+    workWeek: SHORTCUTS.calendar.workWeek,
+    week: SHORTCUTS.calendar.week,
+    month: SHORTCUTS.calendar.month,
+};
+/** One of the view switcher's buttons, with its shortcut in the tooltip. */
+function ViewButton({ view, current, onSelect }) {
+    const shortcut = VIEW_SHORTCUTS[view];
+    const hint = useShortcutProps(VIEW_LABELS[view], shortcut ?? SHORTCUTS.calendar.day, !!shortcut);
+    return (_jsx("button", { type: "button", onClick: () => onSelect(view), ...hint, className: [
+            "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
+            current === view ? "bg-primary text-white" : "hover:bg-surface-alt",
+            (view === "workWeek" || view === "split") && "hidden md:inline-block",
+        ]
+            .filter(Boolean)
+            .join(" "), children: VIEW_LABELS[view] }));
+}
 function CalendarContent({ userUid }) {
     const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
     // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
@@ -195,6 +218,19 @@ function CalendarContent({ userUid }) {
     function closeModal() {
         setModal(null);
     }
+    // Keyboard shortcuts - the toolbar's own actions. (A dialog open - the event editor - silences them.)
+    useShortcut(SHORTCUTS.calendar.create, () => openNewEvent(), { enabled: !!mailboxUid && !!folderUid });
+    useShortcut(SHORTCUTS.calendar.today, goToday);
+    useShortcut(SHORTCUTS.calendar.previous, () => shiftView(-1));
+    useShortcut(SHORTCUTS.calendar.next, () => shiftView(1));
+    useShortcut(SHORTCUTS.calendar.day, () => setView("day"));
+    useShortcut(SHORTCUTS.calendar.workWeek, () => setView("workWeek"));
+    useShortcut(SHORTCUTS.calendar.week, () => setView("week"));
+    useShortcut(SHORTCUTS.calendar.month, () => setView("month"));
+    const newEventHint = useShortcutProps("New event", SHORTCUTS.calendar.create, !!mailboxUid && !!folderUid);
+    const previousHint = useShortcutProps("Previous", SHORTCUTS.calendar.previous);
+    const todayHint = useShortcutProps("Today", SHORTCUTS.calendar.today);
+    const nextHint = useShortcutProps("Next", SHORTCUTS.calendar.next);
     function handleSaved() {
         setModal(null);
         reload();
@@ -238,11 +274,6 @@ function CalendarContent({ userUid }) {
         .filter((mc) => mc.calendarFolders.length > 0 && writableMailboxes.some((mb) => mb.uid === mc.mailbox.uid))
         .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })), [mailboxCalendars, writableMailboxes]);
     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 flex min-h-0", children: [_jsx("div", { className: "hidden md: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", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-3 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "md: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" }) }), _jsx(Button, { type: "button", onClick: () => openNewEvent(), className: "!w-auto shrink-0", children: "+ New event" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, 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", 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 gap-1 overflow-x-auto", children: VIEW_TYPES.map((v) => (_jsx("button", { type: "button", onClick: () => setView(v), className: [
-                                        "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
-                                        view === v ? "bg-primary text-white" : "hover:bg-surface-alt",
-                                        (v === "workWeek" || v === "split") && "hidden md:inline-block",
-                                    ]
-                                        .filter(Boolean)
-                                        .join(" "), children: VIEW_LABELS[v] }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), actionError && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: actionError }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), 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, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
+    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx("div", { className: "hidden md: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", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-3 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "md: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" }) }), _jsx(Button, { type: "button", onClick: () => openNewEvent(), 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 gap-1 overflow-x-auto", 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 }) })), actionError && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: actionError }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), 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, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
 }
+export default routedPage("/calendar", CalendarPage);

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

@@ -1,13 +1,7 @@
-import React from "react";
 import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
-/**
- * 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`).
- */
-export default function ContactDetailPage(props: ContactsShellProps & {
+declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<ContactsShellProps & {
     params: {
         uid: string;
     };
-}): React.JSX.Element;
+}>;
+export default _default;

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

@@ -3,6 +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 { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { deleteContact, getContact } from "@rapidmx/react-shared/contacts/contactsApi.js";
@@ -17,10 +19,11 @@ import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigne
  * 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`).
  */
-export default function ContactDetailPage(props) {
+function ContactDetailPage(props) {
     return (_jsx(ContactsShell, { ...props, children: _jsx(ContactDetailContent, { uid: props.params.uid }) }));
 }
 function ContactDetailContent({ uid }) {
+    const navigate = useNavigate();
     const [contact, setContact] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -46,7 +49,7 @@ function ContactDetailContent({ uid }) {
             await deleteContact(contact.uid, contact.version);
             // A deleted contact's pinned signing keys must stop vouching for signatures.
             clearPinnedSignerCache();
-            window.location.href = "/contacts";
+            navigate("/contacts");
         }
         catch (err) {
             setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
@@ -71,3 +74,4 @@ function ContactDetailContent({ uid }) {
     }
     return (_jsxs("div", { className: "p-6", children: [deleteError && _jsx(Alert, { children: deleteError }), _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref, onKeysChanged: handleKeysChanged })] }));
 }
+export default routedPage("/contacts/:uid", ContactDetailPage);

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

@@ -1,3 +1,3 @@
-import React from "react";
 import { ContactsShellProps } from "../../shared/components/contacts/layout/ContactsShell.js";
-export default function ContactsPage(props: ContactsShellProps): React.JSX.Element;
+declare const _default: import("../../shared/navigation/AppRouter.js").RoutedPageComponent<ContactsShellProps>;
+export default _default;

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

@@ -3,7 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useState } from "react";
+import { routedPage } from "../_routedPage.js";
+import { useNavigate } from "../../shared/navigation/AppRouter.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";
 import { contactsToVCardFile, contactToVCard, parseVCards } from "@rapidmx/react-shared/contacts/vcard.js";
@@ -22,8 +24,10 @@ import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/listAllPages.js";
 import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
+import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
+import { useShortcut } from "../../shared/keyboard/useShortcut.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";
-export default function ContactsPage(props) {
+function ContactsPage(props) {
     return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, { userUid: props.userUid }) }));
 }
 /** Shown in the Deleted view when the server answered `?deleted=true` with live contacts (see `canViewDeleted`). */
@@ -51,6 +55,7 @@ function ContactsContent({ userUid }) {
     const writableMailboxes = useWritableMailboxes(mailboxes, userUid, mailboxUid);
     const { openCompose } = useCompose();
     const isMobile = useIsMobile();
+    const navigate = useNavigate();
     const [contacts, setContacts] = useState([]);
     const [deletedContacts, setDeletedContacts] = useState([]);
     const [deletedLoading, setDeletedLoading] = useState(false);
@@ -208,7 +213,7 @@ function ContactsContent({ userUid }) {
     }
     function handleSelectRow(contact) {
         if (isMobile) {
-            window.location.href = `/contacts/${encodeURIComponent(contact.uid)}`;
+            navigate(`/contacts/${encodeURIComponent(contact.uid)}`);
             return;
         }
         setSelectedUid(contact.uid);
@@ -218,6 +223,13 @@ function ContactsContent({ userUid }) {
         setSelectedUid(null);
         setMode("new");
     }
+    // Keyboard shortcuts - the toolbar's New contact and the search box. (A dialog open silences them.)
+    const searchInputRef = useRef(null);
+    useShortcut(SHORTCUTS.contacts.create, handleNew);
+    useShortcut(SHORTCUTS.contacts.search, () => {
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+    });
     function handleSaved(contact) {
         setMode("view");
         if (contact.mailboxUid !== mailboxUid) {
@@ -337,5 +349,6 @@ function ContactsContent({ userUid }) {
     return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted }), _jsxs("div", { className: [
                     "w-full md:w-96 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 }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { 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 overflow-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "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: "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 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "px-3 py-2 text-text-muted truncate", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "mb-4 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(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate })) : (_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" })] })] })] }));
+                ].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 }), _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 overflow-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "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: "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 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "px-3 py-2 text-text-muted truncate", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "mb-4 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(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate })) : (_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" })] })] })] }));
 }
+export default routedPage("/contacts", ContactsPage);

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

@@ -1,3 +1,3 @@
-import React from "react";
 import { MailShellProps } from "../shared/components/mail/layout/MailShell.js";
-export default function InboxPage(props: MailShellProps): React.JSX.Element;
+declare const _default: import("../shared/navigation/AppRouter.js").RoutedPageComponent<MailShellProps>;
+export default _default;