@rapidmx/web-client 0.9.0 → 0.11.0

package/dist/apps/shared/appearance/theme.js

@@ -0,0 +1,251 @@
+import { AA_CONTRAST, BLACK, DARK_TEXT, WHITE, contrastRatio, deriveScale, ensureContrast, mix, parseHex, readableOn, relativeLuminance, toHex, } from "./color.js";
+export const DEFAULT_PALETTE = {
+    light: { surface: "#ffffff", text: "#1c2526", muted: "#5a6b6e" },
+    dark: { surface: "#1b2022", text: "#eef2f3", muted: "#9fb0b3" },
+};
+/** How far the text colour is mixed toward the surface to get the muted text colour. */
+const MUTED_MIX = { light: 0.3, dark: 0.35 };
+/** How far the surface is mixed toward the text colour to get `surface-alt`. */
+const ALT_MIX = { light: 0.04, dark: 0.03 };
+const BORDER_MIX = 0.12;
+/** How far the text colour is mixed toward the surface to get the muted text colour while a background is set - less than usual, so the panels can be more see-through. */
+const BACKGROUND_MUTED_MIX = 0.18;
+/** `#rrggbb` known valid (`normalizeAppearance()` and the colour inputs guarantee it). */
+function rgbOf(hex) {
+    return parseHex(hex);
+}
+export function effectivePalette(colors, scheme) {
+    const defaults = DEFAULT_PALETTE[scheme];
+    const surface = rgbOf(colors?.surface ?? defaults.surface);
+    let text = rgbOf(colors?.text ?? defaults.text);
+    let textAdjusted = colors?.text !== undefined;
+    if (!textAdjusted && colors?.surface !== undefined && contrastRatio(text, surface) < AA_CONTRAST) {
+        // A surface the app's own text can't be read on: the text follows it, rather than leaving the page unreadable.
+        text = readableOn(surface, DARK_TEXT);
+        textAdjusted = true;
+    }
+    const customised = colors?.surface !== undefined || textAdjusted;
+    const muted = customised
+        ? ensureContrast(mix(text, surface, MUTED_MIX[scheme]), surface, AA_CONTRAST)
+        : rgbOf(defaults.muted);
+    return { surface, text, muted, surfaceChosen: colors?.surface !== undefined, textAdjusted };
+}
+/**
+ * The custom properties a user's colours set for one scheme - only those they changed (and what derives from them): the primary
+ * colour's seven-step scale and the text on it, the accent and its shades, and the surface / text family. Empty when they chose
+ * no colours.
+ */
+export function colorVariables(colors, scheme) {
+    const vars = {};
+    if (!colors) {
+        return vars;
+    }
+    const primary = colors.primary ? deriveScale(colors.primary) : undefined;
+    if (primary) {
+        vars["--rr-color-primary"] = primary.base;
+        vars["--rr-color-primary-dark"] = primary.dark;
+        vars["--rr-color-primary-darker"] = primary.darker;
+        vars["--rr-color-primary-darkest"] = primary.darkest;
+        vars["--rr-color-primary-light"] = primary.light;
+        vars["--rr-color-primary-lighter"] = primary.lighter;
+        vars["--rr-color-primary-lightest"] = primary.lightest;
+        vars["--rr-color-text-on-primary"] = primary.onBase;
+    }
+    const accent = colors.accent ? parseHex(colors.accent) : undefined;
+    if (accent) {
+        vars["--rr-color-accent"] = toHex(accent);
+        vars["--rr-color-accent-dark"] = toHex(mix(accent, BLACK, 0.25));
+        vars["--rr-color-accent-soft"] = toHex(mix(accent, WHITE, 0.2));
+        vars["--rr-color-accent-pale"] = toHex(mix(accent, WHITE, 0.8));
+        vars["--rr-color-text-on-accent"] = toHex(readableOn(accent, DARK_TEXT));
+    }
+    const palette = effectivePalette(colors, scheme);
+    if (palette.surfaceChosen || palette.textAdjusted) {
+        vars["--rr-color-border"] = toHex(mix(palette.surface, palette.text, BORDER_MIX));
+        vars["--rr-color-text-muted"] = toHex(palette.muted);
+    }
+    if (palette.surfaceChosen) {
+        vars["--rr-color-surface"] = toHex(palette.surface);
+        vars["--rr-color-surface-alt"] = toHex(mix(palette.surface, palette.text, ALT_MIX[scheme]));
+        // The page behind the panels: the surface itself, except that a dark surface sits on a slightly deeper page, as the defaults do.
+        vars["--rr-color-bg"] = toHex(relativeLuminance(palette.surface) < 0.18 ? mix(palette.surface, BLACK, 0.25) : palette.surface);
+    }
+    if (palette.textAdjusted) {
+        vars["--rr-color-text"] = toHex(palette.text);
+    }
+    return vars;
+}
+/** What is assumed of a photo nobody has measured: black in one corner and white in another. */
+export const WORST_CASE_PHOTO = { lo: BLACK, hi: WHITE };
+/** The panels are never more see-through than this ... */
+export const PANEL_ALPHA_MIN = 0.5;
+/** ... nor less than this (still a hint of the picture). */
+export const PANEL_ALPHA_MAX = 0.96;
+/** Contrast the panels are made to keep, a little over AA to leave room for the compression of a photo. */
+const PANEL_CONTRAST = 4.6;
+/**
+ * The opacity (0.5 to 0.96) of the surface panels over a background, the lowest for which text and muted text keep AA contrast
+ * against the worst place the picture can be. What is behind a panel is the picture under the dim (`dim` of the surface colour laid
+ * over it); the panel is `alpha` of the surface over that, so the picture's share of what the text sits on is `(1 - alpha) *
+ * (1 - dim)`. A wide-ranging (busy) photo therefore gets more opaque panels than a plain one, and more dim allows less opaque
+ * panels.
+ */
+export function panelAlpha(palette, dim, photo) {
+    for (let alpha = PANEL_ALPHA_MIN; alpha < PANEL_ALPHA_MAX; alpha = Math.round((alpha + 0.01) * 100) / 100) {
+        const share = (1 - alpha) * (1 - dim);
+        const readable = [photo.lo, photo.hi].every((behind) => {
+            const under = mix(palette.surface, behind, share);
+            return contrastRatio(palette.text, under) >= PANEL_CONTRAST && contrastRatio(palette.muted, under) >= PANEL_CONTRAST;
+        });
+        if (readable) {
+            return alpha;
+        }
+    }
+    return PANEL_ALPHA_MAX;
+}
+/** What a background shows behind the panels - `undefined` for none: a colour, or an image of unknown or measured lightness. */
+export function backgroundPhoto(background, measured) {
+    if (!background || background.kind === "none") {
+        return undefined;
+    }
+    if (background.kind === "color") {
+        const colour = rgbOf(background.color);
+        return { lo: colour, hi: colour };
+    }
+    return measured ?? WORST_CASE_PHOTO;
+}
+/** The dim actually laid over the background: a colour has no picture to dim. */
+export function effectiveDim(background) {
+    return background.kind === "image" ? background.dim : 0;
+}
+/**
+ * The custom properties for one scheme: the user's colours, plus - when a background is set - the translucent panel colours and the
+ * transparent frame. `measured` is the image's measured lightness range, when known (`photo.ts`).
+ */
+export function themeVariables(prefs, scheme, measured) {
+    const vars = colorVariables(prefs.colors, scheme);
+    const photo = backgroundPhoto(prefs.background, measured);
+    if (photo && prefs.background) {
+        const palette = effectivePalette(prefs.colors, scheme);
+        // Muted text is what limits how see-through the panels can be, so over a background it is a shade stronger.
+        const muted = ensureContrast(mix(palette.text, palette.surface, BACKGROUND_MUTED_MIX), palette.surface, AA_CONTRAST);
+        const alpha = panelAlpha({ surface: palette.surface, text: palette.text, muted }, effectiveDim(prefs.background), photo);
+        const percent = `${Math.round(alpha * 100)}%`;
+        vars["--rr-panel"] = `color-mix(in srgb, var(--rr-color-surface) ${percent}, transparent)`;
+        vars["--color-surface"] = "var(--rr-panel)";
+        vars["--color-surface-alt"] = `color-mix(in srgb, var(--rr-color-surface-alt) ${percent}, transparent)`;
+        vars["--rr-color-text-muted"] = toHex(muted);
+        vars["--rr-panel-alpha"] = String(alpha);
+        vars["--rr-frame-bg"] = "transparent";
+    }
+    return vars;
+}
+function declarations(vars) {
+    return Object.entries(vars)
+        .map(([name, value]) => `${name}:${value} !important;`)
+        .join("");
+}
+/** The element `appearanceCss()` writes into `<head>`, so an update replaces rather than duplicates it. */
+export const APPEARANCE_STYLE_ID = "rr-appearance";
+/** A string as a CSS `url()` argument: quoted, with what could end the string or the declaration escaped. */
+export function cssUrl(url) {
+    const escaped = url.replace(/[\\"\p{Cc}]/gu, (char) => "\\" + char.charCodeAt(0).toString(16) + " ");
+    return `url("${escaped}")`;
+}
+/**
+ * The rules for the background layer, which is two pseudo-elements of `<html>` rather than any markup - so it exists from the
+ * first byte of a server-rendered page (no flash), follows a live preview by rewriting one stylesheet, and needs no component.
+ * `::before` is the picture (or colour): `position: fixed`, behind everything (`z-index: -1` puts it above the page's own canvas
+ * colour and below every in-flow box), its box grown by twice the blur so the blurred edge falls outside the window. `::after` is the
+ * dim: the scheme's surface colour at the chosen opacity. Neither takes a click, and neither prints.
+ */
+export function backgroundCss(background, imageUrl) {
+    if (!background || background.kind === "none") {
+        return "";
+    }
+    const layer = "content:\"\";position:fixed;z-index:-1;pointer-events:none;";
+    if (background.kind === "color") {
+        return [`html::before{${layer}inset:0;background-color:${background.color};}`, "@media print{html::before{display:none}}"].join("\n");
+    }
+    const grow = -Math.round(background.blur * 2);
+    const size = background.fit === "cover"
+        ? "background-size:cover;background-repeat:no-repeat;background-position:center;"
+        : background.fit === "contain"
+            ? "background-size:contain;background-repeat:no-repeat;background-position:center;"
+            : "background-size:auto;background-repeat:repeat;background-position:center;";
+    const image = imageUrl ? `background-image:${cssUrl(imageUrl)};` : "";
+    const color = background.color ?? "var(--rr-color-surface-alt)";
+    const blur = background.blur > 0 ? `filter:blur(${background.blur}px);` : "";
+    return [
+        `html::before{${layer}inset:${grow}px;background-color:${color};${image}${size}${blur}}`,
+        `html::after{${layer}inset:0;background-color:var(--rr-color-surface);opacity:${background.dim};}`,
+        "@media print{html::before,html::after{display:none}}",
+    ].join("\n");
+}
+/**
+ * The stylesheet text for the user's preferences, or `""` when they change nothing. Three rules per set of properties so each
+ * scheme is right in every case: the light set for everything except an explicit dark (`data-theme="dark"`) - which also covers
+ * a page with no `data-theme` at all; the dark set for a dark operating system on a page with no `data-theme` yet (before the
+ * provider ran, or a server-rendered page following "System"); and the dark set for an explicit `data-theme="dark"`. All three are
+ * `html:root...` (0,2,1) so the later dark rules win the equal-specificity tie against the light one. Then the background layer
+ * (`backgroundCss()`).
+ */
+export function appearanceCss(prefs, options = {}) {
+    if (!prefs) {
+        return "";
+    }
+    const light = declarations(themeVariables(prefs, "light", options.measured));
+    const dark = declarations(themeVariables(prefs, "dark", options.measured));
+    const rules = [];
+    if (light || dark) {
+        rules.push(`html:root:not([data-theme="dark"]){${light}}`, `@media (prefers-color-scheme:dark){html:root:not([data-theme]){${dark}}}`, `html:root[data-theme="dark"]{${dark}}`);
+    }
+    if (prefs.colors?.primary) {
+        // Several components write `bg-primary text-white`; on a primary colour the user picked, white may be unreadable.
+        rules.push(".bg-primary.text-white{color:var(--rr-color-text-on-primary)}");
+    }
+    const background = backgroundCss(prefs.background, options.imageUrl);
+    if (background) {
+        // The content region is one translucent panel; what is inside it (`bg-surface`) shows it instead of adding a second layer.
+        rules.push("#app-content{background-color:var(--rr-panel);--color-surface:transparent;}", 
+        // Fields keep a solid surface: a box that is see-through has no edge to find.
+        "#app-content :is(input,select,textarea){--color-surface:var(--rr-color-surface);}", 
+        // Someone who asked their system for less transparency gets solid panels.
+        "@media (prefers-reduced-transparency:reduce){html:root{--rr-panel:var(--rr-color-surface) !important;--color-surface-alt:var(--rr-color-surface-alt) !important;}}", background);
+    }
+    return rules.join("\n");
+}
+/**
+ * The colour pairs the user's choices make hard to read (contrast below 4.5:1, WCAG AA for normal text) in `scheme`: the text on the
+ * surface, and the text on an accent-coloured button. A warning, never a block - it is their app. Nothing for a pair they haven't
+ * touched (the app's own pairs are the app's business).
+ */
+export function contrastWarnings(colors, scheme) {
+    const warnings = [];
+    if (!colors) {
+        return warnings;
+    }
+    if (colors.surface !== undefined || colors.text !== undefined) {
+        const palette = effectivePalette(colors, scheme);
+        const ratio = contrastRatio(palette.text, palette.surface);
+        if (ratio < AA_CONTRAST) {
+            warnings.push({
+                id: "text-surface",
+                ratio,
+                message: `Text on the surface colour has a contrast of ${ratio.toFixed(1)}:1; 4.5:1 or more is easier to read.`,
+            });
+        }
+    }
+    if (colors.accent !== undefined) {
+        const accent = rgbOf(colors.accent);
+        const ratio = contrastRatio(readableOn(accent, DARK_TEXT), accent);
+        if (ratio < AA_CONTRAST) {
+            warnings.push({
+                id: "accent-text",
+                ratio,
+                message: `Text on buttons in the accent colour has a contrast of ${ratio.toFixed(1)}:1; 4.5:1 or more is easier to read.`,
+            });
+        }
+    }
+    return warnings;
+}

package/dist/apps/shared/auth/accountUrl.d.ts

@@ -0,0 +1,2 @@
+/** auth-server's account page, or `undefined` when no auth-server is configured. Tolerates a configured URL with a trailing slash. */
+export declare function accountUrlOf(authServerUrl: string | undefined): string | undefined;

package/dist/apps/shared/auth/accountUrl.js

@@ -0,0 +1,8 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** auth-server's account page, or `undefined` when no auth-server is configured. Tolerates a configured URL with a trailing slash. */
+export function accountUrlOf(authServerUrl) {
+    return authServerUrl ? `${authServerUrl.replace(/\/+$/, "")}/account` : undefined;
+}

package/dist/apps/shared/auth/adminAccess.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Whether the signed-in user holds an administrator role, learned without elevating.
+ *
+ * The JWT the browser carries can't say: auth-server strips every trusted role from a token that isn't elevated
+ * (`TokenUtils.resolveTokenUser()`), so `trusted` (from the JWT) is false for a real administrator until they confirm
+ * their identity on auth-server's elevation page. The role itself lives on the caller's own `User` record, which they may
+ * always read - `GET {authServerUrl}/api/users/me` (the same call auth-server's own UI makes "to check for admin access") -
+ * so the answer is read from there, with the same cross-origin credentials the profile lookups use.
+ *
+ * This only decides whether a menu item is shown. The `/admin` pages and API stay authoritative: they check the role and
+ * the elevation themselves, and the link only navigates (`/admin` then runs the elevation redirect), so a wrong answer
+ * - a stale cache, a tampered `sessionStorage` - can show a link that leads to "no administrator access", never more.
+ */
+/** The roles the server treats as trusted when it isn't configured otherwise (`trusted_roles`, default `["admin"]`). */
+export declare const DEFAULT_TRUSTED_ROLES: readonly string[];
+/** `sessionStorage` key prefix of a remembered answer; the user's uid follows, so another account signing in in the same
+ * tab never inherits it. */
+export declare const ADMIN_ACCESS_KEY_PREFIX = "rapidmx-admin-access:";
+/** How long a remembered answer is trusted - long enough that navigating between the apps costs no request, short enough
+ * that a role granted or removed shows up within the sitting. */
+export declare const ADMIN_ACCESS_TTL_MS: number;
+/** Forgets the lookups in flight (tests). */
+export declare function resetAdminAccessLookups(): void;
+/**
+ * Resolves `true` when `userUid`'s own `User` record on auth-server carries one of `trustedRoles`, `false` when it
+ * doesn't, and `undefined` when that couldn't be established (unreachable, blocked by CORS, not signed in, an unexpected
+ * body, or a record that isn't this user's). Only a real answer is remembered; a failure is asked again on the next page.
+ * Never rejects.
+ */
+export declare function lookUpAdminAccess(authServerUrl: string, userUid: string, trustedRoles?: readonly string[], now?: number): Promise<boolean | undefined>;

package/dist/apps/shared/auth/adminAccess.js

@@ -0,0 +1,89 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { authApiFetch } from "@rapidmx/react-shared/util/api.js";
+/**
+ * Whether the signed-in user holds an administrator role, learned without elevating.
+ *
+ * The JWT the browser carries can't say: auth-server strips every trusted role from a token that isn't elevated
+ * (`TokenUtils.resolveTokenUser()`), so `trusted` (from the JWT) is false for a real administrator until they confirm
+ * their identity on auth-server's elevation page. The role itself lives on the caller's own `User` record, which they may
+ * always read - `GET {authServerUrl}/api/users/me` (the same call auth-server's own UI makes "to check for admin access") -
+ * so the answer is read from there, with the same cross-origin credentials the profile lookups use.
+ *
+ * This only decides whether a menu item is shown. The `/admin` pages and API stay authoritative: they check the role and
+ * the elevation themselves, and the link only navigates (`/admin` then runs the elevation redirect), so a wrong answer
+ * - a stale cache, a tampered `sessionStorage` - can show a link that leads to "no administrator access", never more.
+ */
+/** The roles the server treats as trusted when it isn't configured otherwise (`trusted_roles`, default `["admin"]`). */
+export const DEFAULT_TRUSTED_ROLES = ["admin"];
+/** `sessionStorage` key prefix of a remembered answer; the user's uid follows, so another account signing in in the same
+ * tab never inherits it. */
+export const ADMIN_ACCESS_KEY_PREFIX = "rapidmx-admin-access:";
+/** How long a remembered answer is trusted - long enough that navigating between the apps costs no request, short enough
+ * that a role granted or removed shows up within the sitting. */
+export const ADMIN_ACCESS_TTL_MS = 30 * 60 * 1000;
+/** Lookups in flight, by key, so two components asking at once make one request. */
+const lookups = new Map();
+/** Forgets the lookups in flight (tests). */
+export function resetAdminAccessLookups() {
+    lookups.clear();
+}
+function readRemembered(key, now) {
+    try {
+        const stored = JSON.parse(sessionStorage.getItem(key) ?? "null");
+        if (typeof stored?.admin === "boolean" && typeof stored.at === "number" && now - stored.at >= 0 && now - stored.at < ADMIN_ACCESS_TTL_MS) {
+            return stored.admin;
+        }
+    }
+    catch {
+        // Unreadable, or storage unavailable - ask again.
+    }
+    return undefined;
+}
+function remember(key, admin, now) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify({ admin, at: now }));
+    }
+    catch {
+        // Storage unavailable - the next page load asks again.
+    }
+}
+/**
+ * Resolves `true` when `userUid`'s own `User` record on auth-server carries one of `trustedRoles`, `false` when it
+ * doesn't, and `undefined` when that couldn't be established (unreachable, blocked by CORS, not signed in, an unexpected
+ * body, or a record that isn't this user's). Only a real answer is remembered; a failure is asked again on the next page.
+ * Never rejects.
+ */
+export function lookUpAdminAccess(authServerUrl, userUid, trustedRoles = DEFAULT_TRUSTED_ROLES, now = Date.now()) {
+    const key = `${ADMIN_ACCESS_KEY_PREFIX}${userUid}`;
+    const remembered = readRemembered(key, now);
+    if (remembered !== undefined) {
+        return Promise.resolve(remembered);
+    }
+    const inFlight = lookups.get(key);
+    if (inFlight) {
+        return inFlight;
+    }
+    const lookup = (async () => {
+        try {
+            const user = await authApiFetch(authServerUrl, "/users/me");
+            if (!user || user.uid !== userUid || !Array.isArray(user.roles)) {
+                return undefined;
+            }
+            const admin = user.roles.some((role) => typeof role === "string" && trustedRoles.includes(role));
+            remember(key, admin, now);
+            return admin;
+        }
+        catch {
+            return undefined;
+        }
+        finally {
+            // Answered: what was learned is in storage; a failure may be asked again.
+            lookups.delete(key);
+        }
+    })();
+    lookups.set(key, lookup);
+    return lookup;
+}

