buninu-browser 0.2.3 → 0.3.0

package/README.md

@@ -97,6 +97,23 @@ the rest is passed on:
 casty's and the engine's options:
 `--casty --help`, `--headless --help`.
 
+### Websites with self-signed certificates
+
+To browse a website with an untrusted self-signed HTTPS certificate, set
+`NODE_TLS_REJECT_UNAUTHORIZED=0` for that invocation:
+
+```sh
+env NODE_TLS_REJECT_UNAUTHORIZED=0 npx buninu-browser https://localhost:8443
+
+# From a local checkout
+env NODE_TLS_REJECT_UNAUTHORIZED=0 bun index.js https://localhost:8443
+```
+
+This disables TLS certificate verification for the process and inherited
+child processes, including requests to other sites. Use it only for trusted
+test sites; avoid exporting it globally. Without this variable, certificate
+verification remains enabled.
+
 ### Requirements
 
 - [Bun](https://bun.sh) 1.4.2 or
@@ -201,6 +218,12 @@ not start a browser process or CDP listener.
 
 ### Page sandbox
 
+Pages can copy text with `navigator.clipboard.writeText()` after a user click
+or key press on HTTPS (or localhost). The controller writes the clipboard,
+preferring `xclip -selection clipboard`, with platform clipboard commands as
+fallbacks. Clipboard command access stays outside the page sandbox; unavailable
+providers reject the promise instead of reporting a successful copy.
+
 Page JavaScript runs behind three layers:
 
 1. **SES and bindings.** The renderer calls `lockdown()`, and each document
@@ -231,7 +254,64 @@ threads:
 
 When idle, the main thread rasterizes a tile reaching half a viewport above
 and one viewport below the visible area, so the compositor can scroll
-without waiting. Screenshots are encoded with `Bun.Image`.
+without waiting. Standard screenshots are encoded with `Bun.Image`.
+
+Casty can negotiate raw RGBA/BGRA file screenshots with native bunterm. Raw
+pixels travel over the compositor's binary channel to the controller, which
+owns a private temporary directory and returns a versioned file descriptor
+through CDP. The renderer cannot create files: its seccomp policy is unchanged.
+Each delivery has a unique file, bounded to 16 outstanding files / 128 MiB;
+abandoned files expire on subsequent writes after 60 seconds, and closing the
+host removes the directory. Standard PNG/JPEG/WebP output and CLI screenshots
+retain their existing behavior. Casty falls back to its configured codec when
+raw transport is unsupported.
+
+Standard CDP `clip` rectangles also apply to raw captures. Fractional CSS
+width/height are retained until physical-pixel rounding, so a 1.75× viewport
+can deliver exactly 1918×1053 pixels. At `clip.scale: 1`, a full-width crop
+borrows a contiguous raster view instead of rescaling; encoded output uses
+the same crop. `Page.getLayoutMetrics` provides the viewport position so
+Casty can follow document scrolling.
+
+Casty also sends a private `clip` on `Page.startScreencast`. It takes precedence over fallback max limits and crops at native pixel density, without resizing. Width/height are CSS units; output pixels still follow device scale. This extension is not standard CDP.
+
+Casty 也會在 `Page.startScreencast` 傳入私有 `clip`；優先於相容用的 max 限制，以原像素密度裁切、不縮放。寬高是 CSS 單位，實體像素仍隨 device scale 換算。此擴充不是標準 CDP。
+
+標準 CDP `clip` 也適用於 raw 截圖；小數 CSS 尺寸保留到最後才換算成實體像素，
+避免字體大小改變後差一列而觸發 bunterm 縮放。`clip.scale: 1` 的全寬裁切
+直接借用連續像素，不重新縮放；Casty 透過 viewport 位置跟隨頁面捲動。
+
+Read-only captures interrupted by an origin renderer swap retry once against
+its replacement, after the new renderer has loaded its document. Scroll
+commands are never replayed, avoiding duplicate input.
+
+跨來源導航更換 renderer 時，唯讀截圖會等待新的 renderer 載入文件後重試一次；
+捲動命令不會重送，避免重複套用輸入。
+
+DOM-triggered rendering coalesces updates with a 16 ms minimum wait, increased
+to twice the last style/layout rebuild time for expensive documents. This is
+separate from Casty's screenshot interval and is not a 60 FPS guarantee:
+raster work and frame delivery still take time. More frequent updates can
+increase CPU usage on continuously animated pages.
+
+DOM 變更觸發的繪製會以至少 16 ms 等待合併更新；排版昂貴時則延長為上次
+樣式／排版重建耗時的兩倍。這與 Casty 的截圖間隔不同，也不保證 60 FPS；
+光柵繪製與畫面傳遞仍需時間，持續動畫的 CPU 用量可能增加。
+
+The compositor now connects to an authenticated, length-prefixed loopback
+socket before the sandbox is installed, instead of reading numeric fd 3.
+It connects directly to the controller, so a busy page main thread cannot
+block screenshot or scroll requests. This removes the previous Windows-only
+compositor disablement; the same tests can run on Windows, but this change
+has so far been executed on Linux only. No additional native library is used.
+
+原生 bunterm 可與 Casty 協商 RGBA／BGRA 原始像素檔案。renderer 經二進位通道
+交給 controller 寫檔，不放寬 seccomp；標準截圖與不支援 raw 的終端維持原路徑。
+compositor 改用沙箱啟用前建立、帶驗證的本機連線，不再依賴 fd 3，因此移除了
+Windows 專用的停用條件；目前已實測 Linux，Windows 仍待真機驗證。
+
+`bun tools/bench-raw-capture.js` measures changing-viewport capture delivery
+(including controller file writes for raw), not terminal FPS.
 
 `<video>` can decode and display MP4 video frames with basic playback and
 seeking. Video bytes are fetched through the controller; the renderer uses
@@ -342,6 +422,11 @@ rendered video position, and the output queue/latency for diagnosis.
 
 ### Diagnostics
 
+[`test/fixtures/browser-raw-demo.html`](test/fixtures/browser-raw-demo.html)
+is a self-contained animated page for checking rendering, scrolling, and links
+through Casty and bunterm. Serve it over a local HTTP server to reuse the visual
+demo; it does not require external assets.
+
 casty does not show the browser's stderr. Set `BUNINU_LOG=1` to also write
 it to `buninu-browser.log` in the working directory, or set
 `BUNINU_LOG=<path>` to choose the file. The log includes:

package/lib/cdp-server.js

@@ -44,9 +44,11 @@ export class CdpServer {
       for (const target of state.targets.values()) {
         if (target.screencast && target.screencastEmit) pushScreencastFrame(context, state, target);
       }
+      if (state.implicitTarget?.screencast) pushScreencastFrame(context, state, state.implicitTarget);
     });
     context.onLifecycle?.((name) => {
       for (const target of state.targets.values()) emitLifecycle(target, name);
+      if (state.implicitTarget) emitLifecycle(state.implicitTarget, name);
     });
 
     const server = Bun.serve({
@@ -178,6 +180,7 @@ export class CdpServer {
                 ...(sessionId ? { sessionId } : {}),
               });
             };
