@rapidmx/web-client 0.10.0 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -7,14 +7,11 @@ import { useRef } from "react";
 import { HiOutlineArrowDownTray, HiOutlineArrowUpTray, HiOutlineEnvelope, HiOutlinePencil, HiOutlineStar, HiOutlineTag, HiOutlineTrash, HiOutlineUserPlus, HiStar, } from "react-icons/hi2";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
-function ToolbarButton({ label, icon: Icon, disabled, onClick, hint, }) {
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, ...hint, className: "flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt", children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
-}
-function Divider() {
-    return _jsx("div", { className: "w-px self-stretch my-1 bg-border", "aria-hidden": "true" });
-}
+import ResponsiveToolbar from "../layout/ResponsiveToolbar.js";
 /**
- * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
+ * alone, then the rarely used actions - Import, Export, Add category, and so on up - in a "More" menu; the bar can never spill into the pane
+ * beside it. Every button keeps its tooltip (New contact its shortcut's) and accessible name in every layout. Deliberately presentational — every action is a callback the
  * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
  * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
  * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
@@ -31,5 +28,23 @@ export default function ContactsToolbar({ selectedCount, allSelectedFavorited, o
             onImportFile(file);
         }
     }
-    return (_jsxs("div", { role: "toolbar", "aria-label": "Contacts actions", className: "border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1", children: [_jsx(ToolbarButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Edit", icon: HiOutlinePencil, disabled: selectedCount !== 1, onClick: onEdit }), _jsx(ToolbarButton, { label: "Delete", icon: HiOutlineTrash, disabled: !hasSelection, onClick: onDelete }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Email", icon: HiOutlineEnvelope, disabled: !hasSelection, onClick: onEmail }), _jsx(ToolbarButton, { label: allSelectedFavorited ? "Unfavorite" : "Favorite", icon: allSelectedFavorited ? HiStar : HiOutlineStar, disabled: !hasSelection, onClick: onToggleFavorite }), _jsx(ToolbarButton, { label: "Add category", icon: HiOutlineTag, disabled: !hasSelection, onClick: onAddCategory }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Export", icon: HiOutlineArrowUpTray, disabled: !hasSelection, onClick: onExportVCard }), _jsx(ToolbarButton, { label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click() }), _jsx("input", { ref: importInputRef, type: "file", accept: ".vcf", className: "sr-only", "aria-label": "Import contacts file", onChange: handleImportFileChosen })] }));
+    const actions = [
+        { id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true },
+        { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
+        { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
+        { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },
+        {
+            id: "favorite",
+            label: allSelectedFavorited ? "Unfavorite" : "Favorite",
+            icon: allSelectedFavorited ? HiStar : HiOutlineStar,
+            onClick: onToggleFavorite,
+            disabled: !hasSelection,
+            group: 2,
+            rank: 3,
+        },
+        { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
+        { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
+    ];
+    return (_jsx(ResponsiveToolbar, { label: "Contacts actions", actions: actions, children: _jsx("input", { ref: importInputRef, type: "file", accept: ".vcf", className: "sr-only", "aria-label": "Import contacts file", onChange: handleImportFileChosen }) }));
 }

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

@@ -97,7 +97,10 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
         const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-contacts-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-contacts-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
                                 navigate(`/contacts?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // The mailbox switcher (or an error) is all this column holds: with a single mailbox and no error there is nothing to put in it, and an empty
+        // 224 px column beside the contacts' own menu is wasted room.
+        const hasSidebar = mailboxes.length > 1 || !!folderError;
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "contacts", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/components/escrow/layout/EscrowShell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -13,6 +13,8 @@ import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import UserMenu from "../../layout/UserMenu.js";
+import RailIcon from "../../layout/RailIcon.js";
+import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
 import { signOutOfConsole } from "../../admin/signOut.js";
 const DEFAULT_ICON_SRC = "/images/logo.svg";
 const NAV_ITEMS = [
@@ -83,12 +85,13 @@ export default function EscrowShell({ active, userUid, authServerUrl, children }
     }
     else {
         const activeItem = NAV_ITEMS.find((item) => item.id === active);
-        content = (_jsx("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Escrow sections", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1", children: [_jsx("img", { src: iconSrc, width: "96", height: "96", alt: "", className: "mb-3" }), NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+        content = (_jsx("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Escrow sections", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center pb-3 gap-1", children: [_jsx(RailIcon, { src: iconSrc }), NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
                                     "w-10 h-10 flex items-center justify-center rounded-sm",
                                     id === active
                                         ? "bg-primary/10 text-primary-dark"
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: NAV_ITEMS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
+                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: NAV_ITEMS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { id: "app-content", className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
     }
-    return _jsx(_Fragment, { children: content });
+    // The user's own colours and background (`AppearanceProvider`), from what the last webmail page cached in this browser: the console never asks the server.
+    return (_jsx(AppearanceProvider, { userUid: userUid, lookUp: false, children: content }));
 }

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

@@ -2,6 +2,7 @@ import "../../styles/app.css";
 import React, { PropsWithChildren } from "react";
 import type { IconType } from "react-icons";
 import { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import type { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
 import { PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export declare const LOGOUT_TIMEOUT_MS = 3000;
@@ -34,6 +35,10 @@ export interface AppShellProps extends PluginNavProps {
     /** The role names the server treats as trusted (its `trusted_roles` config, injected via the route's `fetchProps`) -
      * what that lookup looks for. Absent means the server's own default, `["admin"]`. */
     trustedRoles?: string[];
