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

package/AGENTS.md

@@ -33,7 +33,7 @@ re-materialized from state, never patched in place.
 
 ## Key exports (`src/index.ts`)
 
-- `Sp00kyClient<S>` — main class. Methods: `init()`, `create(id, payload)`, `update(table, id, payload, options?)`, `delete(table, id)`, `query(table, opts?)`, `preload(query, { signal? })`, `run(backend, route, payload)`, `bucket(name)`, `remoteQuery(sql, vars?)`, `useRemote(fn)`, `authenticate(token)`, `auth.signOut()`. Admin impersonation (`impersonation.enabled` in sp00ky.yml, admins only, server-enforced): `auth.impersonate(targetId, reason)`, `auth.stopImpersonating()`, `auth.impersonation`, `auth.subscribeImpersonation(cb)`, `auth.searchImpersonationTargets(search)`; while active the client injects a warning bar with a Stop button (see `/docs/client/impersonation`). Traffic indicators: `pendingMutationCount` / `subscribeToPendingMutations(cb)` (outbox depth), `fetchingQueryCount` / `subscribeToFetchActivity(cb)`. Failed-writes tray: `failedMutationCount`, `subscribeToFailedMutations(cb)`, `listFailedMutations()`, `retryFailedMutation(id)`, `discardFailedMutation(id)`.
+- `Sp00kyClient<S>` — main class. Methods: `init()`, `create(id, payload)`, `update(table, id, payload, options?)`, `delete(table, id)`, `query(table, opts?)`, `preload(query, { signal? })`, `run(backend, route, payload)`, `bucket(name)`, `remoteQuery(sql, vars?)`, `useRemote(fn)`, `authenticate(token)`, `auth.signOut()`. Admin impersonation (`impersonation.enabled` in sp00ky.yml, admins only, server-enforced): `auth.impersonate(targetId, reason)`, `auth.stopImpersonating()`, `auth.impersonation`, `auth.subscribeImpersonation(cb)`, `auth.searchImpersonationTargets(search)`; while active the client injects a warning bar with a Stop button and shifts the page down onto a hazard-striped layer. `impersonationBanner` in the client config restyles it (`theme`), replaces it (`mode: 'custom'` + `client.acknowledgeImpersonationBanner()`, else it falls back after ~2.5s) or turns it off (`mode: 'none'`). See `/docs/client/impersonation`. Traffic indicators: `pendingMutationCount` / `subscribeToPendingMutations(cb)` (outbox depth), `fetchingQueryCount` / `subscribeToFetchActivity(cb)`. Failed-writes tray: `failedMutationCount`, `subscribeToFailedMutations(cb)`, `listFailedMutations()`, `retryFailedMutation(id)`, `discardFailedMutation(id)`.
 - `FailedMutation` — a row of the `_00_failed_mutations` tray (`mutationType`, `recordId`, `data`, `beforeRecord`, `error`, `revert`).
 - `BucketHandle` — file storage handle (`put`, `get`, `delete`, `exists`), plus the cache-aware `read`, `url`, `pin`/`unpin`, `evict`, `prefetch`. `get` is always remote; `read`/`url` go through the blob cache.
 - `services/blobs/` — durable cache for bucket bytes: OPFS holds the files, `_00_blob` holds a manifest that reconcile rebuilds from disk (so a wiped local store costs metadata, not the offline cache). Nothing expires on a timer; eviction is LRU under a byte budget only, skipping pinned and on-screen entries. Config: `blobCache` in `types.ts`.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as RunOptions, B as SyncHealthStatus, C as QueryTimeToLive, D as RecordVersionArray, E as ReconnectConfig, F as StorageHealth, G as DatabaseEventTypes, H as UpdateOptions, I as StorageHealthStatus, J as EventSystem, K as SealedQuery, L as StoreType, M as Sp00kyConfig, N as Sp00kyQueryResult, O as RecordVersionDiff, P as Sp00kyQueryResultPromise, R as SyncHealth, S as QueryStatusCallback, T as QueryUpdateCallback, U as LocalStore, V as TimingPhase, W as DatabaseEventSystem, _ as QueryConfig, a as Level, b as QueryState, c as MutationCallback, d as PersistenceClient, f as PhaseStat, g as QueryAuthorityCallback, h as PreloadRefresh, i as InlineRow, j as ServerViewMeta, k as RegistrationTimings, l as MutationEvent, m as PreloadOptions, n as DebounceOptions, o as MATERIALIZATION_SAMPLE_WINDOW, p as PinoTransmit, q as EventDefinition, r as EventSubscriptionOptions, s as MembershipOutcome, t as ConnectionState, u as MutationEventType, v as QueryConfigRecord, w as QueryTimings, x as QueryStatus, y as QueryHash, z as SyncHealthConfig } from "./types.js";