+            emit.owner = ws;
             const result = await dispatch(
               context,
               state,
@@ -206,6 +209,13 @@ export class CdpServer {
           }
         },
         close(ws) {
+          for (const target of state.targets.values()) {
+            if (target.screencastEmit?.owner === ws) stopScreencast(target);
+            if (target.lifecycleEmit?.owner === ws) target.lifecycleEmit = null;
+          }
+          const implicit = state.implicitTarget;
+          if (implicit?.screencastEmit?.owner === ws) stopScreencast(implicit);
+          if (implicit?.lifecycleEmit?.owner === ws) implicit.lifecycleEmit = null;
           serverLog("[CdpServer] client disconnected");
         },
       },
@@ -350,6 +360,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const target = state.targets.get(params.targetId);
       if (!target) return { success: false };
 
+      stopScreencast(target);
       await ctx.close?.();
       state.initialNavigations.get(params.targetId)?.navigated.resolve();
       state.initialNavigations.get(params.targetId)?.settled.resolve();
@@ -450,7 +461,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       // A javascript: URL runs in the current document: no new loader or history entry.
       if (/^\s*javascript:/i.test(String(params.url))) {
         await ctx.navigate?.(String(params.url).trim());
-        if (target.screencast) await emitScreencastFrame(ctx, state, target, emit);
+        if (target.screencast) await pushScreencastFrame(ctx, state, target);
         return { frameId: target.frameId, loaderId: target.loaderId };
       }
       // Events of the next document belong to its new loader.
