@rapidmx/web-client 0.28.0 → 0.29.0

package/dist/apps/shared/components/admin/diagnostics/DiagnosticsManager.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SaveFile } from "./download.js";
 import type { LogSocketFactory } from "./logClient.js";
-export type DiagnosticsTab = "versions" | "runtime" | "system" | "logs";
+export type DiagnosticsTab = "information" | "runtime" | "system" | "logs";
 export interface DiagnosticsManagerProps {
     /** Creates the log stream's WebSocket. Defaults to the browser's. For a test. */
     createLogSocket?: LogSocketFactory;
@@ -9,8 +9,8 @@ export interface DiagnosticsManagerProps {
     saveFile?: SaveFile;
 }
 /**
- * The Diagnostics page: what is installed (Versions), what it runs on (Runtime), how it is doing right now (System, live) and what
- * the server is logging (Logs, live, with captures). Versions and Runtime are read when the page opens and again on Refresh, and
+ * The Diagnostics page: what is installed and how it is set up (Information), what it runs on (Runtime), how it is doing right now (System, live) and what
+ * the server is logging (Logs, live, with captures). Information and Runtime are read when the page opens and again on Refresh, and
  * are not polled. The live tabs only work while they are open: System polls only on its tab, and the log stream is opened the
  * first time the Logs tab is (and closes with the page, or on Stop).
  */

package/dist/apps/shared/components/admin/diagnostics/DiagnosticsManager.js

@@ -6,9 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArrowDownTray, HiOutlineArrowPath } from "react-icons/hi2";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import { getDiagnosticsMetrics, getDiagnosticsRuntime, getDiagnosticsVersions } from "./diagnosticsApi.js";
+import { getDiagnosticsInformation, getDiagnosticsMetrics, getDiagnosticsRuntime, getDiagnosticsVersions, } from "./diagnosticsApi.js";
 import { saveTextFile, timestampedFilename } from "./download.js";
 import { describeError } from "./format.js";
+import InformationPanel from "./InformationPanel.js";
 import { loadInstalledPlugins } from "./InstalledPlugins.js";
 import LogsPanel from "./LogsPanel.js";
 import RuntimePanel from "./RuntimePanel.js";
@@ -16,9 +17,8 @@ import SystemPanel from "./SystemPanel.js";
 import { useDiagnosticsResource } from "./useDiagnosticsResource.js";
 import { useLogStream } from "./useLogStream.js";
 import { useMetricsPolling } from "./useMetricsPolling.js";
-import VersionsPanel from "./VersionsPanel.js";
 const TABS = [
-    { id: "versions", label: "Versions" },
+    { id: "information", label: "Information" },
     { id: "runtime", label: "Runtime" },
     { id: "system", label: "System" },
     { id: "logs", label: "Logs" },
@@ -26,16 +26,17 @@ const TABS = [
 const tabId = (tab) => `diagnostics-tab-${tab}`;
 const panelId = (tab) => `diagnostics-panel-${tab}`;
 /**
- * The Diagnostics page: what is installed (Versions), what it runs on (Runtime), how it is doing right now (System, live) and what
- * the server is logging (Logs, live, with captures). Versions and Runtime are read when the page opens and again on Refresh, and
+ * The Diagnostics page: what is installed and how it is set up (Information), what it runs on (Runtime), how it is doing right now (System, live) and what
+ * the server is logging (Logs, live, with captures). Information and Runtime are read when the page opens and again on Refresh, and
  * are not polled. The live tabs only work while they are open: System polls only on its tab, and the log stream is opened the
  * first time the Logs tab is (and closes with the page, or on Stop).
  */
 export default function DiagnosticsManager({ createLogSocket, saveFile = saveTextFile }) {
-    const [tab, setTab] = useState("versions");
+    const [tab, setTab] = useState("information");
     const [reloadKey, setReloadKey] = useState(0);
     const [preparingReport, setPreparingReport] = useState(false);
     const versions = useDiagnosticsResource(getDiagnosticsVersions, reloadKey, "Could not read the server's versions.");
+    const information = useDiagnosticsResource(getDiagnosticsInformation, reloadKey, "Could not read the server's environment and configuration.");
     const runtime = useDiagnosticsResource(getDiagnosticsRuntime, reloadKey, "Could not read the runtime.");
     const plugins = useDiagnosticsResource(loadInstalledPlugins, reloadKey, "Could not read the installed plugins.");
     const polling = useMetricsPolling(tab === "system");
@@ -48,7 +49,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
             startLogs();
         }
     }, [tab]);
