@rapidmx/web-client 0.10.0 → 0.12.0

package/dist/apps/shared/components/layout/RailIcon.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+/** The side, in CSS pixels, of the square the icon is fitted into and measured in: the rail is 4rem wide and the title bar 4rem tall, each less its 1px border. */
+const SIZE = 63;
+/** Pixels this transparent or less count as empty. */
+const EMPTY_ALPHA = 24;
+/** The number of rows at the top of `size` x `size` RGBA pixel data that are empty - the icon's own margin above its first visible pixel. */
+export function emptyRowsAtTop(rgba, size) {
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            if (rgba[(y * size + x) * 4 + 3] > EMPTY_ALPHA) {
+                return y;
+            }
+        }
+    }
+    return 0;
+}
+/** Whether this environment can decode an image and read it back - not a server, and not jsdom, where there is nothing to measure. */
+export function canMeasureImages() {
+    try {
+        return typeof new Image().decode === "function";
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * How many pixels of empty margin an icon has above its first visible pixel when fitted (`object-fit: contain`) into a `SIZE` square.
+ * Drawn on a canvas and read back, so it works for any picture the browser can decode from the same origin (or with CORS); `0` where
+ * that isn't possible (no canvas, a picture that won't load, one from another origin that taints the canvas).
+ */
+export async function measureTopMargin(src) {
+    try {
+        const image = new Image();
+        image.src = src;
+        await image.decode();
+        const canvas = document.createElement("canvas");
+        canvas.width = SIZE;
+        canvas.height = SIZE;
+        const context = canvas.getContext("2d", { willReadFrequently: true });
+        if (!context || !image.naturalWidth || !image.naturalHeight) {
+            return 0;
+        }
+        const scale = Math.min(SIZE / image.naturalWidth, SIZE / image.naturalHeight);
+        const width = image.naturalWidth * scale;
+        const height = image.naturalHeight * scale;
+        context.drawImage(image, (SIZE - width) / 2, (SIZE - height) / 2, width, height);
+        return emptyRowsAtTop(context.getImageData(0, 0, SIZE, SIZE).data, SIZE);
+    }
+    catch {
+        return 0;
+    }
+}
+/**
+ * The deployment's icon at the top of an app rail (`AppShell`, `AdminShell`, `EscrowShell`): a block as wide as the rail and as tall as the
+ * title bar beside it (4rem), flush with the top and left edges of the window - no padding above it - with the bar's own bottom border
+ * continued under it, so the two read as one block. The picture is fitted inside the block, never cropped, and raised by whatever empty
+ * margin the file itself has above its artwork, so the first visible pixel is at the very top of the window (a logo exported with 6% of
+ * air around it would otherwise still leave a gap). The icon is shown once measured (a few milliseconds after it loads).
+ */
+export default function RailIcon({ src }) {
+    const [margin, setMargin] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        if (!canMeasureImages()) {
+            // Nothing to measure with: show the icon as it is (in the same effect pass, so nothing waits and nothing updates later).
+            setMargin(0);
+            return;
+        }
+        setMargin(null);
+        void measureTopMargin(src).then((measured) => {
+            if (!cancelled) {
+                setMargin(measured);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return (_jsx("div", { className: "h-16 w-full shrink-0 overflow-hidden border-b border-border mb-2", "data-rail-icon": "", children: _jsx("img", { src: src, width: "64", height: "64", alt: "", className: "block h-full w-full object-contain", style: { transform: margin ? `translateY(-${margin}px)` : undefined, opacity: margin === null ? 0 : 1 } }) }));
+}

package/dist/apps/shared/components/layout/ResponsiveToolbar.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode } from "react";
+import type { IconType } from "react-icons";
+/** One button of a `ResponsiveToolbar`. */
+export interface ToolbarAction {
+    id: string;
+    /** The visible caption while there is room, else the tooltip and the accessible name. */
+    label: string;
+    icon: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    /** A toggle: the button's pressed state. */
+    pressed?: boolean;
+    /** `title` and `aria-keyshortcuts` for a button with a shortcut - kept as given, whatever the layout. */
+    hint?: {
+        title: string;
+        "aria-keyshortcuts"?: string;
+    };
+    /** Actions with the same `group` sit together; a divider goes between groups. */
+    group: number;
+    /** Which goes into the "More" menu first when there is not room: the lowest number first. Never used for `essential`. */
+    rank: number;
+    /** Never moves into the "More" menu (the primary action). */
+    essential?: boolean;
+}
+/** Room (px) each kind of button takes, and what the bar spends on its padding, a divider and the "More" button - the layout is computed from them
+ * rather than measured, so the first paint on the client is already right and nothing jumps. */
+export declare const LABELLED_BUTTON_WIDTH = 64;
+export declare const ICON_BUTTON_WIDTH = 36;
+export interface ToolbarLayout {
+    /** Captions under the icons. */
+    labels: boolean;
+    /** The ids of the actions shown as buttons, in order. The rest are in the "More" menu. */
+    visible: string[];
+}
+/**
+ * Which buttons a bar of `width` px shows, and how: every one with its caption when that fits; else every one as an icon (the captions go first);
+ * else as many icons as fit, the least important (`rank`) going into a "More" menu one at a time - the essential ones stay whatever the width.
+ * Pure, so it is the same on the server and the client for a given width; `width === undefined` (not measured yet, no ResizeObserver) shows
+ * everything.
+ */
+export declare function layoutToolbar(actions: ToolbarAction[], width: number | undefined): ToolbarLayout;
+/** The width of `ref`'s element, kept current with a ResizeObserver; `undefined` until measured (and where there is no ResizeObserver). */
+export declare function useElementWidth(ref: React.RefObject<HTMLElement | null>): number | undefined;
+/**
+ * A toolbar that fits the column it is in - never wider, never over another pane. It measures its own width (`ResizeObserver`) and shows every
+ * action with a caption when there is room; when there is not, the captions go first (each button keeps its tooltip and accessible name), then the
+ * least important actions move into a "More" menu (`layoutToolbar()`). Arrow keys, Home and End move between the buttons; the menu is a real
+ * `role="menu"`. `children` (a hidden file input, say) are rendered inside the toolbar's element but take no room.
+ */
+export default function ResponsiveToolbar({ label, actions, leading, children }: {
+    label: string;
+    actions: ToolbarAction[];
+    leading?: ReactNode;
+    children?: ReactNode;
+}): React.JSX.Element;

package/dist/apps/shared/components/layout/ResponsiveToolbar.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+/** Room (px) each kind of button takes, and what the bar spends on its padding, a divider and the "More" button - the layout is computed from them
+ * rather than measured, so the first paint on the client is already right and nothing jumps. */
+export const LABELLED_BUTTON_WIDTH = 64;
+export const ICON_BUTTON_WIDTH = 36;
+const BAR_PADDING = 16;
+const DIVIDER_WIDTH = 9;
+function widthOf(actions, perButton, more) {
+    const groups = new Set(actions.map((action) => action.group)).size;
+    return BAR_PADDING + actions.length * perButton + Math.max(0, groups - 1) * DIVIDER_WIDTH + (more ? perButton : 0);
+}
+/**
+ * Which buttons a bar of `width` px shows, and how: every one with its caption when that fits; else every one as an icon (the captions go first);
+ * else as many icons as fit, the least important (`rank`) going into a "More" menu one at a time - the essential ones stay whatever the width.
+ * Pure, so it is the same on the server and the client for a given width; `width === undefined` (not measured yet, no ResizeObserver) shows
+ * everything.
+ */
+export function layoutToolbar(actions, width) {
+    const ordered = [...actions].sort((a, b) => a.group - b.group);
+    const all = ordered.map((action) => action.id);
+    if (width === undefined) {
+        return { labels: true, visible: all };
+    }
+    if (widthOf(ordered, LABELLED_BUTTON_WIDTH, false) <= width) {
+        return { labels: true, visible: all };
+    }
+    if (widthOf(ordered, ICON_BUTTON_WIDTH, false) <= width) {
+        return { labels: false, visible: all };
+    }
+    // Not everything fits: the least important actions go into "More" one at a time, until what is left and the "More" button do.
+    let shown = ordered;
+    for (const dropped of ordered.filter((action) => !action.essential).sort((x, y) => x.rank - y.rank)) {
+        if (widthOf(shown, ICON_BUTTON_WIDTH, true) <= width) {
+            break;
+        }
+        shown = shown.filter((action) => action !== dropped);
+    }
+    return { labels: false, visible: shown.map((action) => action.id) };
+}
+/** The width of `ref`'s element, kept current with a ResizeObserver; `undefined` until measured (and where there is no ResizeObserver). */
+export function useElementWidth(ref) {
+    const [width, setWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        setWidth(element.getBoundingClientRect().width);
+        const observer = new ResizeObserver((entries) => {
+            const box = entries[0]?.contentRect.width;
+            if (box !== undefined) {
+                setWidth(Math.round(box));
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+function ToolbarButton({ action, labels }) {
+    const Icon = action.icon;
+    return (_jsxs("button", { type: "button", onClick: action.onClick, disabled: action.disabled, "aria-pressed": action.pressed, 
+        // A tooltip when the caption is not on show (the shortcut's own title, when it has one, wins).
+        title: action.hint?.title ?? (labels ? undefined : action.label), "aria-keyshortcuts": action.hint?.["aria-keyshortcuts"], "data-toolbar-item": "", className: [
+            "flex shrink-0 flex-col items-center justify-center gap-1 rounded-sm text-xs disabled:opacity-40 disabled:cursor-not-allowed",
+            labels ? "w-16 py-1.5" : "h-9 w-9",
+            action.pressed ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text",
+        ].join(" "), children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { className: labels ? "leading-tight text-center" : "sr-only", children: action.label })] }));
+}
+/** The menu that holds what does not fit: a button, and a portalled `role="menu"` so nothing clips it. Arrow keys, Home, End and Escape; focus returns to the button. */
+function MoreMenu({ actions }) {
+    const [open, setOpen] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!open) {
+            setAnchor(null);
+            return;
+        }
+        function place() {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setAnchor({ right: Math.max(8, window.innerWidth - rect.right), top: rect.bottom + 4 });
+        }
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open]);
+    // On open, the first item that can be used gets the focus.
+    useEffect(() => {
+        if (open && anchor) {
+            menuRef.current?.querySelector('[role="menuitem"]:not(:disabled)')?.focus();
+        }
+    }, [open, anchor !== null]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function handlePointerDown(event) {
+            if (event.target instanceof Node && !buttonRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [open]);
+    function close(refocus) {
+        setOpen(false);
+        if (refocus) {
+            buttonRef.current?.focus();
+        }
+    }
+    function handleMenuKeyDown(event) {
+        const items = Array.from(menuRef.current.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        const index = items.indexOf(document.activeElement);
+        const focusAt = (next) => {
+            event.preventDefault();
+            items[(next + items.length) % items.length]?.focus();
+        };
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        }
+        else if (event.key === "ArrowDown") {
+            focusAt(index + 1);
+        }
+        else if (event.key === "ArrowUp") {
+            focusAt(index - 1);
+        }
+        else if (event.key === "Home") {
+            focusAt(0);
+        }
+        else if (event.key === "End") {
+            focusAt(items.length - 1);
+        }
+        else if (event.key === "Tab") {
+            close(false);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: buttonRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": "More actions", title: "More actions", "data-toolbar-item": "", onClick: () => setOpen((current) => !current), onKeyDown: (event) => {
+                    if (event.key === "ArrowDown" && !open) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, className: [
+                    "flex h-9 w-9 shrink-0 items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text",
+                    open ? "bg-surface-alt text-text" : "",
+                ].join(" "), children: _jsx(HiOutlineEllipsisHorizontal, { size: 18, "aria-hidden": "true" }) }), open &&
+                anchor &&
+                createPortal(_jsx("div", { ref: menuRef, role: "menu", "aria-label": "More actions", onKeyDown: handleMenuKeyDown, style: { position: "fixed", right: anchor.right, top: anchor.top }, className: "z-[70] w-52 max-w-[calc(100vw-1rem)] rounded-md border border-border bg-surface py-1.5 shadow-modal", children: actions.map((action) => {
+                        const Icon = action.icon;
+                        return (_jsxs("button", { type: "button", role: "menuitem", disabled: action.disabled, title: action.hint?.title, "aria-keyshortcuts": action.hint?.["aria-keyshortcuts"], onClick: () => {
+                                close(true);
+                                action.onClick();
+                            }, className: "flex w-full items-center gap-3 px-3.5 py-2 text-left text-sm text-text hover:not-disabled:bg-surface-alt focus-visible:bg-surface-alt disabled:cursor-not-allowed disabled:opacity-40", children: [_jsx(Icon, { size: 18, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), action.label] }, action.id));
+                    }) }), document.body)] }));
+}
+/**
+ * A toolbar that fits the column it is in - never wider, never over another pane. It measures its own width (`ResizeObserver`) and shows every
+ * action with a caption when there is room; when there is not, the captions go first (each button keeps its tooltip and accessible name), then the
+ * least important actions move into a "More" menu (`layoutToolbar()`). Arrow keys, Home and End move between the buttons; the menu is a real
+ * `role="menu"`. `children` (a hidden file input, say) are rendered inside the toolbar's element but take no room.
+ */
+export default function ResponsiveToolbar({ label, actions, leading, children }) {
+    const ref = useRef(null);
+    const width = useElementWidth(ref);
+    const layout = layoutToolbar(actions, width);
+    const ordered = [...actions].sort((a, b) => a.group - b.group);
+    const shown = ordered.filter((action) => layout.visible.includes(action.id));
+    const hidden = ordered.filter((action) => !layout.visible.includes(action.id));
+    function handleKeyDown(event) {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) || event.target.closest('[role="menu"]')) {
+            return;
+        }
+        const items = Array.from(ref.current.querySelectorAll("[data-toolbar-item]:not(:disabled)"));
+        const index = items.indexOf(event.target);
+        if (index === -1) {
+            return;
+        }
+        event.preventDefault();
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index + (event.key === "ArrowRight" ? 1 : -1);
+        items[(next + items.length) % items.length].focus();
+    }
+    return (_jsxs("div", { ref: ref, role: "toolbar", "aria-label": label, onKeyDown: handleKeyDown, 
+        // `overflow-x-clip` is the guarantee: whatever the layout says, the bar can never paint outside its own column.
+        className: "flex min-w-0 items-stretch gap-0.5 overflow-x-clip border-b border-border bg-surface-alt px-2 py-1", children: [leading, shown.map((action, index) => (_jsxs(React.Fragment, { children: [index > 0 && shown[index - 1].group !== action.group && _jsx("div", { className: "my-1 w-px shrink-0 self-stretch bg-border", "aria-hidden": "true" }), _jsx(ToolbarButton, { action: action, labels: layout.labels })] }, action.id))), hidden.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 w-px shrink-0 self-stretch bg-border", "aria-hidden": "true" }), _jsx(MoreMenu, { actions: hidden })] })), children] }));
+}

package/dist/apps/shared/components/layout/ThemeSwitch.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * The account menu's colour scheme control: a row "Theme" with a three-way segmented control of icon buttons - System, Light, Dark - a
+ * `radiogroup` (one tab stop, the arrow keys move and choose, Home/End jump). A choice applies through `useAppearance().setPrefs()`, which
+ * changes every open surface in the same frame (the app frame, message cards, the consoles) and saves in the background - and puts the change
+ * back, with a notice, if the save fails. Renders nothing where there is no `AppearanceProvider` (a shell that has none, a component tested
+ * alone): the hook is inert there and a control that changes nothing would be a lie.
+ */
+export default function ThemeSwitch(): React.JSX.Element | null;

package/dist/apps/shared/components/layout/ThemeSwitch.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useContext, useId, useRef } from "react";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import { AppearanceContext, INERT_APPEARANCE } from "../../appearance/appearanceContext.js";
+const CHOICES = [
+    { mode: "system", label: "System", hint: "System - follow this device", Icon: HiOutlineComputerDesktop },
+    { mode: "light", label: "Light", hint: "Light", Icon: HiOutlineSun },
+    { mode: "dark", label: "Dark", hint: "Dark", Icon: HiOutlineMoon },
+];
+/**
+ * The account menu's colour scheme control: a row "Theme" with a three-way segmented control of icon buttons - System, Light, Dark - a
+ * `radiogroup` (one tab stop, the arrow keys move and choose, Home/End jump). A choice applies through `useAppearance().setPrefs()`, which
+ * changes every open surface in the same frame (the app frame, message cards, the consoles) and saves in the background - and puts the change
+ * back, with a notice, if the save fails. Renders nothing where there is no `AppearanceProvider` (a shell that has none, a component tested
+ * alone): the hook is inert there and a control that changes nothing would be a lie.
+ */
+export default function ThemeSwitch() {
+    const appearance = useContext(AppearanceContext);
+    const buttons = useRef([]);
+    const labelId = useId();
+    if (appearance === INERT_APPEARANCE) {
+        return null;
+    }
+    const current = appearance.prefs.mode;
+    function choose(index, focus) {
+        const next = CHOICES[(index + CHOICES.length) % CHOICES.length];
+        if (next.mode !== current) {
+            appearance.setPrefs({ mode: next.mode });
+        }
+        if (focus) {
+            buttons.current[(index + CHOICES.length) % CHOICES.length]?.focus();
+        }
+    }
+    function handleKeyDown(event, index) {
+        const target = { ArrowRight: index + 1, ArrowDown: index + 1, ArrowLeft: index - 1, ArrowUp: index - 1, Home: 0, End: CHOICES.length - 1 }[event.key];
+        if (target !== undefined) {
+            event.preventDefault();
+            choose(target, true);
+        }
+    }
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border", children: [_jsx("span", { id: labelId, className: "text-sm text-text", children: "Theme" }), _jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "inline-flex rounded-sm border border-border bg-surface-alt p-0.5", children: CHOICES.map(({ mode, label, hint, Icon }, index) => {
+                    const selected = mode === current;
+                    return (_jsx("button", { ref: (element) => {
+                            buttons.current[index] = element;
+                        }, type: "button", role: "radio", "aria-checked": selected, "aria-label": label, title: hint, tabIndex: selected ? 0 : -1, onClick: () => choose(index, false), onKeyDown: (event) => handleKeyDown(event, index), className: [
+                            "flex h-7 w-8 items-center justify-center rounded-[3px] focus-visible:outline-2 focus-visible:outline-primary",
+                            selected ? "bg-surface text-primary-dark shadow-sm" : "text-text-muted hover:text-text",
+                        ].join(" "), children: _jsx(Icon, { size: 16, "aria-hidden": "true" }) }, mode));
+                }) })] }));
+}