package/dist/apps/shared/components/admin/layout/AdminShell.d.ts

@@ -2,7 +2,7 @@ import "../../../styles/app.css";
 import React, { PropsWithChildren } from "react";
 import { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { PluginNav, PluginNavProps } from "../../../plugins/pluginNav.js";
-export type AdminSection = "mailboxes" | "quarantine" | "ingestQueue" | "domains" | "auditLog" | "distributionLists" | "transportRules" | "escrowScopes" | "retentionPolicy" | "encryptionPolicy" | "mailboxPolicy" | "setup" | "dataRequests" | "plugins" | "branding";
+export type AdminSection = "mailboxes" | "quarantine" | "ingestQueue" | "domains" | "auditLog" | "distributionLists" | "transportRules" | "escrowScopes" | "retentionPolicy" | "encryptionPolicy" | "mailboxPolicy" | "setup" | "dataRequests" | "plugins" | "branding" | "signingCertificates";
 /** A core `AdminSection`, or a plugin's `adminNav` item id (see `PluginNav`). */
 export type AdminShellActive = AdminSection | (string & {});
 export interface AdminShellProps extends PluginNavProps {

package/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -1,11 +1,11 @@
-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
 ///////////////////////////////////////////////////////////////////////////////
 import "../../../styles/app.css";
 import { useEffect, useState } from "react";
-import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineDocumentArrowDown, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, } from "react-icons/hi2";
+import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
@@ -13,7 +13,9 @@ import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import { BrandingFooter } from "../../layout/BrandingChrome.js";
+import { FrameBrandingFooter, useBrandingHtml } from "../../layout/BrandingChrome.js";
+import RailIcon from "../../layout/RailIcon.js";
+import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
 import UserMenu from "../../layout/UserMenu.js";
 import { clearElevationAttempt, elevationAttemptedRecently, elevationUrl, isElevationRequired, recordElevationAttempt, } from "../elevation.js";
 import { signOutOfConsole } from "../signOut.js";
@@ -68,6 +70,12 @@ const NAV_ITEMS = [
         label: "Data Requests",
         icon: HiOutlineDocumentArrowDown,
     },
+    {
+        id: "signingCertificates",
+        href: "/admin/signing-certificates",
+        label: "Signing Certificates",
+        icon: HiOutlineDocumentCheck,
+    },
     { id: "plugins", href: "/admin/plugins", label: "Plugins", icon: HiOutlinePuzzlePiece },
     { id: "branding", href: "/admin/branding", label: "Branding", icon: HiOutlinePaintBrush },
 ];