-    const refreshing = versions.loading || runtime.loading || plugins.loading;
+    const refreshing = versions.loading || information.loading || runtime.loading || plugins.loading;
     function handleTabKeyDown(event) {
         const index = TABS.findIndex((item) => item.id === tab);
         let next;
@@ -71,7 +72,10 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         setTab(TABS[next].id);
         document.getElementById(tabId(TABS[next].id))?.focus();
     }
-    /** Saves the versions, the runtime and the latest metrics sample (asking for one if the System tab has not sampled): no logs. */
+    /**
+     * Saves the versions, the environment and configuration (the server has already withheld every secret), the runtime and the
+     * latest metrics sample (asking for one if the System tab has not sampled): no logs.
+     */
     async function downloadReport() {
         setPreparingReport(true);
         const generatedAt = new Date();
@@ -88,6 +92,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         const report = {
             generatedAt: generatedAt.toISOString(),
             versions: versions.data ?? null,
+            information: information.data ?? null,
             runtime: runtime.data ?? null,
             // Only what each plugin is and which version is loaded: a plugin's settings can hold secrets.
             plugins: plugins.data
@@ -99,6 +104,7 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
             metrics: metrics ?? null,
             errors: {
                 versions: versions.error ?? null,
+                information: information.error ?? null,
                 runtime: runtime.error ?? null,
                 plugins: plugins.error ?? null,
                 metrics: metricsError ?? null,
@@ -107,5 +113,5 @@ export default function DiagnosticsManager({ createLogSocket, saveFile = saveTex
         saveFile(timestampedFilename("rapidmx-diagnostics", "json", generatedAt), `${JSON.stringify(report, null, 2)}\n`, "application/json");
         setPreparingReport(false);
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-5 flex flex-wrap items-center justify-between gap-3", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Diagnostics" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: refreshing, onClick: () => setReloadKey(reloadKey + 1), children: [_jsx(HiOutlineArrowPath, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Refresh"] }), _jsxs(Button, { type: "button", className: "!w-auto", loading: preparingReport, onClick: () => void downloadReport(), children: [_jsx(HiOutlineArrowDownTray, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Download diagnostics report"] })] })] }), _jsx("div", { role: "tablist", "aria-label": "Diagnostics sections", className: "mb-5 flex gap-1 overflow-x-auto rounded-lg bg-surface-alt p-1", children: TABS.map((item) => (_jsx("button", { type: "button", role: "tab", id: tabId(item.id), "aria-selected": item.id === tab, "aria-controls": panelId(item.id), tabIndex: item.id === tab ? 0 : -1, onClick: () => setTab(item.id), onKeyDown: handleTabKeyDown, className: `flex-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ${item.id === tab ? "bg-surface text-text shadow-card" : "text-text-muted hover:text-text"}`, children: item.label }, item.id))) }), _jsxs("div", { role: "tabpanel", id: panelId(tab), "aria-labelledby": tabId(tab), children: [tab === "versions" && _jsx(VersionsPanel, { versions: versions, plugins: plugins }), tab === "runtime" && _jsx(RuntimePanel, { runtime: runtime }), tab === "system" && _jsx(SystemPanel, { polling: polling }), tab === "logs" && _jsx(LogsPanel, { stream: logStream, saveFile: saveFile })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-5 flex flex-wrap items-center justify-between gap-3", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Diagnostics" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: refreshing, onClick: () => setReloadKey(reloadKey + 1), children: [_jsx(HiOutlineArrowPath, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Refresh"] }), _jsxs(Button, { type: "button", className: "!w-auto", loading: preparingReport, onClick: () => void downloadReport(), children: [_jsx(HiOutlineArrowDownTray, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Download diagnostics report"] })] })] }), _jsx("div", { role: "tablist", "aria-label": "Diagnostics sections", className: "mb-5 flex gap-1 overflow-x-auto rounded-lg bg-surface-alt p-1", children: TABS.map((item) => (_jsx("button", { type: "button", role: "tab", id: tabId(item.id), "aria-selected": item.id === tab, "aria-controls": panelId(item.id), tabIndex: item.id === tab ? 0 : -1, onClick: () => setTab(item.id), onKeyDown: handleTabKeyDown, className: `flex-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ${item.id === tab ? "bg-surface text-text shadow-card" : "text-text-muted hover:text-text"}`, children: item.label }, item.id))) }), _jsxs("div", { role: "tabpanel", id: panelId(tab), "aria-labelledby": tabId(tab), children: [tab === "information" && _jsx(InformationPanel, { versions: versions, plugins: plugins, information: information }), tab === "runtime" && _jsx(RuntimePanel, { runtime: runtime }), tab === "system" && _jsx(SystemPanel, { polling: polling }), tab === "logs" && _jsx(LogsPanel, { stream: logStream, saveFile: saveFile })] })] }));
 }