package/dist/apps/shared/components/layout/UserMenu.d.ts

@@ -28,6 +28,12 @@ export interface UserMenuProps {
     /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too). For the shells that have the
      * keyboard layer (`AppChrome`); the consoles don't offer it. */
     onShowShortcuts?: () => void;
+    /** Which way the menu opens from its button: `"down"` (the default; in a header) or `"up"` (in a footer, where there is no room below). */
+    placement?: "down" | "up";
+    /** Shows a "Recent notifications" item that calls this - opening the history of the last pop-ups (`AppChrome` only). */
+    onShowNotifications?: () => void;
+    /** Errors in that history nobody has looked at yet: a count beside the item, and a dot on the menu button. */
+    unseenErrors?: number;
 }
 /**
  * The top-right "who am I" menu shared by every shell (`AppShell`, `AdminShell`, `EscrowShell`): an avatar-button
@@ -39,4 +45,4 @@ export interface UserMenuProps {
  * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
  * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, }: UserMenuProps): React.JSX.Element;
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, placement, onShowNotifications, unseenErrors, }: UserMenuProps): React.JSX.Element;

package/dist/apps/shared/components/layout/UserMenu.js

@@ -3,7 +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 { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
@@ -12,6 +13,7 @@ import { ariaKeyShortcuts } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 import { SETTINGS_HREF } from "../../navigation/appHrefs.js";
+import ThemeSwitch from "./ThemeSwitch.js";
 import { desktopPermission, getNewMailPopupsEnabled, requestDesktopPermission, setDesktopOfferDismissed, setNewMailPopupsEnabled, } from "../../mail/newMailNotifications.js";
 function Avatar({ profile, initials, large }) {
     const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
@@ -30,9 +32,13 @@ function Avatar({ profile, initials, large }) {
  * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
  * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, }) {
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, unseenErrors = 0, }) {
     const env = useKeyEnvironment();
     const [open, setOpen] = useState(false);
+    // Where the menu sits, in window coordinates: it is drawn through a portal into `<body>` with `position: fixed`, so no ancestor's
+    // `overflow`, `z-index` or stacking context - a custom branding header's, say - can clip it or put it behind the page.
+    const [anchor, setAnchor] = useState(null);
+    const menuRef = useRef(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState("unsupported");
@@ -106,7 +112,11 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             return;
         }
         function handlePointerDown(e) {
-            if (containerRef.current && e.target instanceof Node && !containerRef.current.contains(e.target)) {
+            // The menu is portalled out of the container, so it and the button are checked separately.
+            if (containerRef.current &&
+                e.target instanceof Node &&
+                !containerRef.current.contains(e.target) &&
+                !menuRef.current?.contains(e.target)) {
                 setOpen(false);
             }
         }
@@ -122,11 +132,35 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [open]);
+    // Measured before paint, and again whenever the window resizes or anything scrolls (a footer's button moves with the page).
+    useLayoutEffect(() => {
+        if (!open) {
+            setAnchor(null);
+            return;
+        }
+        function place() {
+            const rect = containerRef.current.getBoundingClientRect();
+            const right = Math.max(8, window.innerWidth - rect.right);
+            setAnchor(placement === "up" ? { right, bottom: window.innerHeight - rect.top + 8 } : { right, top: rect.bottom + 8 });
+        }
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open, placement]);
     const name = formatProfileName(profile) ?? username ?? userUid;
     const initials = profileInitials(profile, userUid, username);
     const accountUrl = accountUrlOf(authServerUrl);
-    return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && (_jsxs("div", { role: "menu", className: "absolute right-0 top-full mt-2 w-60 bg-surface border border-border rounded-md shadow-modal py-1.5 z-10", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "New mail pop-ups" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowShortcuts && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
-                            setOpen(false);
-                            onShowShortcuts();
-                        }, className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Keyboard shortcuts" })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _jsx("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "block w-full text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Sign Out" })] }))] }));
+    return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "relative flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), unseenErrors > 0 && (_jsx("span", { "data-testid": "unseen-errors-dot", "aria-hidden": "true", className: "absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full border-2 border-surface bg-danger" })), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open &&
+                anchor &&
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "New mail pop-ups" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                                setOpen(false);
+                                onShowNotifications();
+                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Recent notifications" }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
+                                setOpen(false);
+                                onShowShortcuts();
+                            }, className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Keyboard shortcuts" })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _jsx("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "block w-full text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Sign Out" })] }), document.body)] }));
 }

package/dist/apps/shared/components/mail/ConversationList.js

@@ -8,6 +8,7 @@ import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
+import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
 /** Every participant as `Name <address>`, for the tooltip and the accessible text of the "+N" a crowded row folds them into. */
@@ -78,10 +79,10 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${id}`;
             const ticked = selectedConversationIds?.has(id) ?? false;
-            return (_jsxs("li", { children: [_jsxs("div", { "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
+            return (_jsxs("li", { children: [_jsxs("div", { "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
                                 const message = messageOverrides?.[fetched.uid] ?? fetched;
                                 const messageUnread = isUnread(message);
-                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] })] }, message.uid));
+                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] })] }, message.uid));
                             })] })] }, id));
         }) }));
 }

package/dist/apps/shared/components/mail/ConversationThreadPane.d.ts

@@ -46,7 +46,8 @@ export interface ConversationThreadPaneProps {
     shortcuts?: boolean;
 }
 /**
- * The reading pane for the conversation list: the whole thread, **newest at the top**, opened at the message
+ * The reading pane for the conversation list: the conversation's subject in a card of its own, pinned at the top, and under it the whole thread as
+ * a stack of message cards (each exactly as tall as its message; the list scrolls as a whole), **newest at the top**, opened at the message
  * the reader picked. Every message from that one through to the newest is expanded - which in this order is
  * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
  * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just