+import { $ as ORIGIN_TOKEN_KEY, A as RunOptions, B as SyncHealthStatus, C as QueryTimeToLive, D as RecordVersionArray, E as ReconnectConfig, F as StorageHealth, G as DatabaseEventTypes, H as UpdateOptions, I as StorageHealthStatus, J as EventSystem, K as SealedQuery, L as StoreType, M as Sp00kyConfig, N as Sp00kyQueryResult, O as RecordVersionDiff, P as Sp00kyQueryResultPromise, Q as ImpersonationTimers, R as SyncHealth, S as QueryStatusCallback, T as QueryUpdateCallback, U as LocalStore, V as TimingPhase, W as DatabaseEventSystem, X as ImpersonationInfo, Y as IMPERSONATION_ACCESS, Z as ImpersonationTimerHost, _ as QueryConfig, a as Level, at as sameImpersonation, b as QueryState, c as MutationCallback, d as PersistenceClient, et as SESSION_POLL_MS, f as PhaseStat, g as QueryAuthorityCallback, h as PreloadRefresh, i as InlineRow, it as renewDelayMs, j as ServerViewMeta, k as RegistrationTimings, l as MutationEvent, m as PreloadOptions, n as DebounceOptions, nt as decodeTokenClaims, o as MATERIALIZATION_SAMPLE_WINDOW, p as PinoTransmit, q as EventDefinition, r as EventSubscriptionOptions, rt as impersonationFromToken, s as MembershipOutcome, t as ConnectionState, tt as TokenClaims, u as MutationEventType, v as QueryConfigRecord, w as QueryTimings, x as QueryStatus, y as QueryHash, z as SyncHealthConfig } from "./types.js";
 import { AccessDefinition, BackendNames, BackendRoutes, BucketNames, ColumnSchema, FinalQuery, GetTable, QueryBuilder, QueryOptions, QueryPlan, RecordId, RoutePayload, SchemaStructure, TableModel, TableNames, TypeNameToTypeMap } from "@spooky-sync/query-builder";
 import * as surrealdb0 from "surrealdb";
 import { Duration, RecordId as RecordId$1, Surreal, SurrealEvents, SurrealTransaction } from "surrealdb";
@@ -674,92 +674,6 @@ declare class StreamProcessorService {
   private normalizeValue;
 }
 //#endregion