package/dist/apps/shared/components/admin/diagnostics/InformationPanel.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { DiagnosticsInformation, DiagnosticsVersions } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+import { InstalledPluginsData } from "./InstalledPlugins.js";
+export interface InformationPanelProps {
+    versions: DiagnosticsResource<DiagnosticsVersions>;
+    plugins: DiagnosticsResource<InstalledPluginsData>;
+    information: DiagnosticsResource<DiagnosticsInformation>;
+}
+/**
+ * The Information tab: the server, the install's other containers, the installed plugins, the server's environment variables and
+ * configuration (secrets withheld by the server), and every installed package. The environment and configuration come from their
+ * own request, so a server that predates them leaves the rest of the tab working and says so in their place.
+ */
+export default function InformationPanel({ versions, plugins, information }: InformationPanelProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/InformationPanel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import ComponentsTable from "./ComponentsTable.js";
+import InstalledPlugins from "./InstalledPlugins.js";
+import PackagesTable from "./PackagesTable.js";
+import ServerVersionCard from "./ServerVersionCard.js";
+import SettingsTable from "./SettingsTable.js";
+/**
+ * The Information tab: the server, the install's other containers, the installed plugins, the server's environment variables and
+ * configuration (secrets withheld by the server), and every installed package. The environment and configuration come from their
+ * own request, so a server that predates them leaves the rest of the tab working and says so in their place.
+ */
+export default function InformationPanel({ versions, plugins, information }) {
+    const { data, error, loading } = versions;
+    return (_jsxs("div", { className: "space-y-6", children: [error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data && (_jsxs(_Fragment, { children: [_jsx(ServerVersionCard, { server: data.server }), _jsx(ComponentsTable, { components: data.components ?? [], kubernetes: data.kubernetes ?? { available: false } }), _jsx(InstalledPlugins, { data: plugins.data, error: plugins.error, loading: plugins.loading }), information.error && _jsx(Alert, { children: information.error }), !information.data && information.loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading the environment\u2026" }), information.data && (_jsxs(_Fragment, { children: [_jsx(SettingsTable, { id: "diagnostics-environment", title: "Environment variables", description: "The server process's environment. Only variables known to be harmless show their value; the value of a secret, or of anything unrecognized, is withheld by the server and never sent.", settings: information.data.environment ?? [] }), _jsx(SettingsTable, { id: "diagnostics-configuration", title: "Configuration", description: "The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Passwords, tokens, keys, certificates and the credentials in URLs are withheld by the server and never sent.", settings: information.data.configuration ?? [] })] })), _jsx(PackagesTable, { packages: data.packages ?? [] })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/SettingsTable.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { DiagnosticsSetting } from "./diagnosticsApi.js";
+/** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
+export declare const SETTINGS_PAGE_SIZE = 100;
+/** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
+export declare const HIDDEN_VALUE = "\u2022\u2022\u2022\u2022 (hidden)";
+export interface SettingsTableProps {
+    /** The section's heading, which also names its filter box and labels the section. */
+    title: string;
+    /** What the section lists, under the heading. */
+    description: string;
+    /** Also the prefix of the heading's element id. */
+    id: string;
+    settings: DiagnosticsSetting[];
+}
+/**
+ * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
+ * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
+ */
+export default function SettingsTable({ title, description, id, settings }: SettingsTableProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/SettingsTable.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useMemo, useState } from "react";
+import Button from "../../../../../lib/components/buttons/Button.js";
+/** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
+export const SETTINGS_PAGE_SIZE = 100;
+/** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
+export const HIDDEN_VALUE = "•••• (hidden)";
+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";
+/**
+ * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
+ * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
+ */
+export default function SettingsTable({ title, description, id, settings }) {
+    const [query, setQuery] = useState("");
+    const [limit, setLimit] = useState(SETTINGS_PAGE_SIZE);
+    const matching = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return settings.filter((item) => needle === "" || `${item.name} ${item.redacted ? "" : (item.value ?? "")}`.toLowerCase().includes(needle));
+    }, [settings, query]);
+    const shown = matching.slice(0, limit);
+    const hiddenCount = settings.filter((item) => item.redacted).length;
+    return (_jsxs("section", { "aria-labelledby": `${id}-heading`, className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: `${id}-heading`, className: "text-base font-bold uppercase tracking-wide mb-1", children: title }), _jsx("p", { className: "mb-3 text-xs text-text-muted", children: description }), _jsx("div", { className: "mb-3", children: _jsx("input", { type: "search", "aria-label": `Filter ${title.toLowerCase()}`, className: INPUT_CLASS, placeholder: "Filter by name or value", value: query, onChange: (event) => {
+                        setQuery(event.target.value);
+                        setLimit(SETTINGS_PAGE_SIZE);
+                    } }) }), _jsx("p", { role: "status", className: "mb-2 text-xs text-text-muted", children: (matching.length === settings.length ? `${settings.length} settings` : `${matching.length} of ${settings.length} settings match`) +
+                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "") }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: settings.length === 0 ? "Nothing is set." : "No settings match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Value"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.redacted ? _jsx("span", { className: "text-text-muted", children: HIDDEN_VALUE }) : item.value })] }, item.name))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + SETTINGS_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.d.ts

@@ -1,5 +1,5 @@
 /**
- * The client of the server's `/admin/diagnostics/*` endpoints (`versions`, `runtime`, `metrics`). All three are GET,
+ * The client of the server's `/admin/diagnostics/*` endpoints (`versions`, `information`, `runtime`, `metrics`). All four are GET,
  * trusted-administrator only and `@RequiresElevation()`: an elevated token is required (403 `api-104`, see
  * `../elevation.ts`), and any other 403 means the caller is not an administrator. The server may leave any optional
  * field out, so a caller reads them defensively.
@@ -62,6 +62,20 @@ export interface DiagnosticsVersions {
         reason?: string;
     };
 }
+/**
+ * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds every secret-like
+ * or unrecognized value and never sends it, so there is nothing for the client to hide.
+ */
+export interface DiagnosticsSetting {
+    name: string;
+    value?: string;
+    redacted: boolean;
+}
+/** The server's environment variables and effective configuration, each sorted by name. */
+export interface DiagnosticsInformation {
+    environment: DiagnosticsSetting[];
+    configuration: DiagnosticsSetting[];
+}
 /** A node that runs some of this install's pods, derived from the pods: nothing else about the node is readable. */
 export interface DiagnosticsNode {
     name: string;
@@ -195,6 +209,11 @@ export interface DiagnosticsMetrics {
 }
 /** What is installed and running: the server process, its packages, and the other containers of the install. */
 export declare function getDiagnosticsVersions(): Promise<DiagnosticsVersions>;
+/**
+ * The server's environment variables and configuration, secrets withheld. A server that predates it answers 404, which the
+ * Information tab reports beside the rest of the tab, which still works.
+ */
+export declare function getDiagnosticsInformation(): Promise<DiagnosticsInformation>;
 /** The Kubernetes version, and the nodes the install's pods run on. */
 export declare function getDiagnosticsRuntime(): Promise<DiagnosticsRuntime>;
 /** One sample of live resource use. Polled by the System tab. */

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.js

@@ -7,6 +7,13 @@ import { apiFetch } from "../../../../../lib/util/api.js";
 export function getDiagnosticsVersions() {
     return apiFetch("/admin/diagnostics/versions");
 }
+/**
+ * The server's environment variables and configuration, secrets withheld. A server that predates it answers 404, which the
+ * Information tab reports beside the rest of the tab, which still works.
+ */
+export function getDiagnosticsInformation() {
+    return apiFetch("/admin/diagnostics/information");
+}
 /** The Kubernetes version, and the nodes the install's pods run on. */
 export function getDiagnosticsRuntime() {
     return apiFetch("/admin/diagnostics/runtime");

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

@@ -0,0 +1,22 @@
+import React from "react";
+export interface CalendarSearchBoxProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Enter: run the search now rather than after the typing pause (and, when it has already run, step on to the next result). */
+    onSubmit: (backwards: boolean) => void;
+    /** The clear button or Escape: leave search mode. */
+    onClear: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    /** Whether a search is running (its query is not blank); the result count and stepping buttons show only then. */
+    active: boolean;
+    /** How many occurrences match. */
+    count: number;
+    /** The current result's place in the list (0-based), `-1` when none is current. */
+    position: number;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/** The text announced (and, compactly, shown) for a search's results. */
+export declare function searchStatusText(count: number, position: number): string;
+/** The calendar toolbar's search: a magnifier, the query, a clear button and - while searching - the match count with Previous/Next match buttons. */
+export default function CalendarSearchBox({ value, onChange, onSubmit, onClear, onPrevious, onNext, active, count, position, inputRef }: CalendarSearchBoxProps): React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineChevronDown, HiOutlineChevronUp, HiOutlineMagnifyingGlass, HiOutlineXMark } from "react-icons/hi2";
+/** The text announced (and, compactly, shown) for a search's results. */
+export function searchStatusText(count, position) {
+    if (count === 0) {
+        return "No matches";
+    }
+    return position >= 0 ? `${position + 1} of ${count}` : `${count} ${count === 1 ? "result" : "results"}`;
+}
+/** The calendar toolbar's search: a magnifier, the query, a clear button and - while searching - the match count with Previous/Next match buttons. */
+export default function CalendarSearchBox({ value, onChange, onSubmit, onClear, onPrevious, onNext, active, count, position, inputRef }) {
+    const status = searchStatusText(count, position);
+    const stepClass = "w-6 h-6 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:hover:bg-transparent";
+    return (_jsxs("div", { role: "search", className: "ml-auto flex items-center gap-1 h-8 px-2 min-w-0 flex-1 md:flex-none md:w-80 rounded-sm border border-border bg-surface focus-within:border-primary", children: [_jsx(HiOutlineMagnifyingGlass, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), _jsx("input", { ref: inputRef, type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        onSubmit(e.shiftKey);
+                    }
+                    else if (e.key === "Escape") {
+                        e.preventDefault();
+                        onClear();
+                    }
+                }, placeholder: "Search events", "aria-label": "Search events", autoComplete: "off", className: "flex-1 min-w-0 bg-transparent text-sm outline-none placeholder:text-text-muted" }), active && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs text-text-muted whitespace-nowrap", children: status }), _jsx("button", { type: "button", className: stepClass, "aria-label": "Previous match", title: "Previous match (Shift+Enter)", disabled: count === 0, onClick: onPrevious, children: _jsx(HiOutlineChevronUp, { size: 16, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: stepClass, "aria-label": "Next match", title: "Next match (Enter)", disabled: count === 0, onClick: onNext, children: _jsx(HiOutlineChevronDown, { size: 16, "aria-hidden": "true" }) })] })), value !== "" && (_jsx("button", { type: "button", className: stepClass, "aria-label": "Clear search", title: "Clear search (Esc)", onClick: onClear, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: active ? status : "" })] }));
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface EventMatchNavProps {
+    onPrevious: () => void;
+    onNext: () => void;
+    /** Whether there is an event before / after this one to go to (default: yes). A button with none is disabled, and its arrow key does nothing. */
+    canPrevious?: boolean;
+    canNext?: boolean;
+    /** What is stepped through, for the buttons' names: the matches of a search, or the events of the calendar. */
+    noun?: "match" | "event";
+}
+/**
+ * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
+ * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
+ * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
+ * a field is taking them.
+ */
+export default function EventMatchNav({ onPrevious, onNext, canPrevious, canNext, noun }: EventMatchNavProps): React.JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect } from "react";
+import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi2";
+import { isTextEntry } from "../../keyboard/targets.js";
+/**
+ * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
+ * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
+ * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
+ * a field is taking them.
+ */
+export default function EventMatchNav({ onPrevious, onNext, canPrevious = true, canNext = true, noun = "match" }) {
+    useEffect(() => {
+        function handleKeyDown(event) {
+            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || isTextEntry(event.target)) {
+                return;
+            }
+            if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+                return;
+            }
+            event.preventDefault();
+            if (event.key === "ArrowLeft" ? canPrevious : canNext) {
+                (event.key === "ArrowLeft" ? onPrevious : onNext)();
+            }
+        }
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [onPrevious, onNext, canPrevious, canNext]);
+    // The card is centered, at most 480px wide (`DETAILS_WIDTH`): 240px either side of the middle, then a gap and the button itself.
+    const buttonClass = "fixed bottom-4 md:bottom-auto md:top-1/2 md:-translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-surface border border-border shadow-modal text-text-muted";
+    const enabledClass = "hover:bg-surface-alt hover:text-text";
+    const disabledClass = "opacity-40 cursor-not-allowed";
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": `Previous ${noun}`, "aria-disabled": canPrevious ? undefined : true, title: `Previous ${noun} (Left arrow)`, onClick: canPrevious ? onPrevious : undefined, className: `${buttonClass} ${canPrevious ? enabledClass : disabledClass} left-4 md:left-[calc(50vw-296px)]`, children: _jsx(HiOutlineChevronLeft, { size: 20, "aria-hidden": "true" }) }), _jsx("button", { type: "button", "aria-label": `Next ${noun}`, "aria-disabled": canNext ? undefined : true, title: `Next ${noun} (Right arrow)`, onClick: canNext ? onNext : undefined, className: `${buttonClass} ${canNext ? enabledClass : disabledClass} right-4 md:right-[calc(50vw-296px)]`, children: _jsx(HiOutlineChevronRight, { size: 20, "aria-hidden": "true" }) })] }));
+}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Mailbox } from "../../../../lib/mail/mailApi.js";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { EventAnchor } from "./EventShell.js";
+import { SlideFrom } from "./SlideIn.js";
 export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
 export type { EventAnchor } from "./EventShell.js";
 export interface EventModalProps {
@@ -48,6 +49,21 @@ export interface EventModalProps {
     /** Where the booking plugin's Settings pages are (`/settings/booking-types`) when it is running: a new event then has an Appointment
      * schedule tab, and its More options opens the plugin's own new-link page. Without it there are only the Event and Task tabs. */
     bookingHref?: string;
+    /** The existing event's card gets Previous / Next buttons either side, which call these: the previous or next match while the calendar's
+     * search is running, the previous or next event otherwise (`canPrevious` / `canNext` false: none that way, so the button is disabled). */
+    matchNav?: {
+        onPrevious: () => void;
+        onNext: () => void;
+        canPrevious?: boolean;
+        canNext?: boolean;
+        noun?: "match" | "event";
+        /** The step that moved the card on, if one did: the card slides in from the side it came from - left for a Previous, right for a Next - when
+         * `occurrenceKey` is the event now showing (a card that changed any other way does not slide). */
+        slide?: {
+            from: SlideFrom;
+            occurrenceKey: string;
+        };
+    };
     onSaved: () => void;
     onDeleted: () => void;
 }
@@ -66,4 +82,4 @@ export interface EventModalProps {
  * Editing or deleting a recurring event's occurrence offers a choice between "this event" and "the entire series" (see
  * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, onSaved, onDeleted, }: EventModalProps): React.JSX.Element | null;
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }: EventModalProps): React.JSX.Element | null;

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

@@ -9,7 +9,9 @@ import Button from "../../../../lib/components/buttons/Button.js";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
+import EventMatchNav from "./EventMatchNav.js";
 import EventShell from "./EventShell.js";
+import SlideIn from "./SlideIn.js";
 export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
 /** How wide each face of the dialog gets, in px. */
 const QUICK_WIDTH = 450;
@@ -31,7 +33,7 @@ const TASK_FORM_WIDTH = 560;
  * Editing or deleting a recurring event's occurrence offers a choice between "this event" and "the entire series" (see
  * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, onSaved, onDeleted, }) {
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, matchNav, onSaved, onDeleted, }) {
     const isMobile = useIsMobile();
     // An existing event: Modify was pressed. A new event: More options was.
     const [editing, setEditing] = useState(false);
@@ -63,14 +65,14 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const width = !isForm ? DETAILS_WIDTH : layout === "expanded" ? (tab === "event" || occurrence ? FORM_WIDTH : TASK_FORM_WIDTH) : QUICK_WIDTH;
     // Leaving the form: an existing event goes back to its details, a new one is done.
     const leaveForm = occurrence ? () => setEditing(false) : onClose;
-    return (_jsx(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? leaveForm : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
-                ? undefined
-                : {
-                    tab,
-                    onTabChange: (next) => {
-                        setTab(next);
-                        setExpanded(false);
-                    },
-                    bookingHref,
-                } })) : (_jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted })) }));
+    return (_jsxs(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? leaveForm : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: [isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
+                    ? undefined
+                    : {
+                        tab,
+                        onTabChange: (next) => {
+                            setTab(next);
+                            setExpanded(false);
+                        },
+                        bookingHref,
+                    } })) : (_jsx(SlideIn, { from: matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined, children: _jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted }) }, occurrence.occurrenceKey)), !isForm && matchNav && _jsx(EventMatchNav, { onPrevious: matchNav.onPrevious, onNext: matchNav.onNext, canPrevious: matchNav.canPrevious, canNext: matchNav.canNext, noun: matchNav.noun })] }));
 }

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
+/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+export declare const LIST_MAX_DAYS_PER_EVENT = 366;
+/** A step through the list's months: `nonce` makes a second press in the same direction a new step. */
+export interface ListStep {
+    direction: 1 | -1;
+    nonce: number;
+}
+export interface ListViewProps {
+    /** Every occurrence to list (or, while a search runs, only its matches) - see `eventSearch.ts`'s `allOccurrences()`. Only today and later is shown. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` - see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** The day the list scrolls to (the first day from it that has events - the top for one in the past -, the last day when none does) on opening and whenever `jumpNonce` changes. */
+    focusDate: Date;
+    jumpNonce: number;
+    /** Scrolls to the first day of the previous or next month (from the one at the top) that has events. */
+    step: ListStep | null;
+}
+/**
+ * Every event from today on as one scrollable list, in date order, with a heading and a list for each day that has any (days without events are left out, and
+ * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
+ * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
+ *
+ * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
+ * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ */
+export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps): React.JSX.Element;

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