@@ -460,7 +471,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       target.title = await getContextTitle(ctx, target);
       target.history[target.historyIndex].title = target.title;
       if (target.screencast) {
-        await emitScreencastFrame(ctx, state, target, emit);
+        await pushScreencastFrame(ctx, state, target);
       }
       state.initialNavigations.get(target.targetId)?.navigated.resolve();
 
@@ -512,6 +523,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     }
     case "Page.startScreencast": {
       const target = getSessionTarget(state, sessionId);
+      stopScreencast(target);
       target.screencast = { ...params };
       target.screencastEmit = emit;
       // As in Chrome, the reply does not wait for the first frame (nor the
@@ -519,12 +531,14 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       void pushScreencastFrame(ctx, state, target);
       return {};
     }
-    case "Page.screencastFrameAck":
+    case "Page.screencastFrameAck": {
+      const target = getSessionTarget(state, sessionId);
+      if (target.screencastFrames.delete(params.sessionId) && target.screencastPending) void pushScreencastFrame(ctx, state, target);
       return {};
+    }
     case "Page.stopScreencast": {
       const target = getSessionTarget(state, sessionId);
-      target.screencast = null;
-      target.screencastEmit = null;
+      stopScreencast(target);
       return {};
     }
     case "Page.reload": {
@@ -707,7 +721,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           navigateTarget(state, target, navigation.url, emit, { addHistory: true });
           target.title = navigation.title ?? await getContextTitle(ctx, target);
           target.history[target.historyIndex].title = target.title;
-          if (target.screencast) await emitScreencastFrame(ctx, state, target, emit);
+          if (target.screencast) await pushScreencastFrame(ctx, state, target);
         }
       }
       return {};
@@ -817,6 +831,7 @@ function createTarget(state, url = "about:blank", options = {}) {
       deviceScaleFactor: 1,
     },
     screencast: null,
