@spooky-sync/core 0.0.1-canary.261 → 0.0.1-canary.262

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.261";
-const WASM_VERSION = "0.0.1-canary.261";
+const CORE_VERSION = "0.0.1-canary.262";
+const WASM_VERSION = "0.0.1-canary.262";
 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.261",
+			coreVersion: "0.0.1-canary.262",
 			schemaHash: hash53(config.schemaSurql),
 			endpoint: config.database.endpoint ?? "",
 			namespace: config.database.namespace,
@@ -13296,11 +13296,22 @@ function createAdapters(config, s, host, lateModules) {
 
 //#endregion
 //#region src/modules/auth/impersonation-banner.ts
-/** Height the banner occupies. Also published as the CSS variable
-*  `--sp00ky-impersonation-banner-height` on `<html>` (`0px` when hidden), so
-*  an app can offset fixed headers. */
-const BANNER_HEIGHT_PX = 36;
+/** 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. */
+const PAGE_RADIUS_PX = 14;
 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 = `
 :host {
   all: initial !important;
@@ -13311,29 +13322,79 @@ 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%")};
+}
 .bar {
   position: fixed; inset: 0 0 auto 0; height: ${BANNER_HEIGHT_PX}px; z-index: 2147483647;
-  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px;
-  box-sizing: border-box; background: #b91c1c; color: #fff;
+  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;
-  box-shadow: 0 1px 4px rgba(0,0,0,.35);
 }
+.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 { font-weight: 800; }
+.text b { color: #fff; font-weight: 800; }
 button {
-  flex: none; cursor: pointer; border: 1px solid rgba(255,255,255,.8); border-radius: 6px;
-  background: #fff; color: #b91c1c; font: 700 12px/1 system-ui, sans-serif; padding: 6px 12px;
+  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);
 }
+button:hover { background: #fff; }
 button:disabled { opacity: .6; cursor: progress; }
+@media (max-width: 520px) {
+  .bar { gap: 6px; padding: 0 8px; }
+  .pill { padding: 5px 8px; }
+}
 `;
 /**
-* The "you are impersonating" bar. Mounted by the client whenever the session
-* is an impersonation, in its own closed shadow root so app styles cannot hide
-* or restyle it. Every piece of text goes through `textContent`.
+* 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.
+*
+* 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. */
+	saved = null;
 	constructor(onStop) {
 		this.onStop = onStop;
 	}
@@ -13354,7 +13415,13 @@ var ImpersonationBanner = class ImpersonationBanner {
 	unmount() {
 		this.host?.remove();
 		this.host = this.text = null;
-		if (typeof document !== "undefined") document.documentElement?.style.setProperty("--sp00ky-impersonation-banner-height", "0px");
+		if (typeof document === "undefined") return;
+		if (this.saved) {
+			restoreStyle(document.documentElement, this.saved.html);
+			restoreStyle(document.body, this.saved.body);
+			this.saved = null;
+		}
+		document.documentElement?.style.setProperty("--sp00ky-impersonation-banner-height", "0px");
 	}
 	mount() {
 		if (this.host?.isConnected) return;
@@ -13362,28 +13429,96 @@ var ImpersonationBanner = class ImpersonationBanner {
 		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);
+		}
 		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 = "⚠";
 		const text = document.createElement("span");
 		text.className = "text";
 		const button = document.createElement("button");
 		button.type = "button";
-		button.textContent = "Stop impersonating";
+		button.textContent = "Stop";
 		button.addEventListener("click", () => {
 			button.disabled = true;
 			this.onStop().finally(() => {
 				button.disabled = false;
 			});
 		});
-		bar.append(text, button);
-		root.append(style, bar);
-		(document.body ?? document.documentElement).appendChild(host);
-		document.documentElement.style.setProperty("--sp00ky-impersonation-banner-height", `${BANNER_HEIGHT_PX}px`);
+		pill.append(sign, text);
+		bar.append(pill, button);
+		root.append(style, layer, corners, bar);
+		document.documentElement.appendChild(host);
+		this.shiftPage();
 		this.host = host;
 		this.text = text;
 	}
+	/**
+	* Push the page below the warning and round its new top edge.
+	*
+	* `<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.
+	*/
+	shiftPage() {
+		const root = document.documentElement;
+		const body = document.body;
+		if (!root || !body) 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");
+	}
 };