-//#region src/modules/auth/impersonation.d.ts
-/**
- * Admin impersonation, client side.
- *
- * The server does the enforcing (see `impersonation_remote.surql` in the CLI):
- * an admin calls `fn::_00_impersonate::start`, receives a token for the
- * `_00_impersonate` access method, and authenticates with it, so `$auth.id` is
- * the target user. Everything here is state and timers around that:
- *
- * - the admin's own token is kept under {@link ORIGIN_TOKEN_KEY} so Stop (and a
- *   reload in between) can return to it;
- * - the impersonation state is derived from the token's claims, never stored
- *   separately, so it cannot disagree with the session actually in use;
- * - the token is re-signed before it expires, and the session is polled so a
- *   stop or revocation made elsewhere reaches an open WebSocket quickly.
- */
-/** Access method impersonation tokens are issued for. */
-declare const IMPERSONATION_ACCESS = "_00_impersonate";
-/** Persistence key holding the admin's own token while impersonating. */
-declare const ORIGIN_TOKEN_KEY = "sp00ky_auth_token_origin";
-/** How often an active impersonation re-checks its session on the server. */
-declare const SESSION_POLL_MS = 60000;
-interface ImpersonationInfo {
-  /** `_00_impersonation:<id>` the session is bound to. */
-  session: string;
-  /** Record id being impersonated. */
-  target: string;
-  /** Record id of the admin. */
-  admin: string;
-  /** When the current token expires (it is renewed before then). */
-  tokenExpiresAt: Date | null;
-}
-interface TokenClaims {
-  access: string | null;
-  userId: string | null;
-  exp: number | null;
-  impersonation: {
-    session: string;
-    admin: string;
-  } | null;
-}
-/**
- * Read the claims of a SurrealDB record-access JWT WITHOUT verifying it. The
- * server still enforces the token on every request; this is only so the client
- * can act on what it already holds before a round trip completes.
- *
- * Returns nulls on any malformed input.
- */
-declare function decodeTokenClaims(token: string): TokenClaims;
-/** The impersonation a token represents, or null for a regular session. */
-declare function impersonationFromToken(token: string | null): ImpersonationInfo | null;
-/** Same impersonation, for change detection (renewals only move the expiry). */
-declare function sameImpersonation(a: ImpersonationInfo | null, b: ImpersonationInfo | null): boolean;
-/**
- * When to renew a token expiring at `expSecs`: at 80% of its remaining life,
- * never sooner than 5s from now, and immediately once it is inside that.
- */
-declare function renewDelayMs(expSecs: number, nowMs: number): number;
-interface ImpersonationTimerHost {
-  /** Current impersonation, or null. */
-  current(): ImpersonationInfo | null;
-  /** Re-sign the token. Rejects when the session has ended. */
-  renew(): Promise<void>;
-  /** Whether the server still considers the session live. */
-  stillActive(): Promise<boolean>;
-  /** Leave the impersonation because the server ended it. */
-  endedRemotely(reason: string): Promise<void>;
-  /** Whether a failure was a reachability problem (retry) rather than an answer. */
-  isNetworkError(error: unknown): boolean;
-}
-/**
- * The two timers an active impersonation needs. `sync()` is called whenever
- * the auth state changes and arms or clears them to match.
- */
-declare class ImpersonationTimers {
-  private host;
-  private renewTimer;
-  private pollTimer;
-  private armedFor;
-  constructor(host: ImpersonationTimerHost);
-  sync(): void;
-  clear(): void;
-  private renew;
-  private poll;
-}
-//#endregion
 //#region src/modules/auth/events/index.d.ts
 declare const AuthEventTypes: {
   readonly AuthStateChanged: "AUTH_STATE_CHANGED";
@@ -2407,6 +2321,8 @@ declare class Sp00kyClient<S extends SchemaStructure> {
   private readonly appReleases;
   /** Teardown for subscriptions the client itself owns. */
   private readonly disposers;
+  /** Assigned in `wireAdapters`, which the constructor always runs. */
+  private impersonationBanner;
   private readonly devTools;
   private hub;
   private forwarder;
@@ -2476,6 +2392,14 @@ declare class Sp00kyClient<S extends SchemaStructure> {
   deauthenticate(): Promise<void>;
   useRemote<T>(fn: (client: Surreal) => Promise<T> | T): Promise<T>;
   remoteQuery<T extends unknown[]>(sql: string, vars?: Record<string, unknown>): Promise<T>;
+  /**
+   * Tell the client that the app's own impersonation banner is on screen.
+   * Only meaningful with `impersonationBanner: { mode: 'custom' }`, where it
+   * cancels the fallback that would otherwise show the built-in banner. Call
+   * it while the custom banner is rendered (the Solid `useImpersonation`
+   * hook does it for you with `rendersBanner: true`).
+   */
+  acknowledgeImpersonationBanner(): void;
   feature(key: string, options?: FeatureFlagOptions): FeatureFlagHandle;
   setFeatureOverride(key: string, variant: string | null, payload?: unknown): void;
   clearFeatureOverrides(): void;

package/dist/index.js

@@ -1076,8 +1076,8 @@ function selfAllowlistedVariant(flag, userId) {
 
 //#endregion
 //#region src/modules/devtools/index.ts
-const CORE_VERSION = "0.0.1-canary.263";
-const WASM_VERSION = "0.0.1-canary.263";
+const CORE_VERSION = "0.0.1-canary.265";
+const WASM_VERSION = "0.0.1-canary.265";
 const SURREAL_VERSION = "3.0.3";
 var DevToolsService = class DevToolsService {
 	eventsHistory = [];
@@ -13025,7 +13025,7 @@ function createTabsCoordinator(config, s, host) {
 	return new TabsCoordinator({
 		tabId: s.tabId,
 		fingerprint: computeTabsFingerprint({
-			coreVersion: "0.0.1-canary.263",
+			coreVersion: "0.0.1-canary.265",
 			schemaHash: hash53(config.schemaSurql),
 			endpoint: config.database.endpoint ?? "",
 			namespace: config.database.namespace,
@@ -13296,23 +13296,60 @@ function createAdapters(config, s, host, lateModules) {
 
 //#endregion
 //#region src/modules/auth/impersonation-banner.ts
-/** 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. */
-const BANNER_HEIGHT_PX = 44;
-/** Radius of the page's new top corners. */
+/** 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. */
+const BANNER_HEIGHT_PX = 40;
+/** Default gutter left, right and below the framed page. */
+const FRAME_INSET_PX = 10;
+/** Default radius of the framed page's corners. */
 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. */
+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)";
-/** 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) {
-	return `radial-gradient(circle ${PAGE_RADIUS_PX}px at ${center}, transparent 0 ${PAGE_RADIUS_PX}px, #000 ${PAGE_RADIUS_PX}px)`;
-}
-const STYLE = `
+/** 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. */
+const CUSTOM_BANNER_GRACE_MS = 2500;
+function resolveTheme(theme = {}) {
+	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}`)
+	};
+}
+/**
+* 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.
+*/
+function frameMetrics(viewport, theme) {
+	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);
+	const scale = h > 0 ? contentHeight / h : 1;
+	return {
+		scale,
+		width: contentWidth / scale,
+		contentHeight
+	};
+}
+function bannerCss(t) {
+	return `
 :host {
   all: initial !important;
   display: block !important;
@@ -13322,100 +13359,136 @@ 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;
+}
+.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;
 }
-.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; 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`.
 */
 var ImpersonationBanner = class ImpersonationBanner {
 	host = null;
 	text = null;
-	/** `style` attributes as the page had them before the shift. */
+	/** `style` attributes as the page had them before the frame. */
 	saved = null;
-	constructor(onStop) {
+	theme;
+	mode;
+	/** Grace timer for `custom` mode. */
+	fallbackTimer = null;
+	/** The app said its own banner is on screen for this impersonation. */
+	acknowledged = false;
+	warnedAboutNone = false;
+	onResize = null;
+	constructor(onStop, config = {}) {
 		this.onStop = onStop;
+		this.mode = config.mode ?? "default";
+		this.theme = resolveTheme(config.theme);
 	}
 	static supported() {
 		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() {
+		this.acknowledged = true;
+		this.clearFallback();
+		if (this.mode === "custom") this.teardown();
+	}
 	update(info) {
 		if (!ImpersonationBanner.supported()) return;
 		if (!info) {
+			this.acknowledged = false;
 			this.unmount();
 			return;
 		}
+		if (this.mode === "none") {
+			if (!this.warnedAboutNone) {
+				this.warnedAboutNone = true;
+				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) {
+			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() {
+		this.clearFallback();
+		this.teardown();
+	}
+	/** Mount (if needed) and write the current identities into the bar. */
+	render(info) {
 		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() {
+	/** Remove the bar and put the page back exactly as it was. */
+	teardown() {
 		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);
@@ -13423,89 +13496,106 @@ var ImpersonationBanner = class ImpersonationBanner {
 		}
 		document.documentElement?.style.setProperty("--sp00ky-impersonation-banner-height", "0px");
 	}
+	clearFallback() {
+		if (this.fallbackTimer) clearTimeout(this.fallbackTimer);
+		this.fallbackTimer = null;
+	}
 	mount() {
 		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;
-		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);
+		bar.append(sign, text, button);
+		root.append(style, bar);
 		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.
 	*/
-	shiftPage() {
+	frame() {
 		const root = document.documentElement;
 		const body = document.body;
 		if (!root || !body) return;
+		const { heightPx, insetPx, radiusPx, noPageShift } = this.theme;
+		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");
-		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");
-		body.style.setProperty("min-height", `calc(100vh - ${BANNER_HEIGHT_PX}px)`, "important");
+		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");
+				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, saved) {
 	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, body) {
 	for (const el of [body, root]) {
@@ -13519,10 +13609,25 @@ function isTransparent(color) {
 	const parts = color.match(/[\d.]+/g);
 	return !!parts && parts.length === 4 && Number(parts[3]) === 0;
 }
-function bold(value) {
-	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) {
+	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) {
+	return label.split(/\*\*(.+?)\*\*/g).map((text, i) => ({
+		text,
+		bold: i % 2 === 1
+	})).filter((part) => part.text !== "");
 }
 
 //#endregion
@@ -13546,6 +13651,8 @@ var Sp00kyClient = class {
 	appReleases;
 	/** Teardown for subscriptions the client itself owns. */
 	disposers = [];
+	/** Assigned in `wireAdapters`, which the constructor always runs. */
+	impersonationBanner;
 	devTools;
 	hub = null;
 	forwarder = null;
@@ -13656,7 +13763,8 @@ var Sp00kyClient = class {
 			type: "AuthFlip",
 			userId
 		}));
-		const banner = new ImpersonationBanner(() => s.auth.stopImpersonating());
+		this.impersonationBanner = new ImpersonationBanner(() => s.auth.stopImpersonating(), this.config.impersonationBanner);
+		const banner = this.impersonationBanner;
 		this.disposers.push(s.auth.subscribeImpersonation((info) => banner.update(info)), () => banner.unmount());
 		this.runtime.on("tabs:broadcast", (e) => {
 			if (e.type !== "tabs:broadcast") return;
@@ -13910,6 +14018,16 @@ var Sp00kyClient = class {
 		this.assertRawRemoteAllowed("remoteQuery");
 		return this.services.remote.query(sql, vars);
 	}
+	/**
+	* Tell the client that the app's own impersonation banner is on screen.
+	* Only meaningful with `impersonationBanner: { mode: 'custom' }`, where it
+	* cancels the fallback that would otherwise show the built-in banner. Call
+	* it while the custom banner is rendered (the Solid `useImpersonation`
+	* hook does it for you with `rendersBanner: true`).
+	*/
+	acknowledgeImpersonationBanner() {
+		this.impersonationBanner.acknowledge();
+	}
 	feature(key, options) {
 		return this.featureFlags.feature(key, options);
 	}