+    /** The deployment's branding as the server rendered the page (its `branding` prop). Used until the frame's own fetch answers, so a custom header is there from the first paint - and the frame knows to drop its own title bar - instead of appearing (and moving everything) once the request returns. */
+    branding?: Branding;
+    /** The signed-in user's stored appearance preferences as the server rendered the page (its `appearance` prop), so the first paint already wears the theme and background - see `AppearanceProvider`. */
+    appearance?: unknown;
 }
 export interface AppDef {
     id: AppShellApp;
@@ -64,7 +69,7 @@ export interface AppChromeProps extends AppShellProps {
  * Rendered by `AppRouter`, once, for the life of the page, so that moving between apps replaces only `children` - see
  * `AppShell` below for what a page's own shell renders instead.
  */
-export declare function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, routeKey, busy, hideChrome, children, }: PropsWithChildren<AppChromeProps>): React.JSX.Element;
+export declare function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, routeKey, busy, hideChrome, children, }: PropsWithChildren<AppChromeProps>): React.JSX.Element;
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it
  * is the whole `AppChrome`, as it always was. Inside it (`AppRouter`) the chrome is already mounted above the page - and stays

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

@@ -14,11 +14,14 @@ import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeou
 import ComposeProvider from "../mail/compose/ComposeContext.js";
 import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
+import { FrameBrandingFooter, FrameBrandingHeader, useBrandingHtml } from "./BrandingChrome.js";
+import RailIcon from "./RailIcon.js";
+import AppearanceProvider from "../../appearance/AppearanceProvider.js";
+import { clearAppearanceCache } from "../../appearance/appearanceCache.js";
 import UserMenu from "./UserMenu.js";
 import { UnlockPromptProvider } from "./UnlockPromptProvider.js";
 import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localIndexRpcClient.js";