+    screencastFrames: new Set(),
   };
   state.targets.set(targetId, target);
   state.initialNavigations.set(targetId, {
@@ -857,9 +872,20 @@ function emitLifecycle(target, name) {
   emit("Page.lifecycleEvent", { frameId: target.frameId, loaderId: target.loaderId, name, timestamp });
 }
 
-/** One screencast frame at a time; changes during a capture coalesce into one more. */
+// Bound the amount of image data queued to a slow CDP client. Two outstanding
+// frames keep the pipe moving while acknowledging one; later updates coalesce.
+const MAX_SCREENCAST_FRAMES = 2;
+function stopScreencast(target) {
+  target.screencast = null;
+  target.screencastEmit = null;
+  target.screencastPending = false;
+  target.screencastFrames.clear();
+}
+
+/** One capture at a time, with bounded unacknowledged frames. */
 async function pushScreencastFrame(ctx, state, target) {
-  if (target.screencastBusy) {
+  if (!target.screencast || !target.screencastEmit) return;
+  if (target.screencastBusy || target.screencastFrames.size >= MAX_SCREENCAST_FRAMES) {
     target.screencastPending = true;
     return;
   }
@@ -867,8 +893,9 @@ async function pushScreencastFrame(ctx, state, target) {
   try {
     do {
       target.screencastPending = false;
-      await emitScreencastFrame(ctx, state, target, target.screencastEmit);
-    } while (target.screencastPending && target.screencast && target.screencastEmit);
+      await emitScreencastFrame(ctx, state, target);
+    } while (target.screencastPending && target.screencast && target.screencastEmit
+      && target.screencastFrames.size < MAX_SCREENCAST_FRAMES);
   } catch (error) {
     serverError(`[CdpServer] screencast frame failed: ${error?.message ?? error}`);
   } finally {
@@ -876,10 +903,14 @@ async function pushScreencastFrame(ctx, state, target) {
   }
 }
 
-async function emitScreencastFrame(ctx, state, target, emit) {
-  const data = await screenshotData(ctx, target, target.screencast ?? {});
-  if (!data) return;
+async function emitScreencastFrame(ctx, state, target) {
+  const stream = target.screencast, emit = target.screencastEmit;
+  const data = await screenshotData(ctx, target, stream);
+  if (!data || stream !== target.screencast || emit !== target.screencastEmit) return;
   const scrollOffset = await ctx.scrollOffset?.() ?? { x: 0, y: 0 };
+  if (stream !== target.screencast || emit !== target.screencastEmit) return;
+  const sessionId = state.nextScreencastFrameId++;
+  target.screencastFrames.add(sessionId);
   emit("Page.screencastFrame", {
     data,
     metadata: {
@@ -891,7 +922,7 @@ async function emitScreencastFrame(ctx, state, target, emit) {
       scrollOffsetY: scrollOffset.y,
       timestamp: performance.now() / 1000,
     },
-    sessionId: state.nextScreencastFrameId++,
+    sessionId,
   });
 }
 
@@ -1000,6 +1031,8 @@ function getImplicitTarget(state) {
 
   state.implicitTarget = {
     targetId: "implicit-target",
+    screencast: null,
+    screencastFrames: new Set(),
     frameId: "implicit-target",
     loaderId: "implicit-loader",
     type: "page",

package/lib/clipboard.js

@@ -0,0 +1,22 @@
+// Host-side text clipboard. No shell interpolation; page bytes go only to stdin.
+export function clipboardCommands(platform = process.platform) {
+  return [
+    ['xclip','-selection','clipboard'],
+    ...(platform === 'win32' ? [['powershell.exe','-NoProfile','-NonInteractive','-Command',
+      '[Console]::InputEncoding = [System.Text.Encoding]::UTF8; Set-Clipboard -Value ([Console]::In.ReadToEnd())']]
+      : platform === 'darwin' ? [['pbcopy']] : [['wl-copy'],['termux-clipboard-set']]),
+  ];
+}
+export async function writeClipboard(text, {which = Bun.which, spawn = Bun.spawn, platform = process.platform} = {}) {
+  if(typeof text !== 'string' || Buffer.byteLength(text)>1024*1024)throw Error('Clipboard text exceeds limit');
+  for(const command of clipboardCommands(platform)) {
+    const executable=which(command[0]); if(!executable)continue;
+    let child,timer;
+    try {
+      child=spawn([executable,...command.slice(1)],{stdin:Buffer.from(text),stdout:'ignore',stderr:'ignore'});
+      timer=setTimeout(()=>child.kill(9),3000);
+      if(await child.exited === 0)return;
+    } catch {} finally {clearTimeout(timer);}
+  }
+  throw Error('No working clipboard command (xclip preferred)');
+}

package/lib/happy-dom/document-base.js

@@ -0,0 +1,33 @@
+import Node from "../../vendor/happy-dom/packages/happy-dom/src/nodes/node/Node.ts";
+import Document from "../../vendor/happy-dom/packages/happy-dom/src/nodes/document/Document.ts";
+import HTMLHyperlinkElementUtility from "../../vendor/happy-dom/packages/happy-dom/src/nodes/html-hyperlink-element/HTMLHyperlinkElementUtility.ts";
+
+/** HTML document base URL, shared by the inert DOM and its page bindings. */
+export function documentBaseURL(node) {
+  const document = node?.nodeType === 9 ? node : node?.ownerDocument;
+  const fallback = document?.URL ?? "about:blank";
+  const base = document?.querySelector?.("base[href]");
+  if (!base) return fallback;
+  try {
+    const url = new URL(base.getAttribute("href"), fallback);
+    return url.protocol === "data:" || url.protocol === "javascript:" ? fallback : url.href;
+  } catch { return fallback; }
+}
+
+// Happy DOM selects the first <base>, including ones with only a target.
+// Correcting both accessors keeps native URL attributes and renderer loads
+// on the same base, without modifying the vendored implementation.
+for (const prototype of [Node.prototype, Document.prototype]) {
+  Object.defineProperty(prototype, "baseURI", {
+    configurable: true, get() { return documentBaseURL(this); },
+  });
+}
+
+// Hyperlink component accessors use this shared method, so pathname/search
+// setters and origin/hash getters resolve consistently with href itself.
+HTMLHyperlinkElementUtility.prototype.getHref = function () {
+  const value = this.element.getAttribute("href");
+  if (value === null) return "";
+  try { return new URL(value, documentBaseURL(this.element)).href; }
+  catch { return value; }
+};

package/lib/happy-dom/parser.js

@@ -1,6 +1,9 @@
 import HTMLParser from "../../vendor/happy-dom/packages/happy-dom/src/html-parser/HTMLParser.ts";
 import Window from "../../vendor/happy-dom/packages/happy-dom/src/window/Window.ts";
+import * as PropertySymbol from "../../vendor/happy-dom/packages/happy-dom/src/PropertySymbol.ts";
 import "./selector-pseudo-adapter.js";
+import "./svg-attribute-adapter.js";
+import "./document-base.js";
 
 const IMPLICIT_HEAD_ELEMENTS = new Set([
   "BASE", "BASEFONT", "BGSOUND", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE",
@@ -12,8 +15,18 @@ const IMPLICIT_HEAD_ELEMENTS = new Set([
  * Page JavaScript and subresource loading stay disabled here. They belong to
  * the renderer scheduler and network service rather than the tree builder.
  */
-export function parseHTMLDocument(html, url = "about:blank") {
-  const window = new Window({
+export function parseHTMLDocument(html, url = "about:blank", referrer = "") {
+  const window = createInertWindow(url);
+  window.document[PropertySymbol.referrer] = referrer;
+
+  new HTMLParser(window).parse(String(html), window.document);
+  normalizeImplicitHead(window.document, implicitHeadCount(String(html)));
+  return { window, document: window.document };
+}
+
+/** An isolated parser context: no script execution, resource loads or page custom elements. */
+export function createInertWindow(url = "about:blank") {
+  return new Window({
     url,
     settings: {
       disableJavaScriptEvaluation: true,
@@ -27,10 +40,6 @@ export function parseHTMLDocument(html, url = "about:blank") {
       navigation: { disableFallbackToSetURL: true },
     },
   });
-
-  new HTMLParser(window).parse(String(html), window.document);
-  normalizeImplicitHead(window.document, implicitHeadCount(String(html)));
-  return { window, document: window.document };
 }
 
 /**

package/lib/happy-dom/selector-matcher.js

@@ -37,9 +37,9 @@ export function compileSelector(element, selector) {
 }
 
 /** Whether `element` matches a compiled selector, as element.matches(selector) would. */
-export function matchesCompiled(element, compiled) {
+export function matchesCompiled(element, compiled, scope = element) {
   for (const items of compiled) {
-    if (matchItems(element, element, items, 0, null)) return true;
+    if (matchItems(scope, element, items, 0, null)) return true;
   }
   return false;
 }

package/lib/happy-dom/selector-pseudo-adapter.js

@@ -1,9 +1,28 @@
 import SelectorItem from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorItem.ts";
+import { compileSelector, matchesCompiled } from "./selector-matcher.js";
 
 // Happy DOM's :empty checks only element children. CSS also excludes elements
 // with nonempty text nodes (including whitespace); comments do not count.
 const original = SelectorItem.prototype.matchPseudoItem;
+const selectorLists = new WeakMap();
 SelectorItem.prototype.matchPseudoItem = function (scope, element, siblings, pseudo, ignoreErrors) {
+  if (pseudo.name === "focus-within") {
+    const focused = element.ownerDocument?.activeElement;
+    return focused && (focused === element || element.contains(focused)) ? {priorityWeight:10} : null;
+  }
+  // Functional selector lists match their complete complex selectors. The
+  // upstream per-item path tests only a group's first compound, so e.g.
+  // :where(h2 code) incorrectly matches the h2 instead of its code child.
+  if (["is", "where", "not"].includes(pseudo.name) && pseudo.arguments) {
+    let compiled = selectorLists.get(pseudo);
+    if (compiled === undefined) {
+      compiled = compileSelector(element, pseudo.arguments) ?? null;
+      selectorLists.set(pseudo, compiled);
+    }
+    const matches = compiled && matchesCompiled(element, compiled, scope);
+    return (pseudo.name === "not" ? !matches : matches)
+      ? { priorityWeight: pseudo.name === "where" ? 0 : 10 } : null;
+  }
   if (pseudo.name === "empty") {
     for (const child of element.childNodes) {
       if (child.nodeType === 1 || (child.nodeType === 3 || child.nodeType === 4) && child.data.length) return null;

package/lib/happy-dom/svg-attribute-adapter.js

@@ -0,0 +1,50 @@
+import HTMLParser from "../../vendor/happy-dom/packages/happy-dom/src/html-parser/HTMLParser.ts";
+
+// HTML tokenization ASCII-lowercases every attribute, including foreign
+// content. Tree construction then restores the standard SVG spellings.
+// https://html.spec.whatwg.org/multipage/parsing.html#adjust-svg-attributes
+const adjustedNames = new Map(`attributeName attributeType baseFrequency baseProfile calcMode clipPathUnits
+  diffuseConstant edgeMode filterUnits glyphRef gradientTransform gradientUnits kernelMatrix kernelUnitLength
+  keyPoints keySplines keyTimes lengthAdjust limitingConeAngle markerHeight markerUnits markerWidth
+  maskContentUnits maskUnits numOctaves pathLength patternContentUnits patternTransform patternUnits
+  pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits refX refY repeatCount repeatDur
+  requiredExtensions requiredFeatures specularConstant specularExponent spreadMethod startOffset stdDeviation
+  stitchTiles surfaceScale systemLanguage tableValues targetX targetY textLength viewBox viewTarget
+  xChannelSelector yChannelSelector zoomAndPan`.trim().split(/\s+/).map(name => [name.toLowerCase(), name]));
+const space = character => character === " " || character === "\t" || character === "\n" || character === "\r" || character === "\f";
+
+function adjustNames(source) {
+  let index = 0, copied = 0, output = "";
+  while (index < source.length) {
+    while (space(source[index]) || source[index] === "/") index++;
+    const start = index;
+    while (index < source.length && !space(source[index]) && source[index] !== "=" && source[index] !== "/" && source[index] !== ">") index++;
+    if (index === start) { index++; continue; }
+    const name = source.slice(start, index);
+    const lower = name.replace(/[A-Z]/g, character => character.toLowerCase());
+    const adjusted = adjustedNames.get(lower) ?? lower;
+    if (name !== adjusted) {
+      output += source.slice(copied, start) + adjusted;
+      copied = index;
+    }
+    while (space(source[index])) index++;
+    if (source[index] !== "=") continue;
+    index++;
+    while (space(source[index])) index++;
+    const quote = source[index];
+    if (quote === '"' || quote === "'") {
+      index++;
+      while (index < source.length && source[index] !== quote) index++;
+      if (index < source.length) index++;
+    } else {
+      while (index < source.length && !space(source[index]) && source[index] !== ">") index++;
+    }
+  }
+  return copied ? output + source.slice(copied) : source;
+}
+
+const parseAttributes = HTMLParser.prototype.parseEndOfStartTag;
+HTMLParser.prototype.parseEndOfStartTag = function (source, selfClosing) {
+  if (source && this.nextElement?.namespaceURI === "http://www.w3.org/2000/svg") source = adjustNames(source);
+  return parseAttributes.call(this, source, selfClosing);
+};

package/lib/headless-shell.js

@@ -101,6 +101,7 @@ export async function createBrowser({
   let closed = false;
   // Settles when the first renderer shows about:blank (assigned below).
   let rendererReady = null;
+  const documentReady = new WeakMap();
   // Renderer-independent state replayed into every new renderer.
   const viewport = { width: 800, height: 600, deviceScaleFactor: 1 };
   let userAgent = webkit ? initialUserAgent : null;
@@ -173,7 +174,7 @@ export async function createBrowser({
           recordFragment(url, fragmentFrom);
           return;
         }
-        navigate(url, { downloadName, post }).catch((error) => console.error(`buninu-browser: navigation failed: ${error.message}`));
+        navigate(url, { downloadName, post, referrer: host.documentUrl }).catch((error) => console.error(`buninu-browser: navigation failed: ${error.message}`));
       },
       onDownload: ({ url, name, data }) => {
         if (host !== current) return;
@@ -231,6 +232,8 @@ export async function createBrowser({
     await next.start();
     await replayState((method, ...params) => next.call(method, ...params));
     const previous = current;
+    const ready=Promise.withResolvers();
+    documentReady.set(next,ready);
     current = next;
     currentKey = key;
     previous?.close();
@@ -259,7 +262,7 @@ export async function createBrowser({
    * final origin. `invoke` pins the renderer (used when restoring a
    * restarted renderer).
    */
-  async function load(url, invoke = null, downloadName = null, post = null) {
+  async function load(url, invoke = null, downloadName = null, post = null, referrer = null) {
     const started = performance.now();
     if (downloadName !== null && resource && withoutHash(url) === withoutHash(resource.url)) {
       return download({ url: resource.url, body: resource.body, attributeName: downloadName, totalBytes: resource.body.byteLength });
@@ -273,7 +276,7 @@ export async function createBrowser({
       try {
         const target = new URL(url);
         const response = ["http:", "https:"].includes(target.protocol)
-          ? await network.navigate(target.href, { post, onResponse: (raw, finalUrl) => {
+          ? await network.navigate(target.href, { post, referrer: referrer ?? post?.referrer ?? null, onResponse: (raw, finalUrl) => {
             if (!raw.ok || (downloadName === null && !isAttachment(raw.headers.get("content-disposition")))) return null;
             return download({ url: finalUrl, body: raw.body, disposition: raw.headers.get("content-disposition") ?? "",
               attributeName: downloadName ?? "", totalBytes: Number(raw.headers.get("content-length")) || 0 });
@@ -292,6 +295,7 @@ export async function createBrowser({
           status: response.status,
           statusText: response.statusText,
           cookie: network.documentCookie(response.url),
+          referrer: response.referrer ?? "",
         };
       } catch (error) {
         document = { url, error: String(error) };
@@ -304,7 +308,10 @@ export async function createBrowser({
       + `${document.url === url ? "" : ` -> ${document.url}`} in ${Math.round(fetched - started)}ms`);
     if (!invoke) await rendererReady;
     const host = invoke ? current : await rendererFor(document.url);
-    const generation = await (invoke ?? ((method, ...params) => host.call(method, ...params)))("loadDocument", document);
+    let generation;
+    try {
+      generation = await (invoke ?? ((method, ...params) => host.call(method, ...params)))("loadDocument", document);
+    } finally { documentReady.get(host)?.resolve(); }
     committed = { host, generation };
     for (const name of reachedLifecycle(host, generation)) notify(lifecycleListeners, name);
     writeLog("navigation", `${document.url}: first paint in ${Math.round(performance.now() - fetched)}ms`);
@@ -314,7 +321,20 @@ export async function createBrowser({
   // answered even while the renderer's main thread is busy.
   const composite = async (method, ...params) => {
     await rendererReady;
-    return current.composite(method, ...params);
+    // An origin change retires the old compositor. Read-only requests may
+    // follow that swap once; scrolling must never be applied twice.
+    const readOnly = method === "screenshot" || method === "scrollOffset";
+    for (let attempt=0; ; attempt++) {
+      const host=current;
+      await documentReady.get(host)?.promise;
+      if (closed) throw Error("Browser is closed");
+      try {
+        if (host !== current) throw Error("Capture superseded by navigation");
+        return await host.composite(method, ...params);
+      } catch (error) {
+        if (closed || !readOnly || host === current || attempt >= 1) throw error;
+      }
+    }
   };
 
   async function rememberScroll() {
@@ -324,7 +344,7 @@ export async function createBrowser({
     Object.assign(history[historyIndex], { x: offset.x, y: offset.y });
   }
 
-  async function navigate(url, { downloadName = null, post = null } = {}) {
+  async function navigate(url, { downloadName = null, post = null, referrer = null } = {}) {
     const resolved = new URL(url, currentUrl).href;
     // A javascript: URL runs in the current document; history does not change.
     if (resolved.startsWith("javascript:")) {
@@ -336,7 +356,7 @@ export async function createBrowser({
     if (!post && downloadName === null && withoutHash(resolved) === withoutHash(currentUrl)) {
       currentUrl = resolved;
     } else {
-      const result = await load(resolved, null, downloadName, post);
+      const result = await load(resolved, null, downloadName, post, referrer);
       if (result?.downloaded) return null;
       // The document is at the URL redirects ended on; the request's fragment
       // carries over to it unless it has its own (Fetch §4.4, HTML §7.4.6).
@@ -404,8 +424,10 @@ export async function createBrowser({
       applyState("setInitScripts", () => [[...initScripts.values()]]);
     },
     screenshot: (options = {}) => composite("screenshot", {
-      format: options.format === "jpeg" || options.format === "webp" ? options.format : "png",
+      format: ["jpeg", "webp", "rgba", "bgra"].includes(options.format) ? options.format : "png",
       quality: Number.isFinite(options.quality) ? options.quality : 80,
+      optimizeForSpeed: options.optimizeForSpeed === true,
+      clip: options.clip ? {...options.clip,x:options.clip.x/pageScale(),y:options.clip.y/pageScale(),width:options.clip.width/pageScale(),height:options.clip.height/pageScale()} : undefined,
     }),
     title: () => call("title"),
     /**
@@ -466,11 +488,17 @@ export async function createBrowser({
         recordFragment(href, clicked.fragmentFrom);
         return { url: href, title: await call("title") };
       }
-      const result = await navigate(href, { downloadName: typeof clicked === "object" ? clicked.download ?? null : null });
+      const result = await navigate(href, { downloadName: typeof clicked === "object" ? clicked.download ?? null : null,
+        referrer: current.documentUrl });
       return result === null ? null : { url: href, title: await call("title") };
     },
     evaluate: (expression) => call("evaluate", String(expression)),
-    cdp() {
+    async cdp(method) {
+      if(method==='Page.getLayoutMetrics') {
+        const offset=await composite('scrollOffset');
+        const visual={pageX:offset.x*pageScale(),pageY:offset.y*pageScale(),offsetX:0,offsetY:0,clientWidth:viewport.width,clientHeight:viewport.height,scale:1,zoom:1};
+        return {cssVisualViewport:visual,cssLayoutViewport:visual,visualViewport:visual,layoutViewport:visual};
+      }
       return {};
     },
   };
@@ -481,7 +509,8 @@ export async function createBrowser({
     const first = rendererFor("about:blank");
     prepareSpare();
     await first;
-    await current.call("loadDocument", { url: "about:blank" });
+    try { await current.call("loadDocument", { url: "about:blank" }); }
+    finally { documentReady.get(current)?.resolve(); }
   })();
   if (waitForRenderer) await rendererReady;
   else rendererReady.catch(() => {}); // the caller awaits `ready`