@spooky-sync/core 0.0.1-canary.263 → 0.0.1-canary.265

package/src/modules/auth/impersonation-banner.ts

@@ -1,31 +1,128 @@
 import type { ImpersonationInfo } from './impersonation';
 
-/** Height of the warning layer the page is shifted down by. Also published as
- *  the CSS variable `--sp00ky-impersonation-banner-height` on `<html>` (`0px`
- *  when hidden), so an app can offset its own fixed header. */
-export const BANNER_HEIGHT_PX = 44;
+/** Default height of the warning bar above the framed page. The effective
+ *  height is published as the CSS variable
+ *  `--sp00ky-impersonation-banner-height` on `<html>` (`0px` when hidden), so
+ *  an app can offset its own fixed header. */
+export const BANNER_HEIGHT_PX = 40;
 
-/** Radius of the page's new top corners. */
-const PAGE_RADIUS_PX = 14;
+/** Default gutter left, right and below the framed page. */
+export const FRAME_INSET_PX = 10;
+
+/** Default radius of the framed page's corners. */
+export const PAGE_RADIUS_PX = 14;
+
+/** The default backdrop: a warm amber-to-orange wash with a faint diagonal
+ *  hazard rake over it. Layered background-image, topmost layer first. */
+export const BANNER_BACKGROUND =
+  'repeating-linear-gradient(45deg, rgba(69, 26, 3, .07) 0 9px, rgba(69, 26, 3, 0) 9px 18px),' +
+  ' linear-gradient(135deg, #fbbf24 0%, #fb923c 52%, #f59e0b 100%)';
 
 const HOST_TAG = 'sp00ky-impersonation-banner';
 
-/** Hazard stripes: the warning layer, and the `<html>` backdrop the page's
- *  rounded corners reveal. */
-const STRIPES = 'repeating-linear-gradient(45deg, #f2b600 0 14px, #1c1403 14px 28px)';
+/** How long a `custom` banner has to acknowledge itself before the built-in
+ *  one is shown anyway. Long enough for a first paint, short enough that
+ *  nobody browses unwarned. */
+export const CUSTOM_BANNER_GRACE_MS = 2500;
+
+/**
+ * Restyling of the built-in banner. Every field is optional; anything unset
+ * keeps the default. Colours are plain CSS values, so a project can pass its
+ * own tokens (`var(--brand-warning)`) as long as they resolve at the document
+ * level.
+ */
+export interface ImpersonationBannerTheme {
+  /** Height of the warning bar above the page. */
+  heightPx?: number;
+  /** Gutter left, right and below the page. `0` frames only from the top. */
+  insetPx?: number;
+  /** Radius of the framed page's corners. `0` squares them off. */
+  radiusPx?: number;
+  /** The backdrop behind the page. Any CSS `background` value. */
+  background?: string;
+  /** Colour of the warning text on the backdrop. */
+  text?: string;
+  /** Background of the Stop button. */
+  accent?: string;
+  /** Text colour of the Stop button. */
+  accentText?: string;
+  /** Label for the Stop button. Defaults to `Stop`. */
+  stopLabel?: string;
+  /** The warning sentence. Defaults to `Impersonating <target> as <admin>`.
+   *  Wrap a run in `**` to emphasise it; the result is text, never markup. */
+  label?: (info: ImpersonationInfo) => string;
+  /** Keep the bar but leave the page's own layout completely alone. The CSS
+   *  variable is still published, so the app can do its own offset. */
+  noPageShift?: boolean;
+}
+
+export interface ImpersonationBannerConfig {
+  /**
+   * - `'default'` renders the built-in banner.
+   * - `'custom'` leaves the page alone so the app can render its own from
+   *   `useImpersonation()` / `auth.subscribeImpersonation`. Acknowledge it
+   *   with `client.acknowledgeImpersonationBanner()` while it is on screen;
+   *   if nothing acknowledges within {@link CUSTOM_BANNER_GRACE_MS}, the
+   *   built-in banner appears, on the assumption that the custom one failed
+   *   to render rather than that nobody should be warned.
+   * - `'none'` renders nothing, ever. The app takes over responsibility for
+   *   telling whoever is looking at the page that it is not their session.
+   */
+  mode?: 'default' | 'custom' | 'none';
+  /** Restyle the built-in banner (also used if `custom` falls back). */
+  theme?: ImpersonationBannerTheme;
+}
+
+interface ResolvedTheme
+  extends Required<Omit<ImpersonationBannerTheme, 'label' | 'stopLabel'>> {
+  stopLabel: string;
+  label: (info: ImpersonationInfo) => string;
+}
+
+function resolveTheme(theme: ImpersonationBannerTheme = {}): ResolvedTheme {
+  return {
+    heightPx: theme.heightPx ?? BANNER_HEIGHT_PX,
+    insetPx: theme.insetPx ?? FRAME_INSET_PX,
+    radiusPx: theme.radiusPx ?? PAGE_RADIUS_PX,
+    background: theme.background ?? BANNER_BACKGROUND,
+    text: theme.text ?? '#45230a',
+    accent: theme.accent ?? '#45230a',
+    accentText: theme.accentText ?? '#fff7ed',
+    stopLabel: theme.stopLabel ?? 'Stop',
+    noPageShift: theme.noPageShift ?? false,
+    label: theme.label ?? ((info) => `Impersonating **${info.target}** as ${info.admin}`),
+  };
+}
 