-import { authApiFetch } from "@rapidmx/react-shared/util/api.js";
+import { authApiFetch, setApiUnauthorizedObserver } from "@rapidmx/react-shared/util/api.js";
 import { destroyUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
@@ -31,7 +34,13 @@ import ShortcutsDialog from "../../keyboard/ShortcutsDialog.js";
 import { inboxUnreadTotal } from "../../mail/folderCounts.js";
 import { MailConnectionContext, useMailConnection } from "../../mail/useMailConnection.js";
 import { useUnreadTitle } from "../../mail/useUnreadTitle.js";
-import NewMailToasts from "../mail/NewMailToasts.js";
+import UnlockBridge from "../../mail/outbox/UnlockBridge.js";
+import NotificationCenter from "../../notifications/NotificationCenter.js";
+import { useHeaderHeightRef } from "../../notifications/headerOffset.js";
+import NotificationHistoryDialog from "../../notifications/NotificationHistoryDialog.js";
+import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
+import { useUnseenErrorCount } from "../../notifications/useNotifications.js";
+import { useSigningEnrollmentWatcher } from "../../signing/useSigningEnrollmentWatcher.js";
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export const LOGOUT_TIMEOUT_MS = 3000;
 /**
@@ -77,12 +86,24 @@ export function appRailItems(pluginNav) {
  * Rendered by `AppRouter`, once, for the life of the page, so that moving between apps replaces only `children` - see
  * `AppShell` below for what a page's own shell renders instead.
  */
-export function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, routeKey, busy, hideChrome, children, }) {
+export function AppChrome({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, branding: initialBranding, appearance, pluginNav, routeKey, busy, hideChrome, children, }) {
     const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
     // The keyboard shortcuts dialog: opened by `?`/Ctrl+/ (`GlobalShortcuts`) and by the account menu's item.
     const [shortcutsOpen, setShortcutsOpen] = useState(false);
+    // The pop-up history ("Recent notifications" in the account menu). The pop-ups themselves are drawn by `NotificationCenter`, below.
+    const [historyOpen, setHistoryOpen] = useState(false);
+    // Only the count is read, so the whole frame does not render again for every pop-up that comes and goes.
+    const unseenErrors = useUnseenErrorCount();
+    // The title bar's height for the pop-up stack, which sticks just below the header (a branding header publishes its own - `FrameBrandingHeader`).
+    const headerRef = useHeaderHeightRef();
     const signingOutRef = useRef(false);
-    const { branding, iconSrc } = useBranding();
+    const { branding: fetchedBranding, iconSrc: fetchedIconSrc } = useBranding();
+    // The server's copy until the fetch answers, so the frame's shape (a custom header replaces the title bar) never changes after the first paint.
+    const branding = fetchedBranding ?? initialBranding ?? null;
+    const iconSrc = fetchedBranding ? fetchedIconSrc : initialBranding?.iconUrl || initialBranding?.logoUrl || fetchedIconSrc;
+    // The custom header and footer, sanitized and with their `{USER_MENU}` / `{APP_TITLE}` placeholders (`undefined` until parsed, `null` when there is none).
+    const header = useBrandingHtml(branding?.headerHtml);
+    const footer = useBrandingHtml(branding?.footerHtml);
     // The mailboxes, their folders and the one push connection live here, in the frame that stays mounted as the router swaps pages - so
     // new-mail pop-ups, the folder counters and the tab title's unread count work in Calendar, Contacts, Tasks and Settings too, and moving
     // between apps never opens a second socket (the server allows ten per user). `MailShell` reads them from `MailConnectionContext`. Outside
@@ -90,7 +111,19 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     const inFrame = useInAppFrame();
     const navigate = useNavigate();
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
+    // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
+    useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
     useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // Any request this app makes that the server answers with a 401 - the session ended - raises one "Your session expired" pop-up with a
+    // Sign in action (see `notifySessionExpired()`), whichever request noticed first, a background refresh included.
+    useEffect(() => {
+        setSignInUrl(authServerUrl);
+        if (!userUid) {
+            return;
+        }
+        setApiUnauthorizedObserver(() => void notifySessionExpired());
+        return () => setApiUnauthorizedObserver(undefined);
+    }, [userUid, authServerUrl]);
     // Mounted here, not scoped to Mail/Settings (the only shells that actually read unlocked keys),
     // specifically so activity in *any* app resets the idle clock - see that hook's own doc comment.
     useIdleKeyTimeout();
@@ -130,6 +163,7 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             markSigningOut();
             destroyUnlockedKeys();
             clearPinnedSignerCache();
+            clearAppearanceCache();
             // Bounded by its own timeout and never rejects - awaited so navigating doesn't kill the Worker mid-delete.
             void destroyAllLocalIndexes().then(() => {
                 window.location.href = authServerUrl ?? "/";
@@ -146,6 +180,7 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
         destroyUnlockedKeys();
         // Trusted signer pins read from contacts don't outlive the session either.
         clearPinnedSignerCache();
+        clearAppearanceCache();
         // Open compose windows save edits still waiting on their autosave debounce while the session is still
         // valid - logout invalidates it. Bounded the same way as logout itself, and never rejects.
         await flushComposeDrafts(LOGOUT_TIMEOUT_MS);
@@ -204,14 +239,25 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     const apps = appRailItems(pluginNav);
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
-    return (_jsx(ShortcutProvider, { children: _jsxs(MailConnectionContext.Provider, { value: inFrame ? mail : null, children: [_jsx(GlobalShortcuts, { authServerUrl: authServerUrl, onToggleHelp: () => setShortcutsOpen((open) => !open) }), _jsx(ShortcutsDialog, { open: shortcutsOpen, onClose: () => setShortcutsOpen(false) }), _jsx(UnlockPromptProvider, { children: _jsx(ComposeProvider, { userUid: userUid, trusted: !!trusted && !impersonating, children: _jsxs("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: [!hideChrome && _jsx(BrandingHeader, { branding: branding }), impersonating && !hideChrome && (_jsxs("div", { className: "h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4", children: [_jsxs("span", { children: ["You are viewing as ", _jsx("strong", { children: userUid }), "."] }), _jsx("button", { type: "button", onClick: handleStopImpersonating, disabled: stoppingImpersonation, className: "underline hover:no-underline disabled:opacity-60", children: stoppingImpersonation ? "Returning to admin…" : "Return to admin" })] })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [!hideChrome && (_jsxs("nav", { "aria-label": "Apps", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1", children: [_jsx("img", { src: iconSrc, width: "96", height: "96", alt: "", className: "mb-3" }), apps.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
-                                                        "w-10 h-10 flex items-center justify-center rounded-sm",
-                                                        id === active
-                                                            ? "bg-primary/10 text-primary-dark"
-                                                            : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                                    ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && (_jsxs("header", { className: "h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut, 
-                                                            // An impersonating administrator acts as the impersonated user, so the console link is hidden then.
-                                                            showAdminLink: !!trusted && !impersonating, detectAdmin: !trusted && !impersonating, trustedRoles: trustedRoles, showSettingsLink: true, showNotificationSettings: true, onShowShortcuts: () => setShortcutsOpen(true) })] })), _jsx("div", { ref: contentRef, id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), routeKey !== undefined && (_jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })), !hideChrome && _jsx(BrandingFooter, { branding: branding })] }) }) }), inFrame && (_jsx(NewMailToasts, { toasts: mail.notifications.toasts, onDismiss: mail.notifications.dismiss, offerDesktop: mail.notifications.offerDesktop, onEnableDesktop: () => void mail.notifications.enableDesktop(), onDeclineDesktop: mail.notifications.declineDesktop }))] }) }));
+    // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the
+    // account menu moves into it. While it is still being parsed it already counts, so the frame's shape doesn't change under the user.
+    const customHeader = header !== null;
+    // Where the one account menu lives: the header's `{USER_MENU}`, else the footer's, else a small cell at the header's right end - never lost.
+    const menuInHeader = !!header?.hasUserMenu;
+    const menuInFooter = customHeader && !!header && !menuInHeader && !!footer?.hasUserMenu;
+    const renderUserMenu = (placement) => (_jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut, 
+        // An impersonating administrator acts as the impersonated user, so the console link is hidden then.
+        showAdminLink: !!trusted && !impersonating, detectAdmin: !trusted && !impersonating, trustedRoles: trustedRoles, showSettingsLink: true, showNotificationSettings: true, onShowShortcuts: () => setShortcutsOpen(true), onShowNotifications: () => setHistoryOpen(true), unseenErrors: unseenErrors, placement: placement }));
+    return (_jsx(AppearanceProvider, { userUid: userUid, initial: appearance, lookUp: inFrame, children: _jsx(ShortcutProvider, { children: _jsxs(MailConnectionContext.Provider, { value: inFrame ? mail : null, children: [_jsx(GlobalShortcuts, { authServerUrl: authServerUrl, onToggleHelp: () => setShortcutsOpen((open) => !open) }), _jsx(ShortcutsDialog, { open: shortcutsOpen, onClose: () => setShortcutsOpen(false) }), _jsxs(UnlockPromptProvider, { children: [_jsx(UnlockBridge, {}), _jsx(ComposeProvider, { userUid: userUid, trusted: !!trusted && !impersonating, children: _jsxs("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: [!hideChrome && customHeader && (_jsx(FrameBrandingHeader, { parsed: header, userMenu: menuInHeader ? renderUserMenu("down") : undefined, fallbackMenu: header && !menuInHeader && !menuInFooter ? renderUserMenu("down") : undefined, appTitle: activeLabel })), impersonating && !hideChrome && (_jsxs("div", { className: "h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4", children: [_jsxs("span", { children: ["You are viewing as ", _jsx("strong", { children: userUid }), "."] }), _jsx("button", { type: "button", onClick: handleStopImpersonating, disabled: stoppingImpersonation, className: "underline hover:no-underline disabled:opacity-60", children: stoppingImpersonation ? "Returning to admin…" : "Return to admin" })] })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [!hideChrome && (_jsxs("nav", { "aria-label": "Apps", className: [
+                                                        "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center gap-1",
+                                                        // Under a custom header the rail starts with the app icons; without one its own icon is flush with the top of the window.
+                                                        customHeader ? "py-3" : "pb-3",
+                                                    ].join(" "), children: [!customHeader && (_jsx(RailIcon, { src: iconSrc })), apps.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+                                                                "w-10 h-10 flex items-center justify-center rounded-sm",
+                                                                id === active
+                                                                    ? "bg-primary/10 text-primary-dark"
+                                                                    : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                                            ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { ref: contentRef, id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), routeKey !== undefined && (_jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
 }
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it

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

@@ -1,19 +1,78 @@
-import React from "react";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import React, { ReactNode } from "react";
+import type { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+/** The attribute that marks the elements React fills in (`{USER_MENU}`, `{APP_TITLE}`). Stripped from the author's own HTML, so only
+ * this module's placeholders can carry it. */
+export declare const SLOT_ATTRIBUTE = "data-rr-slot";
+/** The variables a branding header or footer may contain, written in the HTML's text. */
+export declare const USER_MENU_VARIABLE = "{USER_MENU}";
+export declare const APP_TITLE_VARIABLE = "{APP_TITLE}";
 /**
  * Sanitizes admin-configured branding HTML before it's rendered. The server sanitizes on save too; this also
  * covers anything stored before that. Returns `""` where there's no DOM to sanitize with (server-side
  * rendering), so unsanitized HTML is never emitted.
  */
 export declare function sanitizeBrandingHtml(html: string): string;
+/** Branding HTML ready to render: sanitized, with its variables replaced by placeholder elements for React to fill. */
+export interface ParsedBrandingHtml {
+    html: string;
+    /** It contains a `{USER_MENU}` where the account menu can be rendered. */
+    hasUserMenu: boolean;
+}
 /**
- * Renders the admin-configured `Branding.headerHtml`/`footerHtml` (see `useBranding()`), sanitized. The webmail
- * chrome (`AppShell`) shows both; the admin console shows only the footer - its header is the console's own - and the
- * escrow console deliberately renders no branding HTML at all.
+ * Sanitizes `html` (the same rules as `sanitizeBrandingHtml()`) and swaps the variables in its **text** for placeholder elements:
+ * `{USER_MENU}` becomes the slot the account menu is rendered into, `{APP_TITLE}` a slot holding the current app's name.
+ *
+ * - Only text is searched, after sanitizing - a variable in an attribute (`title="{USER_MENU}"`), a comment, or a `<script>` (which
+ * is gone) is never touched, and the author cannot write a placeholder themselves (`data-rr-slot` is stripped).
+ * - `{USER_MENU}` is replaced **once**, at its first place in the document; a second (or third) one is removed, so there is never
+ * more than one account menu (two would give two sets of duplicate ids and focus targets). One inside a link, or in text that
+ * can't hold an element (`<title>`, `<textarea>`), is removed too: a menu inside an `<a>` would navigate when clicked.
+ * - `{APP_TITLE}` is replaced everywhere it appears. Inside `<title>`-like raw text it stays as written.
+ * - Nothing is matched loosely: the names are upper-case, in braces, with no spaces.
+ *
+ * `null` when there is nothing to show (no DOM to sanitize with - server-side rendering - or the HTML is empty once sanitized).
  */
-export declare function BrandingHeader({ branding }: {
-    branding: Branding | null;
-}): React.JSX.Element;
-export declare function BrandingFooter({ branding }: {
+export declare function parseBrandingHtml(html: string): ParsedBrandingHtml | null;
+/**
+ * `parseBrandingHtml()` of `html`, done once the component is on the page (never while rendering: the server has no DOM to sanitize
+ * with, and rendering different HTML there than the hydrating client would leave the page without it). `null` when there is no HTML,
+ * or nothing is left of it; `undefined` while it has not been parsed yet - the frame reserves the header's place meanwhile.
+ */
+export declare function useBrandingHtml(html: string | undefined): ParsedBrandingHtml | null | undefined;
+export interface FrameBrandingHeaderProps {
+    /** `useBrandingHtml(branding.headerHtml)`. `null` renders nothing. */
+    parsed: ParsedBrandingHtml | null | undefined;
+    /** The account menu, rendered into the header's `{USER_MENU}` (when it has one). */
+    userMenu?: ReactNode;
+    /** Rendered at the right end of the header when it has no `{USER_MENU}` and the footer doesn't host the menu either - the account menu is never lost. */
+    fallbackMenu?: ReactNode;
+    appTitle?: string;
+}
+/**
+ * The frame's version of the admin-configured `Branding.headerHtml` (see `useBranding()`), sanitized, in a `<header>` that stays at the top of the window as the
+ * page scrolls. When it is there the app has no title bar of its own (`AppChrome`): the header is the top of the app, and the account
+ * menu lives in it - where the HTML writes `{USER_MENU}`, else in a small cell at its right end. The webmail chrome (`AppShell`) shows
+ * it; the admin console has no custom header (its header is the console's own) and the escrow console renders no branding HTML at all.
+ */
+export declare function FrameBrandingHeader({ parsed, userMenu, fallbackMenu, appTitle }: FrameBrandingHeaderProps): React.JSX.Element | null;
+export interface FrameBrandingFooterProps {
+    /** `useBrandingHtml(branding.footerHtml)`. */
+    parsed: ParsedBrandingHtml | null | undefined;
+    /** Rendered into the footer's `{USER_MENU}` - passed only when the header has none. */
+    userMenu?: ReactNode;
+    appTitle?: string;
+}
+/** The frame's version of the admin-configured `Branding.footerHtml`, sanitized. Its variables work as in the header; a `{USER_MENU}` here only takes the menu when the header has none. */
+export declare function FrameBrandingFooter({ parsed, userMenu, appTitle }: FrameBrandingFooterProps): React.JSX.Element;
+export interface BrandingChromeProps {
     branding: Branding | null;
-}): React.JSX.Element;
+    /** What `{APP_TITLE}` is replaced with - the page's own name. Nothing when absent. */
+    appTitle?: string;
+}
+/**
+ * The admin-configured `Branding.headerHtml`, sanitized, for pages that don't use a shell, such as public pages (the booking pages). There is no
+ * account menu there, so a `{USER_MENU}` in the HTML renders nothing. Renders nothing without branding or HTML.
+ */
+export declare function BrandingHeader({ branding, appTitle }: BrandingChromeProps): React.JSX.Element;
+/** The admin-configured `Branding.footerHtml`, sanitized, for pages that don't use a shell - see `BrandingHeader`. */
+export declare function BrandingFooter({ branding, appTitle }: BrandingChromeProps): React.JSX.Element;

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

@@ -1,5 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
+import { useHeaderHeightRef } from "../../notifications/headerOffset.js";
 /** Elements that could run script, restyle the whole page, collect input, or embed another page - stripped on
  * top of DOMPurify's defaults (which already drop `<script>`, `on*` handlers, and `javascript:` URLs). */
 const FORBIDDEN_TAGS = [
@@ -23,6 +30,15 @@ const FORBIDDEN_TAGS = [
     "math",
 ];
 const FORBIDDEN_ATTRS = ["action", "formaction", "srcdoc"];
+/** The attribute that marks the elements React fills in (`{USER_MENU}`, `{APP_TITLE}`). Stripped from the author's own HTML, so only
+ * this module's placeholders can carry it. */
+export const SLOT_ATTRIBUTE = "data-rr-slot";
+/** The variables a branding header or footer may contain, written in the HTML's text. */
+export const USER_MENU_VARIABLE = "{USER_MENU}";
+export const APP_TITLE_VARIABLE = "{APP_TITLE}";
+const VARIABLE = /\{(USER_MENU|APP_TITLE)\}/g;
+/** Elements whose text is not markup a placeholder element could live in (raw text and RCDATA), and the ones a menu must not sit inside. */
+const RAW_TEXT_PARENTS = new Set(["TITLE", "TEXTAREA", "OPTION", "STYLE", "SCRIPT", "NOSCRIPT", "XMP", "IFRAME", "NOEMBED", "NOFRAMES", "PLAINTEXT"]);
 /**
  * Sanitizes admin-configured branding HTML before it's rendered. The server sanitizes on save too; this also
  * covers anything stored before that. Returns `""` where there's no DOM to sanitize with (server-side
@@ -34,21 +50,133 @@ export function sanitizeBrandingHtml(html) {
     }
     return DOMPurify.sanitize(html, { FORBID_TAGS: FORBIDDEN_TAGS, FORBID_ATTR: FORBIDDEN_ATTRS });
 }
-function BrandingHtml({ html }) {
-    const clean = html ? sanitizeBrandingHtml(html) : "";
-    if (!clean) {
+function slotElement(name) {
+    const span = document.createElement("span");
+    span.setAttribute(SLOT_ATTRIBUTE, name);
+    return span;
+}
+/**
+ * Sanitizes `html` (the same rules as `sanitizeBrandingHtml()`) and swaps the variables in its **text** for placeholder elements:
+ * `{USER_MENU}` becomes the slot the account menu is rendered into, `{APP_TITLE}` a slot holding the current app's name.
+ *
+ * - Only text is searched, after sanitizing - a variable in an attribute (`title="{USER_MENU}"`), a comment, or a `<script>` (which
+ * is gone) is never touched, and the author cannot write a placeholder themselves (`data-rr-slot` is stripped).
+ * - `{USER_MENU}` is replaced **once**, at its first place in the document; a second (or third) one is removed, so there is never
+ * more than one account menu (two would give two sets of duplicate ids and focus targets). One inside a link, or in text that
+ * can't hold an element (`<title>`, `<textarea>`), is removed too: a menu inside an `<a>` would navigate when clicked.
+ * - `{APP_TITLE}` is replaced everywhere it appears. Inside `<title>`-like raw text it stays as written.
+ * - Nothing is matched loosely: the names are upper-case, in braces, with no spaces.
+ *
+ * `null` when there is nothing to show (no DOM to sanitize with - server-side rendering - or the HTML is empty once sanitized).
+ */
+export function parseBrandingHtml(html) {
+    if (!DOMPurify.isSupported) {
+        return null;
+    }
+    const fragment = DOMPurify.sanitize(html, {
+        FORBID_TAGS: FORBIDDEN_TAGS,
+        FORBID_ATTR: [...FORBIDDEN_ATTRS, SLOT_ATTRIBUTE],
+        RETURN_DOM_FRAGMENT: true,
+    });
+    const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_TEXT);
+    const texts = [];
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        texts.push(node);
+    }
+    let hasUserMenu = false;
+    for (const text of texts) {
+        const parent = text.parentElement;
+        if (parent && RAW_TEXT_PARENTS.has(parent.tagName)) {
+            continue;
+        }
+        const inLink = !!parent?.closest("a");
+        // `split` with a capturing group alternates text and variable names: [text, name, text, name, ..., text].
+        const pieces = text.data.split(VARIABLE);
+        if (pieces.length === 1) {
+            continue;
+        }
+        const replacement = document.createDocumentFragment();
+        pieces.forEach((piece, index) => {
+            if (index % 2 === 0) {
+                if (piece) {
+                    replacement.appendChild(document.createTextNode(piece));
+                }
+            }
+            else if (piece === "APP_TITLE") {
+                replacement.appendChild(slotElement("app-title"));
+            }
+            else if (!hasUserMenu && !inLink) {
+                hasUserMenu = true;
+                replacement.appendChild(slotElement("user-menu"));
+            }
+        });
+        text.replaceWith(replacement);
+    }
+    const holder = document.createElement("div");
+    holder.appendChild(fragment);
+    const result = holder.innerHTML;
+    return result.trim() ? { html: result, hasUserMenu } : null;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+ * `parseBrandingHtml()` of `html`, done once the component is on the page (never while rendering: the server has no DOM to sanitize
+ * with, and rendering different HTML there than the hydrating client would leave the page without it). `null` when there is no HTML,
+ * or nothing is left of it; `undefined` while it has not been parsed yet - the frame reserves the header's place meanwhile.
+ */
+export function useBrandingHtml(html) {
+    const source = html?.trim() ? html : undefined;
+    const [parsed, setParsed] = useState(undefined);
+    useIsomorphicLayoutEffect(() => {
+        setParsed(source === undefined ? undefined : { source, value: parseBrandingHtml(source) });
+    }, [source]);
+    if (source === undefined) {
+        return null;
+    }
+    return parsed?.source === source ? parsed.value : undefined;
+}
+function BrandingHtml({ parsed, userMenu, hostMenu, appTitle, className }) {
+    const ref = useRef(null);
+    const [targets, setTargets] = useState({ menu: null, titles: [] });
+    const html = parsed?.html ?? "";
+    // The placeholders exist once React has set the HTML: find them here, before the browser paints, and portal into them.
+    useIsomorphicLayoutEffect(() => {
+        const root = ref.current;
+        setTargets({
+            menu: root?.querySelector(`[${SLOT_ATTRIBUTE}="user-menu"]`) ?? null,
+            titles: root ? Array.from(root.querySelectorAll(`[${SLOT_ATTRIBUTE}="app-title"]`)) : [],
+        });
+    }, [html]);
+    if (parsed === null) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, className: className, dangerouslySetInnerHTML: { __html: html } }), hostMenu && targets.menu && createPortal(userMenu, targets.menu), targets.titles.map((element, index) => createPortal(appTitle, element, `app-title-${index}`))] }));
+}
+/**
+ * The frame's version of the admin-configured `Branding.headerHtml` (see `useBranding()`), sanitized, in a `<header>` that stays at the top of the window as the
+ * page scrolls. When it is there the app has no title bar of its own (`AppChrome`): the header is the top of the app, and the account
+ * menu lives in it - where the HTML writes `{USER_MENU}`, else in a small cell at its right end. The webmail chrome (`AppShell`) shows
+ * it; the admin console has no custom header (its header is the console's own) and the escrow console renders no branding HTML at all.
+ */
+export function FrameBrandingHeader({ parsed, userMenu, fallbackMenu, appTitle }) {
+    // Publishes the header's height (`--rr-header-h`) for the pop-up stack, which sticks just below it.
+    const headerRef = useHeaderHeightRef();
+    if (parsed === null) {
         return null;
     }
-    return _jsx("div", { dangerouslySetInnerHTML: { __html: clean } });
+    return (_jsxs("header", { ref: headerRef, className: "sticky top-0 z-30 shrink-0 flex items-stretch bg-surface-alt", "data-branding-header": "", children: [_jsx(BrandingHtml, { parsed: parsed, userMenu: userMenu, hostMenu: parsed?.hasUserMenu, appTitle: appTitle, className: "flex-1 min-w-0" }), parsed && !parsed.hasUserMenu && fallbackMenu ? (_jsx("div", { className: "shrink-0 flex items-center px-3 bg-surface border-l border-border", "data-branding-menu-cell": "", children: fallbackMenu })) : null] }));
+}
+/** The frame's version of the admin-configured `Branding.footerHtml`, sanitized. Its variables work as in the header; a `{USER_MENU}` here only takes the menu when the header has none. */
+export function FrameBrandingFooter({ parsed, userMenu, appTitle }) {
+    return _jsx(BrandingHtml, { parsed: parsed, userMenu: userMenu, hostMenu: userMenu !== undefined, appTitle: appTitle });
 }
 /**
- * Renders the admin-configured `Branding.headerHtml`/`footerHtml` (see `useBranding()`), sanitized. The webmail
- * chrome (`AppShell`) shows both; the admin console shows only the footer - its header is the console's own - and the
- * escrow console deliberately renders no branding HTML at all.
+ * The admin-configured `Branding.headerHtml`, sanitized, for pages that don't use a shell, such as public pages (the booking pages). There is no
+ * account menu there, so a `{USER_MENU}` in the HTML renders nothing. Renders nothing without branding or HTML.
  */
-export function BrandingHeader({ branding }) {
-    return _jsx(BrandingHtml, { html: branding?.headerHtml });
+export function BrandingHeader({ branding, appTitle }) {
+    return _jsx(BrandingHtml, { parsed: useBrandingHtml(branding?.headerHtml), appTitle: appTitle });
 }
-export function BrandingFooter({ branding }) {
-    return _jsx(BrandingHtml, { html: branding?.footerHtml });
+/** The admin-configured `Branding.footerHtml`, sanitized, for pages that don't use a shell - see `BrandingHeader`. */
+export function BrandingFooter({ branding, appTitle }) {
+    return _jsx(BrandingHtml, { parsed: useBrandingHtml(branding?.footerHtml), appTitle: appTitle });
 }

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

@@ -0,0 +1,21 @@
+import React from "react";
+/** 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 declare function emptyRowsAtTop(rgba: ArrayLike<number>, size: number): number;
+/** Whether this environment can decode an image and read it back - not a server, and not jsdom, where there is nothing to measure. */
+export declare function canMeasureImages(): boolean;
+/**
+ * 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 declare function measureTopMargin(src: string): Promise<number>;
+/**
+ * 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 }: {
+    src: string;
+}): React.JSX.Element;