buninu-browser 0.2.4 → 0.3.0

package/lib/renderer/host.js

@@ -1,3 +1,4 @@
+import {writeClipboard} from '../clipboard.js';
 /**
  * Controller-side handle for a renderer process.
  *
@@ -9,10 +10,11 @@
  * Everything the renderer sends is treated as untrusted input.
  *
  * Besides IPC with the renderer's main thread, each renderer gets a second
- * channel (fd 3) to its compositor thread, which answers screenshots and
+ * authenticated loopback channel to its compositor thread, which answers screenshots and
  * scrolling even while the main thread is busy (see compositor.js).
  */
-import { closeSync } from "node:fs";
+import {listenCompositor} from "./compositor-channel.js";
+import {RawFrames} from "../paint/raw-frames.js";
 import { PulseClient } from "../audio/pulse-client.js";
 import { logEnabled, pipeToLog, RENDERER_LOG_FLAG, writeLog } from "../log.js";
 import { NetworkService } from "../network/network-service.js";
@@ -47,13 +49,18 @@ const MAX_WEB_SOCKETS = 64;
 const MAX_WEB_SOCKET_MESSAGE = 16 * 1024 * 1024;
 const COMPOSITOR_METHODS = new Set(["screenshot", "scroll", "scrollOffset"]);
 const COMPOSITOR_TIMEOUT = 10_000;
-const MAX_CHANNEL_LINE = 96 * 1024 * 1024;
 const LIFECYCLE_NAMES = new Set(["DOMContentLoaded", "load"]);
 
 // A file path, not a URL's pathname ("/C:/..." on Windows).
 const DEFAULT_ENTRY = Bun.fileURLToPath(new URL("./main.js", import.meta.url));
 
 export class RendererHost {
+  #clipboardWrite = writeClipboard;
+  #clipboardUntil = 0;
+  #clipboardPending = false;
+  #rawFrames = null;
+  #startEpoch = 0;
+  #rejectStartup = null;
   #entry;
   #args;
   #timeout;
@@ -105,11 +112,11 @@ export class RendererHost {
     entry = DEFAULT_ENTRY, args = [], timeout = 30_000, onRestart = null, onNavigate = null, onDownload = null,
     fetch: fetchImpl = fetch,
     network = new NetworkService({ fetch: fetchImpl }), onFrame = null, onLifecycle = null,
-    // The compositor's channel is an extra stdio pipe used as fd 3, which
-    // Windows does not have (Bun hands out libuv pipes there, not file
-    // descriptors): there the main thread answers screenshots and scrolling.
-    compositor = entry === DEFAULT_ENTRY && process.platform !== "win32",
+    // A dedicated loopback socket works independently of the main thread on all platforms.
+    compositor = entry === DEFAULT_ENTRY,
+    clipboardWrite = writeClipboard,
   } = {}) {
+    this.#clipboardWrite = clipboardWrite;
     this.#onFrame = onFrame;
     this.#onLifecycle = onLifecycle;
     this.#compositor = compositor;
@@ -131,47 +138,61 @@ export class RendererHost {
       resolveReady = resolve;
       rejectReady = reject;
     });
+    this.#rejectStartup = rejectReady;
     const logging = logEnabled();
     const compositor = this.#compositor;
