@rapidmx/web-client 0.10.0 → 0.12.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/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { resolveEscrowScopeHolder } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import StringListField from "../../forms/StringListField.js";
+import PrincipalListField from "../../sharing/PrincipalListField.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /** Builds an all-zeroes starting point for the "new" page — `notBefore`/`notAfter` default to "now" so an
  * admin pasting in a cert's own dates only has to touch what actually differs. */
@@ -31,5 +32,5 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
     function set(key, next) {
         onChange({ ...value, [key]: next });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Public key" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "The fields of an already-issued certificate \u2014 this server never generates or holds the corresponding private key." }), _jsx(FormField, { label: "Public key (base64)", htmlFor: "publicKey", children: _jsx("textarea", { id: "publicKey", className: `${INPUT_CLASS} font-mono text-xs`, rows: 4, value: value.publicKey, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("publicKey", e.target.value) }) }), _jsx(FormField, { label: "Key type", htmlFor: "keyType", children: _jsx("input", { id: "keyType", type: "text", className: INPUT_CLASS, value: value.keyType, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("keyType", e.target.value), placeholder: "x509" }) }), _jsx(FormField, { label: "Fingerprint (hex SHA-256)", htmlFor: "fingerprint", children: _jsx("input", { id: "fingerprint", type: "text", className: `${INPUT_CLASS} font-mono`, value: value.fingerprint, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("fingerprint", e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4", children: [_jsx(FormField, { label: "Not before", htmlFor: "notBefore", children: _jsx("input", { id: "notBefore", type: "datetime-local", className: INPUT_CLASS, value: value.notBefore, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notBefore", e.target.value) }) }), _jsx(FormField, { label: "Not after", htmlFor: "notAfter", children: _jsx("input", { id: "notAfter", type: "datetime-local", className: INPUT_CLASS, value: value.notAfter, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notAfter", e.target.value) }) })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Holders & dual control" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Every uid below is granted the eDiscovery/compliance holder role for this scope \u2014 a deliberately separate role from server administration. At least one holder is required." }), _jsx(StringListField, { label: "Holder user uids", id: "holderUserUids", values: value.holderUserUids, onChange: (holderUserUids) => set("holderUserUids", holderUserUids), placeholder: "User uid to add", emptyMessage: "No holders added yet.", disabled: disabled }), _jsx(FormField, { label: "Required holders (M-of-N dual control)", htmlFor: "requiredHolders", children: _jsx("input", { id: "requiredHolders", type: "number", className: INPUT_CLASS, value: value.requiredHolders, disabled: disabled, onChange: (e) => set("requiredHolders", Number(e.target.value) || 1) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.notifySubjectOnAccess, disabled: disabled, onChange: (e) => set("notifySubjectOnAccess", e.target.checked) }), "Notify subject on access"] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Public key" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "The fields of an already-issued certificate \u2014 this server never generates or holds the corresponding private key." }), _jsx(FormField, { label: "Public key (base64)", htmlFor: "publicKey", children: _jsx("textarea", { id: "publicKey", className: `${INPUT_CLASS} font-mono text-xs`, rows: 4, value: value.publicKey, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("publicKey", e.target.value) }) }), _jsx(FormField, { label: "Key type", htmlFor: "keyType", children: _jsx("input", { id: "keyType", type: "text", className: INPUT_CLASS, value: value.keyType, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("keyType", e.target.value), placeholder: "x509" }) }), _jsx(FormField, { label: "Fingerprint (hex SHA-256)", htmlFor: "fingerprint", children: _jsx("input", { id: "fingerprint", type: "text", className: `${INPUT_CLASS} font-mono`, value: value.fingerprint, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("fingerprint", e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4", children: [_jsx(FormField, { label: "Not before", htmlFor: "notBefore", children: _jsx("input", { id: "notBefore", type: "datetime-local", className: INPUT_CLASS, value: value.notBefore, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notBefore", e.target.value) }) }), _jsx(FormField, { label: "Not after", htmlFor: "notAfter", children: _jsx("input", { id: "notAfter", type: "datetime-local", className: INPUT_CLASS, value: value.notAfter, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notAfter", e.target.value) }) })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Holders & dual control" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Every uid below is granted the eDiscovery/compliance holder role for this scope \u2014 a deliberately separate role from server administration. At least one holder is required." }), _jsx(PrincipalListField, { label: "Holder user uids", values: value.holderUserUids, onChange: (holderUserUids) => set("holderUserUids", holderUserUids), resolve: resolveEscrowScopeHolder, emptyMessage: "No holders added yet.", disabled: disabled }), _jsx(FormField, { label: "Required holders (M-of-N dual control)", htmlFor: "requiredHolders", children: _jsx("input", { id: "requiredHolders", type: "number", className: INPUT_CLASS, value: value.requiredHolders, disabled: disabled, onChange: (e) => set("requiredHolders", Number(e.target.value) || 1) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.notifySubjectOnAccess, disabled: disabled, onChange: (e) => set("notifySubjectOnAccess", e.target.checked) }), "Notify subject on access"] })] })] }));
 }

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;