-/** Keeps only the area OUTSIDE a corner's curve, so the nub is striped and
- *  everything inside the curve stays the app's own. `center` is the curve's
- *  centre inside the corner square. */
-function cornerMask(center: string): string {
-  return `radial-gradient(circle ${PAGE_RADIUS_PX}px at ${center}, transparent 0 ${PAGE_RADIUS_PX}px, #000 ${PAGE_RADIUS_PX}px)`;
+/**
+ * How much the page has to shrink to fit inside the frame, and how wide its
+ * layout box must be to fill the frame at that scale.
+ *
+ * Pure so the arithmetic is unit tested: the frame takes `heightPx` off the
+ * top and `insetPx` off the other three sides, and the page is scaled
+ * uniformly (one factor for both axes, so nothing is distorted) by the
+ * vertical ratio. `width` is the CSS width the page's box needs, since a
+ * zoomed box occupies `width * scale` of its parent.
+ */
+export function frameMetrics(
+  viewport: { width: number; height: number },
+  theme: { heightPx: number; insetPx: number }
+): { scale: number; width: number; contentHeight: number } {
+  const { width: w, height: h } = viewport;
+  const contentHeight = Math.max(1, h - theme.heightPx - theme.insetPx);
+  const contentWidth = Math.max(1, w - theme.insetPx * 2);
+  // Uniform: the vertical fit decides, so the aspect ratio is untouched and
+  // the page keeps every pixel of its height reachable.
+  const scale = h > 0 ? contentHeight / h : 1;
+  return { scale, width: contentWidth / scale, contentHeight };
 }
 
 // The shadow root keeps app CSS away from the bar, but the host element itself
 // is in the page and matches the page's selectors (`div { display: none }`).
 // An `!important` rule on `:host` wins over the page's own `!important`
 // (inner tree context), which keeps the host rendered whatever the app says.
-const STYLE = `
+export function bannerCss(t: ResolvedTheme): string {
+  return `
 :host {
   all: initial !important;
   display: block !important;
@@ -35,107 +132,155 @@ const STYLE = `
   transform: none !important;
   clip-path: none !important;
 }
-.layer {
-  position: fixed; inset: 0 0 auto 0; z-index: 2147483646; pointer-events: none;
-  height: ${BANNER_HEIGHT_PX}px; background: ${STRIPES};
-}
-/* The page's rounded top corners, drawn over whatever the app puts there.
-   The body element's own border-radius rounds its background, but a fixed app
-   header is not clipped by it, so each corner is also painted here: a striped
-   square masked down to the nub OUTSIDE the corner's curve, so the app's own
-   colour still shows inside it. */
-.corners {
-  position: fixed; left: 0; right: 0; top: ${BANNER_HEIGHT_PX}px;
-  height: ${PAGE_RADIUS_PX}px; z-index: 2147483646; pointer-events: none;
-}
-.corner {
-  position: absolute; top: 0; width: ${PAGE_RADIUS_PX}px; height: ${PAGE_RADIUS_PX}px;
-  background: ${STRIPES};
-}
-.corner.left {
-  left: 0;
-  -webkit-mask: ${cornerMask('100% 100%')};
-  mask: ${cornerMask('100% 100%')};
-}
-.corner.right {
-  right: 0;
-  -webkit-mask: ${cornerMask('0% 100%')};
-  mask: ${cornerMask('0% 100%')};
-}
+/* The bar. The backdrop itself is painted on the root element, which is
+   BEHIND the page's sheet; an overlay here would cover the page. The bar
+   repeats that background with a fixed attachment, so its gradient lines up
+   with the root's to the pixel. */
 .bar {
-  position: fixed; inset: 0 0 auto 0; height: ${BANNER_HEIGHT_PX}px; z-index: 2147483647;
+  position: fixed; inset: 0 0 auto 0; height: ${t.heightPx}px; z-index: 2147483647;
   display: flex; align-items: center; justify-content: center; gap: 10px;
-  padding: 0 12px; box-sizing: border-box;
-  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  padding: 0 ${Math.max(t.insetPx, 10)}px; box-sizing: border-box;
+  background-image: ${t.background};
+  background-attachment: fixed;
+  color: ${t.text};
+  font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  letter-spacing: .01em;
 }
-.pill {
-  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
-  padding: 6px 10px; border-radius: 999px;
-  background: rgba(14, 11, 2, .88); color: #fde68a;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
+.sign {
+  flex: none; display: grid; place-items: center;
+  width: 17px; height: 17px; border-radius: 50%;
+  background: ${t.text}; color: #fff7ed;
+  font-size: 11px; font-weight: 800;
 }
-.sign { flex: none; font-size: 14px; line-height: 1; }
 .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-.text b { color: #fff; font-weight: 800; }
+.text b { font-weight: 800; }
 button {
   flex: none; cursor: pointer; border: 0; border-radius: 999px;
-  background: #fde68a; color: #1c1403;
-  font: 800 12px/1 system-ui, sans-serif; padding: 7px 12px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
+  background: ${t.accent}; color: ${t.accentText};
+  font: 700 11.5px/1 system-ui, sans-serif; padding: 6px 11px;
+  box-shadow: 0 1px 2px rgba(69, 26, 3, .35);
 }
-button:hover { background: #fff; }
+button:hover { filter: brightness(1.15); }
 button:disabled { opacity: .6; cursor: progress; }
 @media (max-width: 520px) {
-  .bar { gap: 6px; padding: 0 8px; }
-  .pill { padding: 5px 8px; }
+  .bar { gap: 7px; padding: 0 8px; font-size: 11.5px; }
+  .sign { display: none; }
 }
 `;
+}
 
 /**
  * The "you are impersonating" warning.
  *
- * Drawn as a layer the page sits on top of: hazard stripes fill the top of the
- * viewport, the page is pushed down by the bar's height and its new top
- * corners are rounded, so the stripes show through around them. The bar itself
- * lives in a closed shadow root, so app styles cannot hide or restyle it; the
- * page-shifting styles are set inline and `!important` on `<html>` / `<body>`
- * (nothing in a stylesheet outranks that), and the previous inline styles are
- * restored on unmount.
+ * The page becomes a sheet on a warm striped backdrop: a bar across the top
+ * names the session, and the page itself is scaled down to sit inside the
+ * remaining frame with rounded corners. Scaled, not pushed: growing the
+ * document moved the bottom of an app-shell layout off-screen, while a
+ * uniform scale keeps the aspect ratio and every pixel reachable, and
+ * `100vh`/`100dvh` layouts still resolve to exactly the frame.
+ *
+ * The bar lives in a closed shadow root, so app styles cannot hide or
+ * restyle it; the framing is written as `!important` inline styles on
+ * `<html>` / `<body>` (nothing in a stylesheet outranks that) and the
+ * previous inline styles are restored on unmount.
  *
  * Every piece of text goes through `textContent`.
  */
 export class ImpersonationBanner {
   private host: HTMLElement | null = null;
   private text: HTMLElement | null = null;
-  /** `style` attributes as the page had them before the shift. */
+  /** `style` attributes as the page had them before the frame. */
   private saved: { html: string | null; body: string | null } | null = null;
+  private theme: ResolvedTheme;
+  private mode: 'default' | 'custom' | 'none';
+  /** Grace timer for `custom` mode. */
+  private fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+  /** The app said its own banner is on screen for this impersonation. */
+  private acknowledged = false;
+  private warnedAboutNone = false;
+  private onResize: (() => void) | null = null;
 
-  constructor(private onStop: () => Promise<void>) {}
+  constructor(
+    private onStop: () => Promise<void>,
+    config: ImpersonationBannerConfig = {}
+  ) {
+    this.mode = config.mode ?? 'default';
+    this.theme = resolveTheme(config.theme);
+  }
 
   static supported(): boolean {
     return typeof document !== 'undefined' && typeof document.createElement === 'function';
   }
 
+  /**
+   * The app's own banner is rendered. Cancels the `custom`-mode fallback, and
+   * removes the built-in banner if the fallback already fired (a slow first
+   * paint, say). No-op in the other modes.
+   */
+  acknowledge(): void {
+    this.acknowledged = true;
+    this.clearFallback();
+    if (this.mode === 'custom') this.teardown();
+  }
+
   update(info: ImpersonationInfo | null): void {
     if (!ImpersonationBanner.supported()) return;
     if (!info) {
+      this.acknowledged = false;
       this.unmount();
       return;
     }
+    if (this.mode === 'none') {
+      // The app owns the warning entirely. Said once, loudly, because the
+      // page now looks like an ordinary session of someone else's account.
+      if (!this.warnedAboutNone) {
+        this.warnedAboutNone = true;
+        // oxlint-disable-next-line no-console
+        console.warn(
+          '[sp00ky] impersonation is active and impersonationBanner.mode is "none": ' +
+            "nothing marks this page as another user's session."
+        );
+      }
+      return;
+    }
+    if (this.mode === 'custom' && !this.acknowledged) {
+      // Give the app its grace period, then warn anyway.
+      if (!this.fallbackTimer && !this.host) {
+        this.fallbackTimer = setTimeout(() => {
+          this.fallbackTimer = null;
+          if (!this.acknowledged) this.render(info);
+        }, CUSTOM_BANNER_GRACE_MS);
+      }
+      return;
+    }
+    if (this.mode === 'custom') return;
+    this.render(info);
+  }
+
+  unmount(): void {
+    this.clearFallback();
+    this.teardown();
+  }
+
+  /** Mount (if needed) and write the current identities into the bar. */
+  private render(info: ImpersonationInfo): void {
     this.mount();
+    const label = this.theme.label(info);
     const text = this.text!;
-    text.replaceChildren(
-      document.createTextNode('Impersonating '),
-      bold(info.target),
-      document.createTextNode(` as ${info.admin}`)
-    );
-    text.title = `Impersonating ${info.target} as ${info.admin}. Every write is audited.`;
+    text.textContent = '';
+    text.append(...labelNodes(label));
+    text.title = `${label.replace(/\*\*/g, '')}. Every write is audited.`;
   }
 
-  unmount(): void {
+  /** Remove the bar and put the page back exactly as it was. */
+  private teardown(): void {
     this.host?.remove();
     this.host = this.text = null;
     if (typeof document === 'undefined') return;
+    if (this.onResize) {
+      window.removeEventListener('resize', this.onResize);
+      this.onResize = null;
+    }
     if (this.saved) {
       restoreStyle(document.documentElement, this.saved.html);
       restoreStyle(document.body, this.saved.body);
@@ -144,111 +289,117 @@ export class ImpersonationBanner {
     document.documentElement?.style.setProperty('--sp00ky-impersonation-banner-height', '0px');
   }
 
+  private clearFallback(): void {
+    if (this.fallbackTimer) clearTimeout(this.fallbackTimer);
+    this.fallbackTimer = null;
+  }
+
   private mount(): void {
     if (this.host?.isConnected) return;
     const host = document.createElement(HOST_TAG);
     const root = host.attachShadow({ mode: 'closed' });
     const style = document.createElement('style');
-    style.textContent = STYLE;
-
-    // The striped ground the bar's text sits on: fixed, so it stays put while
-    // the page scrolls underneath. Never takes a click.
-    const layer = document.createElement('div');
-    layer.className = 'layer';
-    layer.setAttribute('aria-hidden', 'true');
-    const corners = document.createElement('div');
-    corners.className = 'corners';
-    corners.setAttribute('aria-hidden', 'true');
-    for (const side of ['left', 'right']) {
-      const corner = document.createElement('div');
-      corner.className = `corner ${side}`;
-      corners.append(corner);
-    }
+    style.textContent = bannerCss(this.theme);
 
     const bar = document.createElement('div');
     bar.className = 'bar';
     bar.setAttribute('role', 'alert');
-    const pill = document.createElement('div');
-    pill.className = 'pill';
     const sign = document.createElement('span');
     sign.className = 'sign';
-    sign.textContent = '⚠';
+    sign.textContent = '!';
+    sign.setAttribute('aria-hidden', 'true');
     const text = document.createElement('span');
     text.className = 'text';
     const button = document.createElement('button');
     button.type = 'button';
-    button.textContent = 'Stop';
+    button.textContent = this.theme.stopLabel;
     button.addEventListener('click', () => {
       button.disabled = true;
       this.onStop().finally(() => {
         button.disabled = false;
       });
     });
-    pill.append(sign, text);
-    bar.append(pill, button);
-    root.append(style, layer, corners, bar);
-    // Hosted on `<html>`, not `<body>`: the page shift clips `<body>` to the
-    // rounded top, and a bar inside it would be clipped away with everything
-    // else.
+    bar.append(sign, text, button);
+    root.append(style, bar);
+    // Hosted on `<html>`, not `<body>`: the body is the framed sheet, and a
+    // bar inside it would be scaled and clipped along with the page.
     document.documentElement.appendChild(host);
 
-    this.shiftPage();
+    this.frame();
     this.host = host;
     this.text = text;
   }
 
   /**
-   * Push the page below the warning and round its new top edge.
+   * Turn `<body>` into the framed sheet.
    *
-   * `<html>` carries the stripes as its background, because that is what the
-   * page's rounded corners reveal. `<body>` therefore has to be painted
-   * opaque: most apps colour it themselves, but a transparent one would let
-   * the stripes through behind the whole page, so its resolved colour is
-   * computed first and pinned.
+   * `zoom`, not `transform`: it scales at layout level, so `100vh` children
+   * resolve to the frame instead of overflowing it, scrollbars stay correct,
+   * and `position: fixed` keeps meaning the viewport (a transform would make
+   * the body a containing block and every fixed header would scroll away).
+   * The body's CSS width is widened by `1 / scale` so the scaled box still
+   * fills the frame.
    */
-  private shiftPage(): void {
+  private frame(): void {
     const root = document.documentElement;
     const body = document.body;
     if (!root || !body) return;
-    this.saved = { html: root.getAttribute('style'), body: body.getAttribute('style') };
+    const { heightPx, insetPx, radiusPx, noPageShift } = this.theme;
+    // Published even when the framing is off, so an app doing its own offset
+    // has one number to read either way.
+    root.style.setProperty('--sp00ky-impersonation-banner-height', `${heightPx}px`);
+    if (noPageShift) return;
 
+    this.saved = { html: root.getAttribute('style'), body: body.getAttribute('style') };
     const surface = resolveSurface(root, body);
-    root.style.setProperty('--sp00ky-impersonation-banner-height', `${BANNER_HEIGHT_PX}px`);
-    root.style.setProperty('background-image', STRIPES, 'important');
-    root.style.setProperty('padding-top', `${BANNER_HEIGHT_PX}px`, 'important');
-    root.style.setProperty('box-sizing', 'border-box', 'important');
-
-    body.style.setProperty('background-color', surface, 'important');
-    body.style.setProperty(
-      'border-radius',
-      `${PAGE_RADIUS_PX}px ${PAGE_RADIUS_PX}px 0 0`,
-      'important'
-    );
-    // Clips the app's own content — a fixed header included — to the rounded
-    // top, which is what makes the page read as a sheet over the stripes.
-    body.style.setProperty(
-      'clip-path',
-      `inset(0 round ${PAGE_RADIUS_PX}px ${PAGE_RADIUS_PX}px 0 0)`,
-      'important'
-    );
-    body.style.setProperty('box-shadow', '0 -6px 18px rgba(0, 0, 0, .35)', 'important');
-    // An app sized to `100vh` would otherwise overflow by the bar's height and
-    // put a scrollbar on a page that had none.
-    body.style.setProperty('min-height', `calc(100vh - ${BANNER_HEIGHT_PX}px)`, 'important');
+    // The root paints the backdrop: it is the one box that is guaranteed to
+    // be behind the page's sheet. `overflow: hidden` keeps the document
+    // itself from scrolling — the sheet is fixed and scrolls internally.
+    root.style.setProperty('background', this.theme.background, 'important');
+    root.style.setProperty('overflow', 'hidden', 'important');
+
+    const apply = () => {
+      const { scale, width } = frameMetrics(
+        { width: window.innerWidth, height: window.innerHeight },
+        { heightPx, insetPx }
+      );
+      body.style.setProperty('position', 'fixed', 'important');
+      body.style.setProperty('top', `${heightPx}px`, 'important');
+      body.style.setProperty('left', `${insetPx}px`, 'important');
+      body.style.setProperty('margin', '0', 'important');
+      body.style.setProperty('zoom', String(scale), 'important');
+      body.style.setProperty('width', `${width}px`, 'important');
+      body.style.setProperty('height', '100vh', 'important');
+      body.style.setProperty('overflow', 'auto', 'important');
+      body.style.setProperty('background-color', surface, 'important');
+      body.style.setProperty('box-shadow', '0 6px 24px rgba(69, 26, 3, .28)', 'important');
+      if (radiusPx > 0) {
+        const radius = `${radiusPx / scale}px`;
+        body.style.setProperty('border-radius', radius, 'important');
+        // Clips the page's own fixed layers (a loading overlay, a modal
+        // backdrop) to the sheet, so nothing paints over the frame.
+        body.style.setProperty('clip-path', `inset(0 round ${radius})`, 'important');
+      }
+    };
+    apply();
+    this.onResize = apply;
+    window.addEventListener('resize', apply);
   }
 }
 
-/** Put an element's inline styles back exactly as they were. */
+/** Put an element's inline styles back exactly as they were. An element that
+ *  had no `style` attribute (or an empty one) ends up without one again. */
 function restoreStyle(el: HTMLElement | null, saved: string | null): void {
   if (!el) return;
-  if (saved === null) el.removeAttribute('style');
-  else el.setAttribute('style', saved);
+  if (saved) el.setAttribute('style', saved);
+  else el.removeAttribute('style');
 }
 
 /**
- * The colour to paint `<body>` with while the stripes sit behind it: whatever
- * the page already paints (body first, then html), and failing that the canvas
- * colour for the viewer's colour scheme.
+ * The colour to paint the sheet with: whatever the page already paints (body
+ * first, then html), and failing that the canvas colour for the viewer's
+ * colour scheme. A transparent sheet would show the backdrop through the
+ * whole page.
  */
 function resolveSurface(root: HTMLElement, body: HTMLElement): string {
   for (const el of [body, root]) {
@@ -266,8 +417,27 @@ function isTransparent(color: string): boolean {
   return !!parts && parts.length === 4 && Number(parts[3]) === 0;
 }
 
-function bold(value: string): HTMLElement {
-  const b = document.createElement('b');
-  b.textContent = value;
-  return b;
+/**
+ * The label as DOM nodes, emphasising the runs between `**` markers. The
+ * label is a plain string (an app's own function can return anything), so it
+ * never reaches the DOM as markup.
+ */
+function labelNodes(label: string): Node[] {
+  return labelSegments(label).map(({ text, bold }) => {
+    if (!bold) return document.createTextNode(text);
+    const b = document.createElement('b');
+    b.textContent = text;
+    return b;
+  });
+}
+
+/** The label split into plain and emphasised runs. Pure, so it is unit tested. */
+function labelSegments(label: string): Array<{ text: string; bold: boolean }> {
+  return label
+    .split(/\*\*(.+?)\*\*/g)
+    .map((text, i) => ({ text, bold: i % 2 === 1 }))
+    .filter((part) => part.text !== '');
 }
+
+/** Exported for unit tests only. */
+export const __test = { labelSegments, resolveTheme };

package/src/modules/auth/impersonation.test.ts

@@ -280,3 +280,76 @@ describe('timers', () => {
     timers.clear();
   });
 });
+
+describe('banner configuration', () => {
+  it('builds CSS from the theme, defaults included', async () => {
+    const { bannerCss, BANNER_BACKGROUND } = await import('./impersonation-banner');
+    // `bannerCss` takes a resolved theme; the client resolves it, so this
+    // pins the rendered output for a fully specified one.
+    const css = bannerCss({
+      heightPx: 60,
+      insetPx: 16,
+      radiusPx: 0,
+      background: 'var(--brand-warning)',
+      text: '#222',
+      accent: '#f00',
+      accentText: '#fff',
+      stopLabel: 'Leave',
+      noPageShift: true,
+      label: () => 'x',
+    });
+    expect(css).toContain('height: 60px');
+    expect(css).toContain('background-image: var(--brand-warning)');
+    expect(css).toContain('background: #f00; color: #fff');
+    expect(css).not.toContain(BANNER_BACKGROUND);
+  });
+
+  it('scales the page to the frame without distorting it', async () => {
+    const { frameMetrics } = await import('./impersonation-banner');
+    const theme = { heightPx: 40, insetPx: 10 };
+
+    const desktop = frameMetrics({ width: 1440, height: 900 }, theme);
+    // 900 - 40 - 10 = 850 of 900: one factor for both axes, so the aspect
+    // ratio is untouched and nothing is cropped.
+    expect(desktop.scale).toBeCloseTo(850 / 900);
+    expect(desktop.contentHeight).toBe(850);
+    // A zoomed box occupies width * scale, so the layout box is widened to
+    // still fill the frame exactly.
+    expect(desktop.width * desktop.scale).toBeCloseTo(1440 - 20);
+
+    const phone = frameMetrics({ width: 390, height: 844 }, theme);
+    expect(phone.contentHeight).toBe(844 - 50);
+    expect(phone.width * phone.scale).toBeCloseTo(370);
+
+    // Degenerate viewports (a hidden tab reporting 0) must not divide by zero
+    // or hand back a negative box.
+    const zero = frameMetrics({ width: 0, height: 0 }, theme);
+    expect(zero.scale).toBe(1);
+    expect(zero.contentHeight).toBeGreaterThan(0);
+    expect(zero.width).toBeGreaterThan(0);
+  });
+
+  it('emphasises the label between ** markers instead of parsing markup', async () => {
+    const { __test } = await import('./impersonation-banner');
+    // A label is a plain string an app supplies, so markup in it must stay text.
+    expect(__test.labelSegments('Impersonating **user:bob** as user:alice')).toEqual([
+      { text: 'Impersonating ', bold: false },
+      { text: 'user:bob', bold: true },
+      { text: ' as user:alice', bold: false },
+    ]);
+    expect(__test.labelSegments('<img src=x onerror=alert(1)>')).toEqual([
+      { text: '<img src=x onerror=alert(1)>', bold: false },
+    ]);
+  });
+
+  it('resolves a partial theme over the defaults', async () => {
+    const { __test, BANNER_HEIGHT_PX } = await import('./impersonation-banner');
+    const theme = __test.resolveTheme({ insetPx: 0, stopLabel: 'Exit' });
+    expect(theme.insetPx).toBe(0);
+    expect(theme.stopLabel).toBe('Exit');
+    expect(theme.heightPx).toBe(BANNER_HEIGHT_PX);
+    expect(theme.label({ target: 'user:b', admin: 'user:a', session: 's', tokenExpiresAt: null })).toBe(
+      'Impersonating **user:b** as user:a'
+    );
+  });
+});