-    const child = Bun.spawn({
-      cmd: [process.execPath, this.#entry, ...this.#args,
-        ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG] : []),
-        ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
-      // No inherited environment: nothing from the controller leaks in.
-      // Windows programs need SystemRoot to load system libraries.
-      env: process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {},
-      // With BUNINU_LOG, output goes through the controller into the log file.
-      // fd 3 is a socket to the renderer's compositor thread.
-      stdio: ["ignore", logging ? "pipe" : "inherit", logging ? "pipe" : "inherit", ...(compositor ? ["pipe"] : [])],
-      serialization: "advanced",
-      ipc: (message) => {
-        if (message?.type === "ready") {
-          this.#sandbox = sanitizeSandboxReport(message.sandbox);
-          resolveReady();
-        }
-        else this.#handleMessage(child, message);
-      },
-      onExit: (_process, exitCode, signalCode) => {
-        this.#closeChannel(channel);
-        this.#closeSockets(child);
-        this.#closeAudio(child);
-        this.#closePageFetches(child);
-        if (this.#child !== child) return;
-        console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
-        this.#child = null;
-        this.#ready = null;
-        rejectReady(new Error("renderer exited during startup"));
-        for (const { reject } of this.#pending.values()) reject(new Error("renderer exited"));
-        this.#pending.clear();
-      },
-    });
-    this.#child = child;
-    const channel = compositor && Number.isInteger(child.stdio[3]) ? this.#openChannel(child.stdio[3]) : null;
-    this.#channel = channel;
-    if (logging) {
-      pipeToLog(child.stdout, `renderer ${child.pid}`, (chunk) => process.stdout.write(chunk));
-      pipeToLog(child.stderr, `renderer ${child.pid}`, (chunk) => process.stderr.write(chunk));
-    }
+    const epoch = ++this.#startEpoch;
+    void (async () => {
+      const channel = compositor ? {pending:new Map(),nextId:1,closed:false,transport:null} : null;
+      if (channel) channel.transport = await listenCompositor(
+        (message,pixels)=>this.#handleCompositorMessage(channel,message,pixels),
+        ()=>this.#closeChannel(channel));
+      if (epoch !== this.#startEpoch) { channel?.transport.close(); throw Error('Renderer startup cancelled'); }
+      this.#channel = channel;
+      const child = Bun.spawn({
+        cmd: [process.execPath, this.#entry, ...this.#args,
+          ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG, `--compositor-endpoint=${JSON.stringify(channel.transport.endpoint)}`] : []),
+          ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
+        // No inherited environment: nothing from the controller leaks in.
+        // Windows programs need SystemRoot to load system libraries.
+        env: process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {},
+        // With BUNINU_LOG, output goes through the controller into the log file.
+        stdio: ["ignore", logging ? "pipe" : "inherit", logging ? "pipe" : "inherit"],
+        serialization: "advanced",
+        ipc: (message) => {
+          if (message?.type === "ready") {
+            this.#sandbox = sanitizeSandboxReport(message.sandbox);
+            this.#rejectStartup=null;
+            clearTimeout(startupTimer);
+            resolveReady();
+          }
+          else this.#handleMessage(child, message);
+        },
+        onExit: (_process, exitCode, signalCode) => {
+          clearTimeout(startupTimer);
+          this.#closeChannel(channel);
+          this.#closeSockets(child);
+          this.#closeAudio(child);
+          this.#closePageFetches(child);
+          rejectReady(new Error("renderer exited during startup"));
+          if (this.#child !== child) return;
+          console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
+          this.#child = null;
+          this.#ready = null;
+          this.#rawFrames?.close(); this.#rawFrames=null;
+          for (const { reject } of this.#pending.values()) reject(new Error("renderer exited"));
+          this.#pending.clear();
+        },
+      });
+      this.#child = child;
+      const startupTimer = setTimeout(() => {
+        this.#closeChannel(channel); child.kill(9); rejectReady(Error('Renderer startup timed out'));
+      }, this.#timeout);
+      if (logging) {
+        pipeToLog(child.stdout, `renderer ${child.pid}`, (chunk) => process.stdout.write(chunk));
+        pipeToLog(child.stderr, `renderer ${child.pid}`, (chunk) => process.stderr.write(chunk));
+      }
+    })().catch(error=>{ if(epoch===this.#startEpoch){this.#closeChannel(this.#channel);this.#ready=null;} rejectReady(error); });
     return this.#ready;
   }
 
@@ -213,12 +234,13 @@ export class RendererHost {
    * waiting for the renderer's main thread or its call queue.
    */
   async composite(method, ...params) {
-    if (!this.#compositor || !COMPOSITOR_METHODS.has(method)) return this.call(method, ...params);
+    if (!this.#compositor || !COMPOSITOR_METHODS.has(method)) return this.#captureResult(method, await this.call(method, ...params), params);
     // A dead renderer is restarted (and its page restored) through the call path.
     if (!this.#child) await this.call("url");
     await this.start();
     const channel = this.#channel;
-    if (!channel) return this.call(method, ...params);
+    if (!channel) return this.#captureResult(method, await this.call(method, ...params), params);
+    const child = this.#child;
     const result = await new Promise((resolve, reject) => {
       const id = channel.nextId++;
       const timer = setTimeout(() => {
@@ -235,56 +257,25 @@ export class RendererHost {
           reject(error);
         },
       });
-      channel.writer.write(`${JSON.stringify({ id, method, params })}\n`);
-      channel.writer.flush();
+      try { channel.transport.send({id,method,params}); }
+      catch(error) { channel.pending.get(id).reject(error); channel.pending.delete(id); }
     });
-    const sanitized = sanitizeCompositorResult(method, result);
+    if (channel.closed || this.#child !== child) throw Error("Renderer closed during capture");
+    const sanitized = this.#captureResult(method, result, params);
     if (method === "scroll") this.#pendingScroll = sanitized;
     return sanitized;
   }
 
-  #openChannel(fd) {
-    const channel = { writer: Bun.file(fd).writer(), pending: new Map(), nextId: 1, closed: false };
-    (async () => {
-      const decoder = new TextDecoder();
-      let buffer = "";
-      try {
-        for await (const chunk of Bun.file(fd).stream()) {
-          buffer += decoder.decode(chunk, { stream: true });
-          let newline;
-          while ((newline = buffer.indexOf("\n")) >= 0) {
-            this.#handleCompositorLine(channel, buffer.slice(0, newline));
-            buffer = buffer.slice(newline + 1);
-          }
-          if (buffer.length > MAX_CHANNEL_LINE) buffer = "";
-        }
-      } catch {
-        // The renderer went away.
-      }
-      this.#closeChannel(channel);
-      // Close everything that refers to the socket once, after end of
-      // stream, so no descriptor number can have been reused meanwhile.
-      try {
-        channel.writer.end();
-      } catch {
-        // Already closed.
-      }
-      try {
-        closeSync(fd);
-      } catch {
-        // Already closed.
-      }
-    })();
-    return channel;
+  #captureResult(method,result,params) {
+    if (method === 'screenshot' && ['rgba','bgra'].includes(params[0]?.format)) {
+      if (result?.format !== params[0].format) throw Error('Raw screenshot format mismatch');
+      this.#rawFrames ??= new RawFrames();
+      return this.#rawFrames.write(result.pixels,result.width,result.height,result.format);
+    }
+    return sanitizeCompositorResult(method,result);
   }
 
-  #handleCompositorLine(channel, line) {
-    let message;
-    try {
-      message = JSON.parse(line);
-    } catch {
-      return;
-    }
+  #handleCompositorMessage(channel, message, pixels) {
     if (channel.closed || typeof message !== "object" || message === null) return;
     if (message.type === "frame") {
       if (this.#channel === channel) this.#onFrame?.();
@@ -292,19 +283,23 @@ export class RendererHost {
       const pending = channel.pending.get(message.id);
       channel.pending.delete(message.id);
       if (Object.hasOwn(message, "error")) pending.reject(new Error(`compositor: ${String(message.error).slice(0, 200)}`));
-      else pending.resolve(message.result);
+      else pending.resolve(pixels.length ? {...message.result,pixels} : message.result);
     }
   }
 
   #closeChannel(channel) {
     if (!channel || channel.closed) return;
     channel.closed = true;
+    channel.transport?.close();
     for (const { reject } of channel.pending.values()) reject(new Error("compositor closed"));
     channel.pending.clear();
     if (this.#channel === channel) this.#channel = null;
   }
 
   close() {
+    this.#startEpoch++;
+    this.#rejectStartup?.(Error("Renderer closed during startup")); this.#rejectStartup=null;
+    this.#rawFrames?.close(); this.#rawFrames=null;
     this.#closeChannel(this.#channel);
     const child = this.#child;
     this.#closeSockets(child);
@@ -312,6 +307,8 @@ export class RendererHost {
     this.#closePageFetches(child);
     this.#child = null;
     this.#ready = null;
+    for (const {reject} of this.#pending.values()) reject(Error("Renderer closed"));
+    this.#pending.clear();
     child?.kill();
   }
 
@@ -319,6 +316,8 @@ export class RendererHost {
     if (!this.#child) await this.#restart();
     await this.start();
     const child = this.#child;
+    if (method === 'click' || method === 'press') this.#clipboardUntil = Date.now()+5000;
+    if (method === 'loadDocument') this.#clipboardUntil = 0;
     const id = this.#nextId++;
     return new Promise((resolve, reject) => {
       const timer = setTimeout(() => {
@@ -327,6 +326,7 @@ export class RendererHost {
         this.#child = null;
         this.#ready = null;
         console.error(`buninu-browser: renderer ${child.pid} missed the ${timeout}ms deadline for ${method}; killing it`);
+        this.#rawFrames?.close(); this.#rawFrames=null;
         child.kill(9);
         reject(new Error(`renderer ${method} timed out after ${timeout}ms`));
       }, timeout);
@@ -365,6 +365,18 @@ export class RendererHost {
         pending.reject(new Error(`renderer: ${String(message.error).split("\n")[0] || "unknown error"}`));
       }
       else pending.resolve(message.result);
+    } else if (message.type === 'clipboard-write' && Number.isInteger(message.id)) {
+      const reply = error => { if(this.#child===child)child.send({type:'clipboard-result',id:message.id,...(error?{error}: {})}); };
+      let secure=false;
+      try { const url=new URL(this.#documentUrl); secure=url.protocol==='https:' || (url.protocol==='http:' && ['localhost','127.0.0.1','[::1]'].includes(url.hostname)); } catch {}
+      if (!secure || Date.now()>this.#clipboardUntil || this.#clipboardPending
+          || typeof message.text!=='string' || Buffer.byteLength(message.text)>1024*1024) {
+        reply('Clipboard write requires a recent user action in a secure document'); return;
+      }
+      this.#clipboardUntil=0; this.#clipboardPending=true;
+      Promise.resolve().then(()=>this.#clipboardWrite(message.text))
+        .then(()=>reply(),()=>reply('Unable to write system clipboard'))
+        .finally(()=>{this.#clipboardPending=false;});
     } else if (message.type === "fetch" && Number.isInteger(message.id)) {
       this.#fetchForRenderer(child, message);
     } else if (message.type === "page-fetch" && Number.isInteger(message.id)) {
@@ -495,8 +507,7 @@ export class RendererHost {
         child.send({ type: "audio-event", id, ...payload });
         // The compositor's A/V clock must not wait behind page JavaScript.
         if (payload.event === "timing" && this.#channel && !this.#channel.closed) {
-          this.#channel.writer.write(`${JSON.stringify({ type: "audio-timing", audioId: id, seconds: payload.seconds })}\n`);
-          this.#channel.writer.flush();
+          this.#channel.transport.send({type:"audio-timing",audioId:id,seconds:payload.seconds});
         }
       }
     };

package/lib/renderer/main.js

@@ -28,7 +28,7 @@
  *                           closed with sentBytes: the PCM that reached the output before audio-close)
  *
  * With --compositor, a compositor Worker (compositor.js) answers screenshots
- * and scrolling on fd 3 while this thread is busy; frames go to it with
+ * and scrolling on a dedicated socket while this thread is busy; frames go to it with
  * postMessage.
  *
  * Startup order matters for the sandbox:
@@ -172,6 +172,8 @@ function compositorCaughtUp() {
 
 async function startCompositor() {
   const worker = new Worker(new URL("./compositor.js", import.meta.url).href);
+  const endpoint = JSON.parse(process.argv.find(arg=>arg.startsWith('--compositor-endpoint=')).slice('--compositor-endpoint='.length));
+  worker.postMessage({type:'connect',endpoint});
   await new Promise((resolve, reject) => {
     worker.addEventListener("message", resolve, { once: true });
     worker.addEventListener("error", reject, { once: true });
@@ -237,12 +239,24 @@ async function startScriptRewriter() {
   });
 }
 
+let nextClipboardId=1;
+const clipboardWrites=new Map();
+function clipboardWrite(text) {
+  const id=nextClipboardId++;
+  return new Promise((resolve,reject)=>{
+    const timer=setTimeout(()=>{clipboardWrites.delete(id);reject(Error('Clipboard timed out'));},5000);
+    clipboardWrites.set(id,{resolve,reject,timer});
+    process.send({type:'clipboard-write',id,text});
+  });
+}
+
 const renderer = await createPageRenderer({
   fetchResource,
   rewriteScript,
   requestNavigation: (url, download = null, fragmentFrom = null, post = null) => process.send({ type: "navigate", url, download, fragmentFrom, post }),
   requestDownload: ({ url, name, data }) => process.send({ type: "download-data", url, name, data }),
   pageFetch,
+  clipboardWrite,
   webSockets,
   audio,
   setCookie: (value) => process.send({ type: "cookie", value }),
@@ -323,6 +337,13 @@ async function warmUp() {
 }
 
 process.on("message", async (message) => {
+  if(message?.type==='clipboard-result') {
+    const pending=clipboardWrites.get(message.id);if(!pending)return;
+    clipboardWrites.delete(message.id);clearTimeout(pending.timer);
+    if(message.error)pending.reject(Error(String(message.error)));else pending.resolve();
+    return;
+  }
+
   if (message?.type === "page-fetch-head") {
     const pending = pendingFetches.get(message.id);
     if (!pending?.page || pending.head) return;

package/lib/renderer/page-realm.js

@@ -1590,6 +1590,15 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const platform = platformObjects({
     eventTargets, userAgent, userAgentDataMembers: chromeVersion ? userAgentDataMembers : null, mobile: mobileUserAgent, viewport: hooks.viewport,
     performance: userTiming.performance, storages: { local: hostStorage.get(origin), session: new Map() },
+    clipboardWrite: async text => {
+      try {
+        const url = new URL(document.URL);
+        const secure = url.protocol === 'https:' || (url.protocol === 'http:' && ['localhost','127.0.0.1','[::1]'].includes(url.hostname));
+        if (!secure || !hooks.clipboardWrite) throw Error('Clipboard unavailable');
+        await hooks.clipboardWrite(text);
+      }
+      catch { throw new DOMException('Clipboard write was not allowed or failed', 'NotAllowedError'); }
+    },
     sendBeacon: (url, data) => {
       network.fetch(url, { method: "POST", body: data, mode: "no-cors", credentials: "include", keepalive: true })
         .catch(() => {});
@@ -2672,7 +2681,7 @@ function navigatorPlatform(userAgent) {
  * global exposes for them. Desktop Chromium lists five PDF viewer plugins
  * and their two MIME types whatever is installed (HTML §8.9.1.6).
  */
-function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile, viewport, performance, storages, sendBeacon }) {
+function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile, viewport, performance, storages, sendBeacon, clipboardWrite }) {
   const EventTargetPrototype = eventTargets.EventTarget.prototype;
   // An instance an event target's listeners can be added to.
   const eventTarget = (prototype) => {
@@ -2750,6 +2759,12 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
   }, targetOptions);
   const NavigatorUAData = userAgentDataMembers ? define("NavigatorUAData", userAgentDataMembers) : null;
   const languages = Object.freeze(["en-US"]);
+  const Clipboard = define('Clipboard', {
+    writeText(text) {
+      if (arguments.length===0) return Promise.reject(new TypeError('writeText requires text'));
+      return clipboardWrite(String(text));
+    },
+  }, targetOptions);
   const Navigator = define("Navigator", {
     userAgent,
     appCodeName: "Mozilla",
@@ -2775,6 +2790,7 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
     ...(NavigatorUAData ? { userAgentData: NavigatorUAData.instance } : {}),
     connection: NetworkInformation.instance,
     permissions: Permissions.instance,
+    clipboard: Clipboard.instance,
     sendBeacon(url, data = null) { return sendBeacon(url, data); },
     javaEnabled() { return false; },
     getGamepads() { return [null, null, null, null]; },

package/lib/renderer/page-renderer.js

@@ -42,7 +42,7 @@ import { absolutizeStyleSheetUrls, extractFontFaces, matchSelectors, mediaQueryM
 import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
 import { elementFeatures, sheetTraits } from "../style/selector-traits.js";
 import { buildDisplayList, visibleItems } from "../paint/display-list.js";
-import { backgroundBytes, cropViewport, encodeImageBase64 } from "../paint/frame.js";
+import { backgroundBytes, rawFrame, captureViewport, cropViewport, encodeImageBase64 } from "../paint/frame.js";
 import { FrameCaptureCache } from "../paint/frame-cache.js";
 import { RasterReadback } from "../paint/raster-readback.js";
 import { insetRadii, roundedRect } from "../paint/rounded-rect.js";
@@ -227,6 +227,7 @@ function buildPageRenderer({
   requestDownload = () => {},
   reportError = () => {},
   pageFetch = () => Promise.reject(new TypeError("network access is not available")),
+  clipboardWrite = () => Promise.reject(Error("Clipboard unavailable")),
   webSockets = null,
   audio = null,
   setCookie = () => {},
@@ -787,18 +788,22 @@ function buildPageRenderer({
     frameTimer = hostSetTimeout(() => {
       frameTimer = null;
       refresh();
-    // Leave one rebuild-sized idle window after an expensive frame. Without
-    // it, a large document can spend all its time producing back-to-back
-    // frames while scripts are still making related mutations.
-    }, Math.max(50, lastRebuildMs * 2));
+    // Coalesce ordinary mutations for 16ms. Expensive style/layout rebuilds
+    // retain a longer idle window so related script mutations can settle
+    // instead of continuously rebuilding a large document.
+    }, Math.max(16, lastRebuildMs * 2));
   }
 
   /** The viewport as an encoded image (base64), cut from the latest tile. */
-  async function viewportPng({ format = "png", quality = 80, optimizeForSpeed = false } = {}) {
+  async function viewportPng({ format = "png", quality = 80, optimizeForSpeed = false, clip } = {}) {
     if (!lastTile) return "";
-    const key = `${tileSerial}:${viewport.x}:${viewport.y}:${page.width}:${page.height}:${format}:${quality}:${optimizeForSpeed}`;
+    if (format === 'rgba' || format === 'bgra') {
+      const {pixels,width,height} = captureViewport(lastTile, viewport.x, viewport.y, page.width, page.height,clip);
+      return rawFrame(pixels,width,height,format);
+    }
+    const key = `${tileSerial}:${viewport.x}:${viewport.y}:${page.width}:${page.height}:${format}:${quality}:${optimizeForSpeed}:${JSON.stringify(clip)}`;
     return captures.get(key, () => {
-      const { pixels, width, height } = cropViewport(lastTile, viewport.x, viewport.y, page.width, page.height);
+      const { pixels, width, height } = captureViewport(lastTile, viewport.x, viewport.y, page.width, page.height,clip);
       return encodeImageBase64(pixels, width, height, { format, quality, optimizeForSpeed });
     });
   }
@@ -2191,6 +2196,7 @@ function buildPageRenderer({
         page.cookie = mergeDocumentCookie(page.cookie, String(value));
         setCookie(String(value));
       },
+      clipboardWrite,
       webSockets,
       pageFetch(request) {
         const networkPending = pageFetch(request);
@@ -2437,6 +2443,7 @@ function buildPageRenderer({
      * visualViewport.scale.
      */
     resize(width, height, deviceScaleFactor = 1, pageScale = 1) {
+      const resized = width !== page.width || height !== page.height;
       page.pageScale = Number.isFinite(pageScale) && pageScale > 0 ? pageScale : 1;
       page.width = width;
       page.height = height;
@@ -2445,6 +2452,10 @@ function buildPageRenderer({
         : 1;
       viewport.resize(width, height);
       rebuildRenderTree();
+      // Listeners must observe the new viewport and layout. A repeated metrics
+      // request (or DPR-only change) does not resize the CSS viewport.
+      if (resized && page.realm)
+        page.realm.dispatch(page.window, new page.window.Event("resize"));
       render();
     },
     screenshot(options) {
@@ -2969,6 +2980,7 @@ function buildPageRenderer({
       requestDownload,
       reportError,
       pageFetch,
+      clipboardWrite,
       webSockets,
       setCookie,
       consoleMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/test/clipboard.test.js

@@ -0,0 +1,35 @@
+import {test,expect} from 'bun:test';
+import {writeClipboard} from '../lib/clipboard.js';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('clipboard prefers xclip, preserves exact stdin, and falls back on failure',async()=>{
+ const calls=[];let fail=false;
+ const options={platform:'linux',which:name=>'/bin/'+name,spawn:(args,opts)=>{calls.push({args,opts});return {exited:Promise.resolve(fail&&args[0].endsWith('xclip')?1:0),kill(){}};}};
+ const text='中文\n$(do not execute) `literal`';
+ await writeClipboard(text,options);
+ expect(calls[0].args).toEqual(['/bin/xclip','-selection','clipboard']);
+ expect(calls[0].opts.stdin.toString()).toBe(text);expect(calls).toHaveLength(1);
+ fail=true;calls.length=0;await writeClipboard('',options);
+ expect(calls.map(c=>c.args[0])).toEqual(['/bin/xclip','/bin/wl-copy']);
+ await expect(writeClipboard('x',{...options,which:()=>null})).rejects.toThrow('No working');
+});
+
+test('a real button click writes through controller; page-only calls cannot overwrite clipboard',async()=>{
+ const copies=[];const host=new RendererHost({clipboardWrite:async text=>{copies.push(text);}});
+ try{
+  await host.start();await host.call('resize',400,200,1);
+  await host.call('loadDocument',{url:'https://clipboard.test/',contentType:'text/html',source:`<body style="margin:0"><button id="b" style="width:200px;height:60px">Copy</button><script>
+    window.copyStatus='idle';document.getElementById('b').onclick=async()=>{
+      try{await navigator.clipboard.writeText('npx buninu 中文');window.copyStatus='copied';}
+      catch(e){window.copyStatus=e.name;}
+    };</script>`});
+  await host.call('whenLoaded');
+  await host.call('evaluate',"document.getElementById('b').click()");await Bun.sleep(30);
+  expect(copies).toEqual([]);expect(await host.call('evaluate','window.copyStatus')).toBe('NotAllowedError');
+  await host.call('click',30,25);
+  for(let i=0;i<40 && !copies.length;i++)await Bun.sleep(25);
+  expect(copies).toEqual(['npx buninu 中文']);
+  for(let i=0;i<40 && await host.call('evaluate','window.copyStatus')!=='copied';i++)await Bun.sleep(25);
+  expect(await host.call('evaluate','window.copyStatus')).toBe('copied');
+ }finally{host.close();}
+},20000);

package/test/fixtures/browser-raw-demo.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Browser raw frame demo</title>
+<style>body{margin:0;padding:32px;background:#10252f;color:#e4f4fa;font:22px sans-serif}h1{color:#63dedb}a{color:#73d8ff}.box{padding:20px;margin:16px 0;background:#183c4c;border:2px solid #3b7a8d}.track{height:75px;background:#244451;position:relative;overflow:hidden}#bar{position:absolute;left:0;top:0;width:150px;height:75px;background:#49d6c8}.stripe{height:70px;padding:15px;margin-top:10px}</style>
+</head>
+<body>
+<h1>Buninu Browser · Raw BGRA</h1>
+<div class="box">這是 buninu-browser 自己繪製的頁面，不是 Firefox 或 Chromium。<br>Raw 像素經 Casty 傳給 bunterm。請試著捲動、點網址列，或瀏覽其他網站。</div>
+<div class="track">
+<div id="bar">
+</div>
+</div>
+<p id="tick">Animation starting…</p>
+<p>
+<a href="https://example.com">example.com</a> · <a href="https://www.wikipedia.org">Wikipedia</a>
+</p>
+<div class="stripe" style="background:rgb(30,55,75)">Scroll test 1 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(35,62,80)">Scroll test 2 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(40,69,85)">Scroll test 3 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(45,76,90)">Scroll test 4 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(50,83,95)">Scroll test 5 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(55,90,100)">Scroll test 6 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(60,97,105)">Scroll test 7 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(65,104,110)">Scroll test 8 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(70,111,115)">Scroll test 9 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(75,118,120)">Scroll test 10 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(80,125,125)">Scroll test 11 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(85,132,130)">Scroll test 12 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(90,139,135)">Scroll test 13 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(95,146,140)">Scroll test 14 — 中文 ABC 0123456789</div>
+<div class="stripe" style="background:rgb(100,153,145)">Scroll test 15 — 中文 ABC 0123456789</div>
+<script>let n=0;setInterval(()=>{n++;document.getElementById('bar').style.left=((n*7)%900)+'px';document.getElementById('tick').textContent='Animation tick: '+n;},50);</script>
+</body>
+</html>