@@ -0,0 +1,111 @@
+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, useRef } from "react";
+import { addDays, format, isToday, parseISO, startOfDay } from "date-fns";
+import { allDayDateKey, localDateKey, startsOnDay } from "./allDay.js";
+import { occurrenceMarker, useActiveOccurrenceKey } from "./activeOccurrence.js";
+/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+export const LIST_MAX_DAYS_PER_EVENT = 366;
+/** When an occurrence is on show on `day`: its time range, "All day", or - on a later day of a multi-day event - that it continues. */
+function timeLabel(occurrence, day) {
+    if (occurrence.allDay) {
+        return "All day";
+    }
+    if (!startsOnDay(occurrence, day)) {
+        return "Continues";
+    }
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    return start.getTime() === end.getTime() ? format(start, "h:mma") : `${format(start, "h:mma")} – ${format(end, "h:mma")}`;
+}
+/** The days (local midnights) `occurrence` is on show on: from its first to its last, at most `LIST_MAX_DAYS_PER_EVENT`. */
+function daysOf(occurrence) {
+    let first;
+    let last;
+    if (occurrence.allDay) {
+        // Date-only, the end exclusive (see `allDay.ts`), and at least the start day.
+        first = parseISO(allDayDateKey(occurrence.startDate));
+        last = addDays(parseISO(allDayDateKey(occurrence.endDate)), -1);
+    }
+    else {
+        const start = new Date(occurrence.startDate);
+        const end = new Date(occurrence.endDate);
+        first = startOfDay(start);
+        // An event that ends at midnight does not reach into that day.
+        last = startOfDay(end > start ? new Date(end.getTime() - 1) : start);
+    }
+    const days = [first];
+    for (let day = addDays(first, 1); day <= last && days.length < LIST_MAX_DAYS_PER_EVENT; day = addDays(day, 1)) {
+        days.push(day);
+    }
+    return days;
+}
+/** The day's rows in the order they are read: the all-day events and those carried over from an earlier day, then the timed ones as they start. */
+function sortedForDay(occurrences, day) {
+    const rank = (occurrence) => (occurrence.allDay || !startsOnDay(occurrence, day) ? 0 : 1);
+    return occurrences.sort((a, b) => rank(a) - rank(b) || new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+}
+/**
+ * Every event from today on as one scrollable list, in date order, with a heading and a list for each day that has any (days without events are left out, and
+ * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
+ * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
+ *
+ * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
+ * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ */
+export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }) {
+    const activeKey = useActiveOccurrenceKey();
+    const scrollerRef = useRef(null);
+    const groups = useMemo(() => {
+        const byDay = new Map();
+        const todayKey = localDateKey(new Date());
+        for (const occurrence of occurrences) {
+            for (const day of daysOf(occurrence)) {
+                const key = localDateKey(day);
+                // The days an event spent before today are not listed.
+                if (key < todayKey) {
+                    continue;
+                }
+                const group = byDay.get(key) ?? { day, items: [] };
+                group.items.push(occurrence);
+                byDay.set(key, group);
+            }
+        }
+        return Array.from(byDay.entries())
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([key, { day, items }]) => ({ key, day, items: sortedForDay(items, day) }));
+    }, [occurrences]);
+    const dayElements = () => Array.from(scrollerRef.current.querySelectorAll("[data-day]"));
+    // On opening and on a jump (Today, a date picked in the mini calendar): the first day from `focusDate` that has events, else the last one.
+    useEffect(() => {
+        const wanted = localDateKey(focusDate);
+        const days = dayElements();
+        (days.find((el) => el.dataset.day >= wanted) ?? days[days.length - 1])?.scrollIntoView({ block: "start" });
+    }, [jumpNonce]);
+    // A step: from the month of the day at the top of the list to the first day of the previous or next month that has any.
+    useEffect(() => {
+        const days = dayElements();
+        if (!step || days.length === 0) {
+            return;
+        }
+        const top = scrollerRef.current.getBoundingClientRect().top;
+        const current = days.find((el) => el.getBoundingClientRect().bottom > top) ?? days[days.length - 1];
+        const months = Array.from(new Set(days.map((el) => el.dataset.day.slice(0, 7))));
+        const month = months[months.indexOf(current.dataset.day.slice(0, 7)) + step.direction];
+        // Past the first or last month with events there is nowhere to go.
+        days.find((el) => el.dataset.day.startsWith(month))?.scrollIntoView({ block: "start" });
+    }, [step]);
+    const thisYear = new Date().getFullYear();
+    return (_jsx("div", { ref: scrollerRef, role: "region", "aria-label": "List", "data-calendar-scroller": true, className: "flex-1 min-h-0 overflow-y-auto", children: groups.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No upcoming events" })) : (groups.map(({ key, day, items }) => (_jsxs("section", { "data-day": key, "aria-labelledby": `list-day-${key}`, children: [_jsxs("h3", { id: `list-day-${key}`, "aria-current": isToday(day) ? "date" : undefined, className: [
+                        "sticky top-0 z-10 px-4 py-2 text-sm font-semibold border-b border-border bg-surface-alt text-text border-l-4",
+                        isToday(day) ? "border-l-primary" : "border-l-transparent",
+                    ].join(" "), children: [format(day, day.getFullYear() === thisYear ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy"), isToday(day) && (_jsx("span", { "aria-hidden": "true", className: "ml-2 px-1.5 py-0.5 rounded-full bg-primary/15 text-primary-dark text-xs font-medium", children: "Today" }))] }), _jsx("ul", { children: items.map((occurrence) => (_jsx(ListRow, { occurrence: occurrence, day: day, color: folderColors[occurrence.folderUid], onSelect: onSelectEvent, activeKey: activeKey }, occurrence.occurrenceKey))) })] }, key)))) }));
+}
+function ListRow({ occurrence, day, color, onSelect, activeKey, }) {
+    const marker = occurrenceMarker(activeKey, occurrence);
+    const place = occurrence.location || occurrence.organizer.displayName || occurrence.organizer.address;
+    return (_jsx("li", { className: "border-b border-border/50", children: _jsxs("button", { type: "button", ...marker.attrs, onClick: () => onSelect(occurrence), className: ["w-full min-h-14 px-4 py-2 flex items-center gap-3 text-left hover:bg-surface-alt", marker.className].join(" "), children: [_jsx("span", { className: "w-28 shrink-0 text-xs text-text-muted", children: timeLabel(occurrence, day) }), _jsx("span", { "aria-hidden": "true", className: ["w-3 h-3 rounded-full shrink-0", occurrence.busyStatus === "free" ? "border-2" : ""].join(" "), style: occurrence.busyStatus === "free" ? { borderColor: color } : { backgroundColor: color } }), _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-sm font-medium truncate", children: occurrence.title }), _jsx("span", { className: "block text-xs text-text-muted truncate", children: place })] })] }) }));
+}