package/dist/apps/shared/components/admin/mailboxes/ShareAccessCard.js

@@ -1,59 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getMailboxAcl, grantMailboxAccess, revokeMailboxAccess } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listMailboxAccess, removeMailboxAccess, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-const DEFAULT_DELEGATE_ACTIONS = ["read", "list", "count", "exists"];
+import PrincipalPicker from "../../sharing/PrincipalPicker.js";
+const ROLE_LABELS = { viewer: "Read only", manager: "Full access" };
+function roleLabel(member) {
+    if (member.role === "viewer")
+        return ROLE_LABELS.viewer;
+    if (member.role === "manager")
+        return ROLE_LABELS.manager;
+    return (member.actions ?? []).join(", ");
+}
 /**
- * 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 }) {
-    const [acl, setAcl] = useState(null);
+export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserUid }) {
+    const [members, setMembers] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const [notice, setNotice] = useState(null);
-    const [newUserUid, setNewUserUid] = useState("");
     const [saving, setSaving] = useState(false);
     const [revokeTarget, setRevokeTarget] = useState(null);
+    // An entry that is not a user uid, being replaced with the user it was meant for.
+    const [replacing, setReplacing] = useState(null);
     function reload() {
         setLoading(true);
         setError(null);
-        getMailboxAcl(mailboxUid)
-            .then(setAcl)
+        listMailboxAccess(mailboxUid)
+            .then(setMembers)
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load share settings."))
             .finally(() => setLoading(false));
     }
     useEffect(reload, [mailboxUid]);
-    async function handleGrant(e) {
-        e.preventDefault();
-        const userUid = newUserUid.trim();
-        if (!userUid) {
-            return;
-        }
+    async function addMe(userUid) {
         setSaving(true);
         setError(null);
-        setNotice(null);
         try {
-            // `grantMailboxAccess()` replaces any existing record for this uid, so granting read access to someone
-            // who already has more (e.g. the owner) would silently downgrade them. Merge with their current actions.
-            const current = await getMailboxAcl(mailboxUid);
-            const existing = current.records.find((record) => record.userOrRoleId === userUid)?.actions ?? [];
-            const missing = DEFAULT_DELEGATE_ACTIONS.filter((action) => !existing.includes(action));
-            if (missing.length === 0) {
-                setNotice(`${userUid} already has this access.`);
-                setNewUserUid("");
-                return;
-            }
-            await grantMailboxAccess(mailboxUid, userUid, [...existing, ...missing]);
-            setNewUserUid("");
+            await setMailboxAccess(mailboxUid, userUid, "manager");
             reload();
         }
         catch (err) {
@@ -63,15 +56,33 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid }) {
             setSaving(false);
         }
     }
+    // Once the person is granted, the entry they replace (if any) is removed: the string it named never matched anyone.
+    async function handleGranted() {
+        const stale = replacing;
+        setReplacing(null);
+        let failure = null;
+        if (stale) {
+            try {
+                await removeMailboxAccess(mailboxUid, stale.userOrRoleId);
+            }
+            catch (err) {
+                failure = err instanceof ApiRequestError ? err.message : "Could not remove the old entry.";
+            }
+        }
+        reload();
+        // After the reload, which clears the error it started with.
+        if (failure) {
+            setError(failure);
+        }
+    }
     // Only ever invoked from the revoke-confirmation modal below, which only renders once `revokeTarget` is set.
     async function handleRevoke() {
         const userOrRoleId = revokeTarget;
         setRevokeTarget(null);
         setSaving(true);
         setError(null);
-        setNotice(null);
         try {
-            await revokeMailboxAccess(mailboxUid, userOrRoleId);
+            await removeMailboxAccess(mailboxUid, userOrRoleId);
             reload();
         }
         catch (err) {
@@ -81,5 +92,9 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid }) {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Shared access" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Grants read access to this mailbox for another user, independent of ownership." }), error && _jsx(Alert, { children: error }), notice && !error && _jsx("div", { className: "mb-4 text-sm text-text-muted", children: notice }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("ul", { className: "flex flex-col gap-2 mb-4", children: [(acl?.records ?? []).length === 0 && (_jsx("li", { className: "text-sm text-text-muted", children: "No grants on this mailbox yet." })), acl?.records.map((record) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: record.userOrRoleId }), _jsx("div", { className: "text-xs text-text-muted", children: record.actions.join(", ") })] }), record.userOrRoleId === ownerUserUid ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Owner" })) : (_jsx("button", { type: "button", onClick: () => setRevokeTarget(record.userOrRoleId), disabled: saving, className: "text-sm text-danger hover:underline disabled:opacity-55", children: "Revoke" }))] }, record.userOrRoleId)))] })), _jsxs("form", { onSubmit: handleGrant, className: "flex gap-2", children: [_jsx("input", { type: "text", value: newUserUid, onChange: (e) => setNewUserUid(e.target.value), placeholder: "User uid to grant access to", className: "flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary" }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Grant" })] }), _jsxs(Modal, { open: revokeTarget !== null, onClose: () => setRevokeTarget(null), title: "Revoke access", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Revoke ", _jsx("strong", { className: "break-all", children: revokeTarget }), "\u2019s access to this mailbox? They lose it immediately."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRevokeTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void handleRevoke(), children: "Revoke" })] })] })] }));
+    const shared = !ownerUserUid;
+    const isMember = members.some((member) => member.userOrRoleId === currentUserUid);
+    return (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Shared access" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: shared
+                    ? "Who has access to this shared mailbox. Adding yourself is how it appears in your own mail client; every change is recorded in the audit log."
+                    : "Who the owner has shared this mailbox with. You can review and revoke access; only the owner can grant it (impersonate them to do so)." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("ul", { className: "flex flex-col gap-2 mb-4", children: [members.length === 0 && _jsx("li", { className: "text-sm text-text-muted", children: "No grants on this mailbox yet." }), members.map((member) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: member.userOrRoleId }), _jsx("div", { className: "text-xs text-text-muted", children: roleLabel(member) }), member.noEffect && (_jsxs("div", { className: "text-xs text-danger mt-0.5", children: ["Not a user - this entry has no effect", shared ? " - replace it with the user it was meant for or remove it." : " - remove it."] }))] }), _jsxs("span", { className: "flex items-center gap-3 shrink-0", children: [member.noEffect && shared && (_jsx("button", { type: "button", onClick: () => setReplacing(member), disabled: saving, className: "text-sm text-primary-dark hover:underline disabled:opacity-55", children: "Replace with a user" })), _jsx("button", { type: "button", onClick: () => setRevokeTarget(member.userOrRoleId), disabled: saving, className: "text-sm text-danger hover:underline disabled:opacity-55", children: "Revoke" })] })] }, member.userOrRoleId)))] })), shared && (_jsxs(_Fragment, { children: [currentUserUid && !isMember && !loading && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mb-3", disabled: saving, onClick: () => void addMe(currentUserUid), children: "Add me" })), _jsx(PrincipalPicker, { mailboxUid: mailboxUid, roleLabels: ROLE_LABELS, initialPrincipal: replacing?.userOrRoleId, defaultRole: replacing?.role === "manager" ? "manager" : "viewer", onGranted: handleGranted, onCancel: replacing ? () => setReplacing(null) : undefined }, replacing?.userOrRoleId ?? "new")] })), _jsxs(Modal, { open: revokeTarget !== null, onClose: () => setRevokeTarget(null), title: "Revoke access", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Revoke ", _jsx("strong", { className: "break-all", children: revokeTarget }), "\u2019s access to this mailbox? They lose it immediately."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRevokeTarget(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void handleRevoke(), children: "Revoke" })] })] })] }));
 }

package/dist/apps/shared/components/admin/settings/BrandingForm.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+/** A header that uses both variables - the snippet the Branding page offers to copy. */
+export declare const HEADER_HTML_EXAMPLE = "<div style=\"display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem\">\n    <span>{APP_TITLE}</span>\n    <span>{USER_MENU}</span>\n</div>";
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export declare function isSvgFile(file: File): boolean;
 export interface BrandingFormProps {

package/dist/apps/shared/components/admin/settings/BrandingForm.js

@@ -8,8 +8,14 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { deleteBrandingIcon, deleteBrandingLogo, deleteBrandingStylesheet, updateBranding, uploadBrandingIcon, uploadBrandingLogo, uploadBrandingStylesheet, } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
+/** A header that uses both variables - the snippet the Branding page offers to copy. */
+export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
+    <span>{APP_TITLE}</span>
+    <span>{USER_MENU}</span>
+</div>`;
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export function isSvgFile(file) {
     return file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
@@ -113,5 +119,5 @@ export default function BrandingForm({ branding, onChange, embedded = false }) {
                                                 }), children: "Remove icon" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Icon URL", className: INPUT_CLASS, value: iconUrlInput, onChange: (e) => setIconUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || iconUrlInput === (branding.iconUrl ?? ""), loading: assetBusy === "icon-url", onClick: () => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Custom stylesheet" }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-sm text-text-muted truncate", children: branding.stylesheetUrl || "None configured" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "stylesheet-upload", disabled: assetBusy !== null, onClick: () => stylesheetFileRef.current?.click(), children: "Upload CSS file" }), _jsx("input", { ref: stylesheetFileRef, type: "file", accept: "text/css,.css", "aria-label": "Upload stylesheet", className: "hidden", onChange: handleStylesheetFileChange }), branding.stylesheetUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "stylesheet-delete", onClick: () => void runAsset("stylesheet-delete", async () => {
                                             await deleteBrandingStylesheet();
                                             return { ...branding, stylesheetUrl: undefined };
-                                        }), children: "Remove stylesheet" }))] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external stylesheet URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Stylesheet URL", className: INPUT_CLASS, value: stylesheetUrlInput, onChange: (e) => setStylesheetUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? ""), loading: assetBusy === "stylesheet-url", onClick: () => void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput })), children: "Set" })] })] })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 pt-2 border-t border-border", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Company name" }), _jsx("input", { "aria-label": "Company name", className: INPUT_CLASS, value: companyName, onChange: (e) => setCompanyName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Product title" }), _jsx("input", { "aria-label": "Product title", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "Shown as the browser tab title." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Header HTML (optional)" }), _jsx("textarea", { "aria-label": "Header HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: headerHtml, onChange: (e) => setHeaderHtml(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Footer HTML (optional)" }), _jsx("textarea", { "aria-label": "Footer HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: footerHtml, onChange: (e) => setFooterHtml(e.target.value) })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] })] }));
+                                        }), children: "Remove stylesheet" }))] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external stylesheet URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Stylesheet URL", className: INPUT_CLASS, value: stylesheetUrlInput, onChange: (e) => setStylesheetUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? ""), loading: assetBusy === "stylesheet-url", onClick: () => void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput })), children: "Set" })] })] })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 pt-2 border-t border-border", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Company name" }), _jsx("input", { "aria-label": "Company name", className: INPUT_CLASS, value: companyName, onChange: (e) => setCompanyName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Product title" }), _jsx("input", { "aria-label": "Product title", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "Shown as the browser tab title." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Header HTML (optional)" }), _jsx("textarea", { "aria-label": "Header HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: headerHtml, onChange: (e) => setHeaderHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: ["A header replaces the app's own title bar and the icon at the top of the icon rail, and stays at the top of the window. Write", " ", _jsx("code", { children: "{USER_MENU}" }), " where the account menu (avatar, Settings, Sign Out) should go, and ", _jsx("code", { children: "{APP_TITLE}" }), " ", "where the name of the app on screen should show. Both work in the footer too. ", _jsx("code", { children: "{USER_MENU}" }), " is replaced once (the header's, else the footer's); without it the menu sits in a small cell at the right end of the header, so it is never lost. Put it where your styles don't hide it on a phone."] })] }), _jsxs("div", { className: "flex flex-col gap-1.5 text-sm", role: "group", "aria-label": "Header example", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: "Example header" }), _jsx(CopyButton, { value: HEADER_HTML_EXAMPLE, label: "Copy the example header HTML" })] }), _jsx("pre", { className: "overflow-x-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs text-text", children: HEADER_HTML_EXAMPLE })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Footer HTML (optional)" }), _jsx("textarea", { "aria-label": "Footer HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: footerHtml, onChange: (e) => setFooterHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: [_jsx("code", { children: "{APP_TITLE}" }), " works here as well, and ", _jsx("code", { children: "{USER_MENU}" }), " takes the account menu (opening upward) when the header has none."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] })] }));
 }