+/** Put an element's inline styles back exactly as they were. */
+function restoreStyle(el, saved) {
+	if (!el) return;
+	if (saved === null) el.removeAttribute("style");
+	else el.setAttribute("style", saved);
+}
+/**
+* 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.
+*/
+function resolveSurface(root, body) {
+	for (const el of [body, root]) {
+		const color = getComputedStyle(el).backgroundColor;
+		if (color && !isTransparent(color)) return color;
+	}
+	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "#111111" : "#ffffff";
+}
+function isTransparent(color) {
+	if (color === "transparent") return true;
+	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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spooky-sync/core",
-  "version": "0.0.1-canary.261",
+  "version": "0.0.1-canary.262",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -63,8 +63,8 @@
     }
   },
   "dependencies": {
-    "@spooky-sync/query-builder": "0.0.1-canary.261",
-    "@spooky-sync/ssp-wasm": "0.0.1-canary.261",
+    "@spooky-sync/query-builder": "0.0.1-canary.262",
+    "@spooky-sync/ssp-wasm": "0.0.1-canary.262",
     "@sqlite.org/sqlite-wasm": "3.53.0-build1",
     "@surrealdb/wasm": "^3.0.3",
     "blurhash": "^2.0.5",

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

@@ -1,12 +1,26 @@
 import type { ImpersonationInfo } from './impersonation';
 
-/** Height the banner occupies. Also published as the CSS variable
- *  `--sp00ky-impersonation-banner-height` on `<html>` (`0px` when hidden), so
- *  an app can offset fixed headers. */
-export const BANNER_HEIGHT_PX = 36;
+/** 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;
+
+/** Radius of the page's new top corners. */
+const PAGE_RADIUS_PX = 14;
 
 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: string): string {
+  return `radial-gradient(circle ${PAGE_RADIUS_PX}px at ${center}, transparent 0 ${PAGE_RADIUS_PX}px, #000 ${PAGE_RADIUS_PX}px)`;
+}
+
 // 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`
@@ -21,30 +35,80 @@ 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%')};
+}
 .bar {
   position: fixed; inset: 0 0 auto 0; height: ${BANNER_HEIGHT_PX}px; z-index: 2147483647;
-  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px;
-  box-sizing: border-box; background: #b91c1c; color: #fff;
+  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;
-  box-shadow: 0 1px 4px rgba(0,0,0,.35);
 }
+.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 { font-weight: 800; }
+.text b { color: #fff; font-weight: 800; }
 button {
-  flex: none; cursor: pointer; border: 1px solid rgba(255,255,255,.8); border-radius: 6px;
-  background: #fff; color: #b91c1c; font: 700 12px/1 system-ui, sans-serif; padding: 6px 12px;
+  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);
 }
+button:hover { background: #fff; }
 button:disabled { opacity: .6; cursor: progress; }
+@media (max-width: 520px) {
+  .bar { gap: 6px; padding: 0 8px; }
+  .pill { padding: 5px 8px; }
+}
 `;
 
 /**
- * The "you are impersonating" bar. Mounted by the client whenever the session
- * is an impersonation, in its own closed shadow root so app styles cannot hide
- * or restyle it. Every piece of text goes through `textContent`.
+ * 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.
+ *
+ * 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. */
+  private saved: { html: string | null; body: string | null } | null = null;
 
   constructor(private onStop: () => Promise<void>) {}
 
@@ -71,9 +135,13 @@ export class ImpersonationBanner {
   unmount(): void {
     this.host?.remove();
     this.host = this.text = null;
-    if (typeof document !== 'undefined') {
-      document.documentElement?.style.setProperty('--sp00ky-impersonation-banner-height', '0px');
+    if (typeof document === 'undefined') return;
+    if (this.saved) {
+      restoreStyle(document.documentElement, this.saved.html);
+      restoreStyle(document.body, this.saved.body);
+      this.saved = null;
     }
+    document.documentElement?.style.setProperty('--sp00ky-impersonation-banner-height', '0px');
   }
 
   private mount(): void {
@@ -82,27 +150,120 @@ export class ImpersonationBanner {
     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);
+    }
+
     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 = '⚠';
     const text = document.createElement('span');
     text.className = 'text';
     const button = document.createElement('button');
     button.type = 'button';
-    button.textContent = 'Stop impersonating';
+    button.textContent = 'Stop';
     button.addEventListener('click', () => {
       button.disabled = true;
       this.onStop().finally(() => {
         button.disabled = false;
       });
     });
-    bar.append(text, button);
-    root.append(style, bar);
-    (document.body ?? document.documentElement).appendChild(host);
-    document.documentElement.style.setProperty('--sp00ky-impersonation-banner-height', `${BANNER_HEIGHT_PX}px`);
+    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.
+    document.documentElement.appendChild(host);
+
+    this.shiftPage();
     this.host = host;
     this.text = text;
   }
+
+  /**
+   * Push the page below the warning and round its new top edge.
+   *
+   * `<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.
+   */
+  private shiftPage(): void {
+    const root = document.documentElement;
+    const body = document.body;
+    if (!root || !body) 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');
+  }
+}
+
+/** Put an element's inline styles back exactly as they were. */
+function restoreStyle(el: HTMLElement | null, saved: string | null): void {
+  if (!el) return;
+  if (saved === null) el.removeAttribute('style');
+  else el.setAttribute('style', saved);
+}
+
+/**
+ * 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.
+ */
+function resolveSurface(root: HTMLElement, body: HTMLElement): string {
+  for (const el of [body, root]) {
+    const color = getComputedStyle(el).backgroundColor;
+    if (color && !isTransparent(color)) return color;
+  }
+  const dark =
+    typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
+  return dark ? '#111111' : '#ffffff';
+}
+
+function isTransparent(color: string): boolean {
+  if (color === 'transparent') return true;
+  const parts = color.match(/[\d.]+/g);
+  return !!parts && parts.length === 4 && Number(parts[3]) === 0;
 }
 
 function bold(value: string): HTMLElement {