@@ -105,6 +113,7 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     // `branding` only feeds the footer below: the admin-configured header is for the webmail and public pages, not the
     // console. `useBranding()` is still what injects the custom stylesheet and supplies the rail's icon.
     const { branding, iconSrc } = useBranding();
+    const footer = useBrandingHtml(branding?.footerHtml);
     useRedirectIfUnauthenticated(userUid, authServerUrl);
     useEffect(() => {
         if (!userUid) {
@@ -184,12 +193,13 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     else {
         const navItems = adminNavItems(pluginNav);
         const activeItem = [...navItems, ...OFF_RAIL_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": "Admin 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" }), navItems.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": "Admin 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 }), navItems.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: navItems, 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: navItems, 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 (_jsxs(_Fragment, { children: [content, _jsx(BrandingFooter, { branding: branding })] }));
+    // 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 (_jsxs(AppearanceProvider, { userUid: userUid, lookUp: false, children: [content, _jsx(FrameBrandingFooter, { parsed: footer, appTitle: [...adminNavItems(pluginNav), ...OFF_RAIL_ITEMS].find((item) => item.id === active)?.label })] }));
 }

package/dist/apps/shared/components/admin/mailboxes/ShareAccessCard.d.ts

@@ -1,12 +1,17 @@
 import React from "react";
 export interface ShareAccessCardProps {
     mailboxUid: string;
-    /** The mailbox's owner - their own grant is shown but can't be revoked from here. */
+    /** The mailbox's owner: with one, only the owner can grant access to it. Without, the mailbox is shared and an
+     * administrator grants access here - to themselves included. */
     ownerUserUid?: string;
+    /** The signed-in administrator, for "Add me" on a shared mailbox. */
+    currentUserUid?: string;
 }
 /**
- * Lets an admin (or, eventually, the mailbox owner) view and edit a mailbox's delegate access — the
- * mechanism behind Exchange-style shared mailboxes. `records` on a mailbox's own ACL doubles as both the
- * owner's grant (if any) and every delegate's — see `BaseMailboxRoute`'s doc comment in `@rapidmx/restapi`.
+ * A mailbox's members - the mechanism behind Exchange-style shared mailboxes - through the Sharing endpoints
+ * (`/mail/mailboxes/:id/access`), the audited way an administrator reaches a mailbox they hold no grant on. An
+ * administrator can review any mailbox's members and revoke any of them; they can grant access only on a shared
+ * (ownerless) mailbox - themselves included, which is how it appears in their own mail client. A personal mailbox is
+ * shared by its owner (or by an administrator impersonating them).
  */
-export default function ShareAccessCard({ mailboxUid, ownerUserUid }: ShareAccessCardProps): React.JSX.Element;
+export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserUid }: ShareAccessCardProps): React.JSX.Element;