buninu-browser 0.4.0 → 0.5.0

package/lib/renderer/page-renderer.js

@@ -29,10 +29,16 @@ import { setCanvasKit, canvasResource, observeDocumentCanvases } from "./canvas-
 import { createCanvasTextRenderer, parseCanvasFont } from "./canvas-text.js";
 import { DESKTOP_USER_AGENT } from "../user-agent.js";
 
+// qml handle begin: optional software shader canvas bridge
+import {paintQmlCanvas} from './canvas-2d.js';
+import {createShaderRenderer} from '../qml/shader/renderer.js';
+// qml handle end
+
 // qml handle begin: optional document frontend
 import {createQmlMediaController,applyQmlMediaGain} from '../qml/media-renderer.js';
 import {INTERFACES as qmlBindings} from "./bindings.js";
 import { enableQmlDomImages, hasQmlDomImages, captureQmlDomImage, filterQmlTextureSources, qmlTextureVisibilityChanged } from "../qml/canvas-dom.js";
+import {loadQmlFonts} from '../qml/fonts.js';
 import {createQmlHost} from "../qml/host.js";
 import { loadQmlDocument } from "../qml/document.js";
 import { isQmlDocument } from "../qml/format.js";
@@ -257,6 +263,7 @@ function buildPageRenderer({
   mobile = false,
   verifyStyle = false,
   fullStyle = false,
+  renderMinInterval = 16,
   // An iframe's document (see syncFrames): frames go to the embedding page,
   // which needs only the viewport, so nothing is painted ahead.
   embedded = false,
@@ -267,6 +274,10 @@ function buildPageRenderer({
   CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
   genericFamilies, builtinTypefaces,
 }) {
+  // qml handle begin: preserve ordinary page fonts across QML navigation
+  const standardFonts = {CanvasKit, loadedFamilies, fontCollection, fontFamilies, builtinTypefaces};
+  // qml handle end
+
   let documentFonts = null;
   let fontSheets = null;
   let fontEnvironment = "";
@@ -330,6 +341,10 @@ function buildPageRenderer({
   let framePaintTimer = null;
   // The frame keyboard input goes to, after a click into it.
   let focusedFrame = null;
+  let pointerButtons = 0, suppressPointerMouse = false;
+  const pointerPresses = new Map();
+  let selectionDrag = null;
+  let selectionVersion = 0;
   const viewport = new ScrollViewport(800, 600);
   const page = {
     url: "about:blank",
@@ -589,6 +604,7 @@ function buildPageRenderer({
   let rasterSurface = null;
   let rasterSurfaceWidth = 0;
   let rasterSurfaceHeight = 0;
+  let rasterRegion = null;
   const rasterReadback = new RasterReadback(CanvasKit, { shared: Boolean(onFrame), allocate: allocateFramePixels });
   // A scroll or unrelated DOM update does not change text shaping. Keep a
   // bounded set of visible paragraphs keyed by their complete shaping input.
@@ -656,7 +672,8 @@ function buildPageRenderer({
     const hints = page.hintsVisible
       ? page.hints.map((hint) => `${hint.label}@${hint.x + hint.scrollX},${hint.y + hint.scrollY}`).join(";")
       : "";
-    return hints;
+    const selection=page.window?.getSelection();
+    return hints + selectionVersion + (selection?.rangeCount ? `:${selection.anchorOffset}:${selection.focusOffset}:${selection.toString()}` : "");
   }
 
   function sameRasterInput() {
@@ -701,6 +718,36 @@ function buildPageRenderer({
     schedulePrepaint();
   }
 
+  /** Conservative canvas-only damage, in document CSS pixels. */
+  function canvasDamage(region) {
+    const old = rasterized.list, next = page.displayList;
+    // Reuse pixels only when geometry and every non-canvas input are stable.
+    // Transformed/fixed canvases conservatively take the full-paint path.
+    if (!rasterSurface || !Bun.deepEquals(rasterRegion, region)
+      || rasterized.scale !== page.deviceScaleFactor || rasterized.background !== page.backgroundColor
+      || rasterized.overlay !== overlayKey() || rasterized.frames !== framesVersion
+      || rasterized.scrollX !== viewport.x || rasterized.scrollY !== viewport.y
+      || !old || !next || old.images.length !== next.images.length
+      || !Bun.deepEquals(old.items, next.items)
+      || next.items.some(item => item.op === 'drawVideo')) return null;
+    let damage = null;
+    for (let i = 0; i < next.images.length; i++) {
+      if (old.images[i] === next.images[i]) continue;
+      const uses = next.items.filter(item => item.image === i);
+      if (!uses.length) return null;
+      for (const item of uses) {
+        if (item.op !== 'drawImage' || item.fixed || item.transform
+          || page.renderTree.nodesById.get(item.nodeId)?.domNode?.tagName !== 'CANVAS') return null;
+        const r = item.rect;
+        if (![r.x, r.y, r.width, r.height].every(Number.isFinite)) return null;
+        const left = r.x - 1, top = r.y - 1, right = r.x + r.width + 1, bottom = r.y + r.height + 1;
+        damage = damage ? {x:Math.min(damage.x,left),y:Math.min(damage.y,top),right:Math.max(damage.right,right),bottom:Math.max(damage.bottom,bottom)}
+          : {x:left,y:top,right,bottom};
+      }
+    }
+    return damage;
+  }
+
   /** Rasterizes a page rectangle (CSS pixels) into RGBA pixels. */
   function rasterTile(region) {
     // Prepaint can run before a queued canvas/image repaint. Refresh native
@@ -712,6 +759,8 @@ function buildPageRenderer({
     const scale = page.deviceScaleFactor;
     const pixelWidth = Math.max(1, Math.round(region.width * scale));
     const pixelHeight = Math.max(1, Math.round(region.height * scale));
+    const damage = canvasDamage(region);
+    if (damage) trace?.(`${page.url}: canvas damage ${damage.right-damage.x}x${damage.bottom-damage.y}`);
     if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
       // MakeSurface owns a malloc-backed pixel buffer; delete() alone leaks it.
       rasterSurface?.dispose();
@@ -722,9 +771,19 @@ function buildPageRenderer({
     const surface = rasterSurface;
     if (!surface) throw new Error(`Unable to create a ${pixelWidth}x${pixelHeight} CanvasKit surface`);
     const canvas = surface.getCanvas();
+    canvas.save();
+    if (damage) canvas.clipRect(CanvasKit.LTRBRect(
+      Math.floor((damage.x-region.x)*scale), Math.floor((damage.y-region.y)*scale),
+      Math.ceil((damage.right-region.x)*scale), Math.ceil((damage.bottom-region.y)*scale),
+    ), CanvasKit.ClipOp.Intersect, false);
+    // Clear and replay all layers inside the damage, including backgrounds
+    // and foreground occluders. Transparent canvas pixels must not leave trails.
     canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
-    paintDisplayList(canvas, page.displayList, region, scale);
+    paintDisplayList(canvas, page.displayList, region, scale, null, damage ? {
+      x:damage.x, y:damage.y, width:damage.right-damage.x, height:damage.bottom-damage.y,
+    } : region);
     drawHints(canvas, region);
+    canvas.restore();
     surface.flush();
     const image = surface.makeImageSnapshot();
     let pixels;
@@ -732,6 +791,7 @@ function buildPageRenderer({
     finally { image.delete(); }
     const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight);
     page.needsPaint = false;
+    rasterRegion = {...region};
     rasterized = {
       list: page.displayList, overlay: overlayKey(), background: page.backgroundColor, scale: page.deviceScaleFactor,
       scrollX: viewport.x, scrollY: viewport.y, frames: framesVersion,
@@ -807,10 +867,10 @@ function buildPageRenderer({
     frameTimer = hostSetTimeout(() => {
       frameTimer = null;
       refresh();
-    // Coalesce ordinary mutations for 16ms. Expensive style/layout rebuilds
-    // retain a longer idle window so related script mutations can settle
+    // Coalesce ordinary mutations for the configured minimum interval.
+    // 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));
+    }, Math.max(renderMinInterval, lastRebuildMs * 2));
   }
 
   /** The viewport as an encoded image (base64), cut from the latest tile. */
@@ -830,7 +890,7 @@ function buildPageRenderer({
   /** Rasterizes display items intersecting the viewport onto a CanvasKit canvas. */
   const paintFailures = new Set();
 
-  function paintDisplayList(canvas, displayList, view, scale, videoOverride = null) {
+  function paintDisplayList(canvas, displayList, view, scale, videoOverride = null, dirtyView = view) {
     if (!displayList) return;
     const pixel = (value) => Math.round(value * scale);
     const deviceRect = (rect) => CanvasKit.XYWHRect(
@@ -857,7 +917,7 @@ function buildPageRenderer({
       if (rounded) canvas.drawRRect(rounded, paint);
       else canvas.drawRect(deviceRect(rect), paint);
     };
-    for (const item of visibleItems(displayList, view, viewport)) {
+    for (const item of visibleItems(displayList, dirtyView, viewport)) {
       const saved = item.fixed || item.clipRect || item.opacity < 1 || item.transform ? canvas.save() : null;
       try {
         if (item.fixed) canvas.translate(viewport.x * scale, viewport.y * scale);
@@ -1046,6 +1106,17 @@ function buildPageRenderer({
           } else {
             canvas.drawParagraph(entry.paragraph, pixel(item.x - view.x), pixel(item.y - view.y));
           }
+          const selected=selectedTextRange(item);
+          if(selected){
+            const boxes=entry.paragraph.getRectsForRange(selected.from,selected.to,CanvasKit.RectHeightStyle.Max,CanvasKit.RectWidthStyle.Tight);
+            const white=paragraphForPaint({...item,color:'rgba(255, 255, 255, 1)',gradient:null},scale,pixel(Math.max(1,item.textWidth+1)));
+            const paint=new CanvasKit.Paint();paint.setColor(canvasColor(CanvasKit,'rgba(56, 116, 242, 1)'));
+            try{for(const box of boxes){
+              const r=box.rect,ox=pixel(item.x-view.x),oy=pixel(item.y-view.y);
+              const rect=CanvasKit.LTRBRect(r[0]+ox,r[1]+oy,r[2]+ox,r[3]+oy);
+              canvas.save();canvas.clipRect(rect,CanvasKit.ClipOp.Intersect,false);canvas.drawRect(rect,paint);canvas.drawParagraph(white.paragraph,ox,oy);canvas.restore();
+            }}finally{paint.delete();if(!white.retained)white.paragraph.delete();}
+          }
         } finally {
           if (!entry.retained) entry.paragraph.delete();
         }
@@ -1592,6 +1663,7 @@ function buildPageRenderer({
     for (const image of page.decodedImages) image.delete();
     disposeBackgrounds();
     page.window = parsed.window;
+    pointerButtons = 0; suppressPointerMouse = false; pointerPresses.clear(); selectionDrag=null;
     page.document = parsed.document;
     observeDocumentCanvases(parsed.document, (node) => {
       if (disposedRenderer || node.ownerDocument !== page.document || !node.isConnected) return;
@@ -1793,6 +1865,16 @@ function buildPageRenderer({
       onLifecycle?.("DOMContentLoaded", generation);
       onLifecycle?.("load", generation);
     };
+    // qml handle begin: optional local Qt font directory, never inherited by HTML
+    const selectedFonts = page.scripting === "host" && url.startsWith("file:") && isQmlDocument(url, contentType)
+      ? await loadQmlFonts(standardFonts, message => reportError(new Error(message))) : standardFonts;
+    if (!current()) return;
+    if (fontCollection !== selectedFonts.fontCollection) {
+      ({loadedFamilies, fontCollection, fontFamilies, builtinTypefaces} = selectedFonts);
+      clearFontCaches();
+    }
+    // qml handle end
+
     page.url = url;
     page.cookie = typeof cookie === "string" ? cookie : "";
     if (error) {
@@ -1931,6 +2013,16 @@ function buildPageRenderer({
       }
       // qml handle end
 
+      // qml handle begin: local QML fragment shader capability
+      if (page.document.__qmlHost) {
+        const host=page.document.__qmlHost;
+        host.shader=createShaderRenderer({kit:CanvasKit,unwrap:e=>qmlBindings.Node.unwrap(e),
+          valid:e=>e?.ownerDocument===page.document,
+          resource:e=>e.tagName==='CANVAS'?canvasResource(e):page.resources.get(e),
+          paint:paintQmlCanvas,track:fn=>host.trackResource(fn)});
+      }
+      // qml handle end
+
       await page.realm.runDocumentScripts();
       if (!current()) return;
       phase("scripts");
@@ -2129,6 +2221,54 @@ function buildPageRenderer({
     return Math.max(0,Math.min(String(element.value).length,position));
   }
 
+  function selectableText(node){
+    for(let el=node.parentElement;el;el=el.parentElement){
+      const value=styleEngine.get(el)?.userSelect;
+      if(value==='none')return false;
+      if(value==='text'||value==='all')return true;
+    }
+    return true;
+  }
+  function documentTextPoint(x,y,target=null) {
+    let best=null;
+    for(const hit of page.displayList?.hits??[]){
+      const run=hit.textRun,node=page.renderTree.nodesById.get(hit.nodeId)?.domNode;
+      if(!run||node?.nodeType!==3||!node.isConnected||!selectableText(node))continue;
+      if(target && !target.contains(node))continue;
+      if(node.parentElement?.closest('button,input,textarea,select,canvas,script,style'))continue;
+      let px=x+(hit.fixed?0:viewport.x),py=y+(hit.fixed?0:viewport.y);
+      if(hit.transform){const {a,d,e,f}=hit.transform;if(!a||!d)continue;px=(px-e)/a;py=(py-f)/d;}
+      if(hit.clipRect && (px<hit.clipRect.x||py<hit.clipRect.y||px>hit.clipRect.x+hit.clipRect.width||py>hit.clipRect.y+hit.clipRect.height))continue;
+      const height=parseFloat(run.style.lineHeight)||parseFloat(run.style.fontSize)||16;
+      const dy=Math.max(run.y-py,py-run.y-height,0),dx=Math.max(run.x-px,px-run.x-run.width,0);
+      if(!best||dy<best.dy||dy===best.dy&&dx<best.dx)best={run,node,px,dy,dx};
+    }
+    if(!best)return null;
+    const {run,node,px}=best,p=makeParagraph(run.text,run.style);
+    try{p.layout(Math.max(1,run.width+1));return {node,offset:Math.max(0,Math.min(node.textContent.length,(run.sourceStart??0)+p.getGlyphPositionAtCoordinate(px-run.x,0).pos))};}
+    finally{p.delete();}
+  }
+  function extendDrag(x,y){
+    if(selectionDrag.element){
+      const el=selectionDrag.element;if(!el.isConnected||page.document.activeElement!==el){selectionDrag=null;return;}
+      selectInput(el,selectionDrag.anchor,inputPositionAtPoint(el,x,y));syncInputCaret();invalidateInput();
+    }else{
+      const point=documentTextPoint(x,y);if(!point||!selectionDrag.node.isConnected)return;
+      page.window.getSelection().setBaseAndExtent(selectionDrag.node,selectionDrag.offset,point.node,point.offset);
+      selectionVersion++;
+      page.needsPaint=true;
+    }
+  }
+  function selectedTextRange(item){
+    const sel=page.window.getSelection(),node=page.renderTree.nodesById.get(item.nodeId)?.domNode;
+    if(!sel?.rangeCount||sel.isCollapsed||node?.nodeType!==3||!node.isConnected||!selectableText(node))return null;
+    const range=sel.getRangeAt(0);if(!range.intersectsNode(node))return null;
+    const base=item.sourceStart??0;
+    const from=Math.max(0,(range.startContainer===node?range.startOffset:0)-base);
+    const to=Math.min(item.text.length,(range.endContainer===node?range.endOffset:node.textContent.length)-base);
+    return to>from?{from,to}:null;
+  }
+
   function clipboardForInput(element,operation,backend={read:clipboardReadInput,write:clipboardWriteInput}) {
     return inputClipboard(element,operation,{...backend,replace:(text,type)=>{
       if(page.document.activeElement!==element)return;
@@ -2298,6 +2438,7 @@ function buildPageRenderer({
         }
       },
       whenImagesLoaded: () => Promise.all([page.imagesLoaded, documentFonts.ready(), ...[...page.backgrounds.values()].map((entry) => entry.loaded)]),
+      selectionChanged(){selectionVersion++;page.needsPaint=true;scheduleFrame();},
       afterTask() {},
       boundsOf(element) {
         if (page.dirty) rebuildRenderTree("script read geometry");
@@ -2727,9 +2868,9 @@ function buildPageRenderer({
       schedulePrepaint();
     },
     title() {
-      refresh();
-      // Live value: scripts may have set document.title without touching layout.
-      return page.document?.title || page.title;
+      // DOM title changes are synchronous and do not require layout or paint.
+      // An empty document title is also a live value, not a cached-title fallback.
+      return page.document?.title ?? page.title;
     },
     scroll(deltaX, deltaY) {
       if (viewport.scrollBy(deltaX, deltaY)) render();
@@ -2755,6 +2896,9 @@ function buildPageRenderer({
         const prevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keydown", init));
         let activated = false;
         const inputHandled=!prevented&&inputDefault(target,init);
+        if(!prevented&&!inputHandled&&(init.ctrlKey||init.metaKey)&&init.key.toLowerCase()==='c'){
+          const text=page.window.getSelection().toString();if(text)clipboardWriteInput(text).catch(reportError);
+        }
         if (!inputHandled && !prevented && !init.ctrlKey && !init.metaKey && !init.altKey) {
           if ((key === "Enter" || key === " ") && isDisclosureControl(target)) {
             activated = true;
@@ -2824,18 +2968,29 @@ function buildPageRenderer({
       return wheel(Number(x), Number(y), Number(deltaX) || 0, Number(deltaY) || 0, options);
     },
     /** Move the pointer in viewport coordinates, including boundary events. */
-    move(x, y) {
-      refresh();
-      const target = elementAtPoint(page.renderTree, page.displayList, Number(x), Number(y), viewport);
-      dispatchPointerMove(page.window, page.realm, target, Number(x), Number(y));
-      refresh();
+    move(x, y, options = {}) {
+      // Hit testing needs current geometry, not a rasterized frame. Dispatch
+      // every motion (drawing needs every point), but let the frame scheduler
+      // combine their paints instead of rasterizing the whole page per event.
+      if (page.dirty) rebuildRenderTree("pointer hit test");
+      const target = elementAtPoint(page.renderTree, page.displayList, Number(x), Number(y), viewport) ?? (pointerButtons ? page.document.documentElement : null);
+      const inside = target?.tagName === 'IFRAME' ? frameAt(target, x, y) : null;
+      if (inside) inside.frame.renderer.move(inside.x, inside.y, options);
+      dispatchPointerMove(page.window, page.realm, target, Number(x), Number(y), {...options, buttons: pointerButtons, suppressMouse:suppressPointerMouse});
+      if(selectionDrag && (pointerButtons&1)) extendDrag(x,y);
+      if (page.dirty || page.needsPaint) scheduleFrame();
     },
     /**
      * Clicks at a viewport point: the page receives a click event first, and
      * unless it calls preventDefault() a link under the point is returned for
      * the controller to navigate to.
      */
-    click(x, y) {
+    pointerButton(x, y, button, state, options = {}) {
+      if (button < 272 || button > 274) return null;
+      return this.click(x, y, {...options, button: button === 273 ? 'right' : button === 274 ? 'middle' : 'left', phase: state ? 'down' : 'up'});
+    },
+    click(x, y, options = {}) {
+      const detail = Number.isInteger(options.clickCount) && options.clickCount > 0 ? options.clickCount : 1;
       refresh();
       let region = hitTest(page.renderTree, page.layout, x, y, viewport, viewport);
       let forwarded = false;
@@ -2861,7 +3016,7 @@ function buildPageRenderer({
       // and a search form's forwarded field takes the click on the form.
       const hitNode = page.displayList ? renderNodeAtPoint(page.renderTree, page.displayList, x, y, viewport) : null;
       const precise = hitNode?.domNode?.nodeType === 1 ? hitNode.domNode : hitNode?.domNode?.parentElement;
-      const target = forwarded ? region.element : inputOwner.get(precise) ?? precise ?? region?.element ?? null;
+      const target = options.activationTarget ?? (forwarded ? region.element : inputOwner.get(precise) ?? precise ?? region?.element ?? (options.phase ? page.document.documentElement : null));
       const generatedDisclosure = hitNode?.pseudo === "summary" && target?.tagName === "DETAILS";
       if (!target) {
         focusedFrame = null;
@@ -2874,11 +3029,97 @@ function buildPageRenderer({
       const inFrame = target.tagName === "IFRAME" ? frameAt(target, x, y) : null;
       focusedFrame = inFrame?.frame ?? null;
       if (inFrame) {
-        const followed = inFrame.frame.renderer.click(inFrame.x, inFrame.y);
+        const followed = inFrame.frame.renderer.click(inFrame.x, inFrame.y, options);
         const href = typeof followed === "string" ? followed : followed?.fragmentFrom ? null : followed?.url;
         if (href && !followed?.download) void loadFrame(inFrame.frame, href);
         return null;
       }
+      const mouseButton = options.button === 'right' || options.button === 2 ? 2
+        : options.button === 'middle' || options.button === 1 ? 1 : 0;
+      // The press focuses the focusable element it lands in, unless mousedown was canceled.
+      const focus = () => {
+        selectionDrag=null;
+        const focusable = generatedDisclosure ? target : target.closest?.("input, textarea, select, button, summary, [tabindex]");
+        if (focusable && !focusable.disabled) {
+          const position=isTextInput(focusable)&&!forwarded?inputPositionAtPoint(focusable,x,y):null;
+          focusable.focus();
+          if(position!==null){selectInput(focusable,position);syncInputCaret();invalidateInput();if(options.phase==='down')selectionDrag={element:focusable,anchor:position};}
+        } else if(mouseButton===0){
+          const point=documentTextPoint(x,y,target);
+          if(point)page.document.activeElement?.blur?.();
+          selectionVersion++;page.window.getSelection().removeAllRanges();
+          if(point){page.window.getSelection().collapse(point.node,point.offset);if(options.phase==='down')selectionDrag=point;}
+          page.needsPaint=true;
+        }
+      };
+      const modifiers = options.modifiers ?? 0;
+      const mouseInit = { bubbles:true, cancelable:true, composed:true,
+        clientX:Number(x), clientY:Number(y), button:mouseButton, detail,
+        altKey:!!(modifiers&1), ctrlKey:!!(modifiers&2),
+        metaKey:!!(modifiers&4), shiftKey:!!(modifiers&8) };
+      if (options.phase) {
+        const mask = mouseButton === 0 ? 1 : mouseButton === 1 ? 4 : 2;
+        const before = pointerButtons;
+        const pressed = pointerPresses.get(mouseButton);
+        pointerButtons = options.phase === 'down' ? before | mask : before & ~mask;
+        const Pointer = page.window.PointerEvent ?? page.window.MouseEvent;
+        const pointer = {...mouseInit, detail:0, buttons:pointerButtons,
+          pointerId:1, pointerType:'mouse', isPrimary:true};
+        if (options.phase === 'down') {
+          const record = {target, document:page.document, suppressMouse:false};
+          pointerPresses.set(mouseButton, record);
+          if (page.realm) {
+            if (before === 0) suppressPointerMouse = page.realm.dispatch(target,new Pointer('pointerdown',pointer));
+            record.suppressMouse = suppressPointerMouse;
+            if (before !== 0) page.realm.dispatch(target,new Pointer('pointermove',pointer));
+            if (!record.suppressMouse) {
+              const prevented = page.realm.dispatch(target,new page.window.MouseEvent('mousedown',{...mouseInit,buttons:pointerButtons}));
+              if (mouseButton === 0 && !prevented) focus();
+            }
+            if (mouseButton === 2) page.realm.dispatch(target,new Pointer('contextmenu',pointer));
+          } else if (mouseButton === 0) focus();
+          refresh();
+          return null;
+        }
+        let selectedByDrag=false;
+        if(mouseButton===0){
+          if(selectionDrag){extendDrag(x,y);selectedByDrag=!selectionDrag?.element&&!page.window.getSelection().isCollapsed;}
+          selectionDrag=null;
+        }
+        pointerPresses.delete(mouseButton);
+        if (page.realm) {
+          page.realm.dispatch(target,new Pointer(pointerButtons ? 'pointermove' : 'pointerup',pointer));
+          if (!suppressPointerMouse) page.realm.dispatch(target,new page.window.MouseEvent('mouseup',{...mouseInit,buttons:pointerButtons}));
+        }
+        if (!pointerButtons) suppressPointerMouse = false;
+        // Click/auxclick targets the common ancestor of the press and release.
+        // Removed press targets and releases without a press do not activate.
+        let activation = target;
+        if (!pressed || pressed.document !== page.document || !pressed.target.isConnected) activation = null;
+        while (activation && !activation.contains(pressed.target)) activation = activation.parentElement;
+        refresh();
+        return activation ? this.click(x,y,{...options,phase:undefined,activationOnly:true,activationTarget:activation,selectionDragged:selectedByDrag}) : null;
+      }
+      if (mouseButton !== 0) {
+        // Non-primary clicks reach DOM handlers without primary activation
+        // (navigation, form submission, controls, text-caret placement).
+        if (page.realm) {
+          const init = mouseInit;
+          const Pointer = page.window.PointerEvent ?? page.window.MouseEvent;
+          const pointer = {...init, detail:0, pointerId:1, pointerType:'mouse', isPrimary:true};
+          const buttons = mouseButton === 2 ? 2 : 4;
+          if (!options.activationOnly) {
+            page.realm.dispatch(target,new Pointer('pointerdown',{...pointer,buttons}));
+            page.realm.dispatch(target,new page.window.MouseEvent('mousedown',{...init,buttons}));
+            if(mouseButton===2)page.realm.dispatch(target,new Pointer('contextmenu',{...pointer,buttons}));
+            page.realm.dispatch(target,new Pointer('pointerup',{...pointer,buttons:0}));
+            page.realm.dispatch(target,new page.window.MouseEvent('mouseup',{...init,buttons:0}));
+          }
+          page.realm.dispatch(target,new Pointer('auxclick',{...pointer,detail,buttons:pointerButtons}));
+          refresh();
+        }
+        return null;
+      }
       if (page.url === "about:audio") {
         const key = target.closest?.("[data-piano-note]");
         const note = Number(key?.getAttribute("data-piano-note"));
@@ -2888,31 +3129,27 @@ function buildPageRenderer({
           return null;
         }
       }
-      // The press focuses the focusable element it lands in, unless mousedown was canceled.
-      const focus = () => {
-        const focusable = generatedDisclosure ? target : target.closest?.("input, textarea, select, button, summary, [tabindex]");
-        if (focusable && !focusable.disabled) {
-          const position=isTextInput(focusable)&&!forwarded?inputPositionAtPoint(focusable,x,y):null;
-          focusable.focus();
-          if(position!==null){selectInput(focusable,position);syncInputCaret();invalidateInput();}
-        }
-      };
-      if (!page.realm) focus();
+      if (!page.realm) { if (!options.activationOnly) focus(); }
       else {
         const controlStates = controlStatesBeforeActivation();
         // A press and release, then the click (UI Events §3.5).
-        const init = { bubbles: true, cancelable: true, composed: true, clientX: Number(x), clientY: Number(y), button: 0 };
+        const init = { ...mouseInit, buttons: pointerButtons };
         const PointerEvent = page.window.PointerEvent ?? page.window.MouseEvent;
-        const pointer = { ...init, pointerId: 1, pointerType: "mouse", isPrimary: true };
-        page.realm.dispatch(target, new PointerEvent("pointerdown", { ...pointer, buttons: 1 }));
-        if (!page.realm.dispatch(target, new page.window.MouseEvent("mousedown", { ...init, buttons: 1 }))) focus();
-        page.realm.dispatch(target, new PointerEvent("pointerup", pointer));
-        page.realm.dispatch(target, new page.window.MouseEvent("mouseup", init));
-        const prevented = page.realm.dispatch(target, new page.window.MouseEvent("click", { ...init, detail: 1 }));
+        const pointer = { ...init, detail: 0, pointerId: 1, pointerType: "mouse", isPrimary: true };
+        if (!options.activationOnly) {
+          page.realm.dispatch(target, new PointerEvent("pointerdown", { ...pointer, buttons: 1 }));
+          if (!page.realm.dispatch(target, new page.window.MouseEvent("mousedown", { ...init, buttons: 1 }))) focus();
+          page.realm.dispatch(target, new PointerEvent("pointerup", pointer));
+          page.realm.dispatch(target, new page.window.MouseEvent("mouseup", init));
+        }
+        const prevented = page.realm.dispatch(target, new page.window.MouseEvent("click", init));
+        // dblclick follows the second click even when its default action was cancelled.
+        if (detail === 2) page.realm.dispatch(target, new page.window.MouseEvent("dblclick", init));
         invalidateActivatedControls(controlStates);
         refresh();
         if (prevented) return null;
       }
+      if (options.selectionDragged) return null;
       if (generatedDisclosure) {
         target.open = !target.open;
         refresh();
@@ -3176,6 +3413,7 @@ function buildPageRenderer({
     // Made at once, as is its initial about:blank document (HTML §4.8.5): a
     // script can use its contentWindow as soon as the iframe is inserted.
     const renderer = buildPageRenderer({
+      renderMinInterval,
       fetchResource: rawFetchResource,
       requestNavigation: (url, downloadName) => {
         if (downloadName === null) void loadFrame(frame, url);

package/lib/renderer/pointer-move.js

@@ -1,7 +1,7 @@
 const previousTargets = new WeakMap();
 
 /** Deliver pointer/mouse boundary events before movement, as a real pointer does. */
-export function dispatchPointerMove(window, realm, target, x, y) {
+export function dispatchPointerMove(window, realm, target, x, y, options = {}) {
   const document = window.document;
   const previous = previousTargets.get(document) ?? null;
   previousTargets.set(document, target);
@@ -12,7 +12,9 @@ export function dispatchPointerMove(window, realm, target, x, y) {
     const pointer = type.startsWith('pointer');
     const Constructor = pointer ? window.PointerEvent : window.MouseEvent;
     const event = new Constructor(type, { clientX: x, clientY: y, relatedTarget, bubbles,
-      composed: bubbles, cancelable: bubbles, button: pointer ? -1 : 0, buttons: 0,
+      composed: bubbles, cancelable: bubbles, button: pointer ? -1 : 0, buttons: options.buttons ?? 0,
+      altKey:!!(options.modifiers&1),ctrlKey:!!(options.modifiers&2),
+      metaKey:!!(options.modifiers&4),shiftKey:!!(options.modifiers&8),
       pointerId: 1, pointerType: 'mouse', isPrimary: true });
     if (realm) realm.dispatch(node, event); else node.dispatchEvent(event);
   };
@@ -25,5 +27,5 @@ export function dispatchPointerMove(window, realm, target, x, y) {
     }
   }
   send(target, 'pointermove', null);
-  send(target, 'mousemove', null);
+  if (!options.suppressMouse) send(target, 'mousemove', null);
 }

package/lib/renderer/render-interval.js

@@ -0,0 +1,9 @@
+export const RENDER_INTERVAL_FLAG = "--buninu-render-min-interval=";
+
+// Validate in the controller, then pass only this number to the sandboxed child.
+export function renderMinInterval(value, warn = console.warn) {
+  if (value === undefined) return 16;
+  if (/^\d+$/.test(value) && Number(value) <= 60000) return Number(value);
+  warn("buninu-browser: BUNINU_RENDER_MIN_INTERVAL must be an integer from 0 to 60000 ms; using 16 ms");
+  return 16;
+}

package/lib/style/computed-style.js

@@ -211,6 +211,7 @@ const INITIAL = Object.freeze({
   visibility: "visible",
   // Hit testing only (inherited): "none" lets clicks pass through.
   pointerEvents: "auto",
+  userSelect: "auto",
   // Breaking inside words (CSS Text 3 §5): only with these set.
   overflowWrap: "normal",
   wordBreak: "normal",
@@ -281,8 +282,8 @@ const UA_DECLARATIONS = new Map(Object.entries({
  * fills them in when checked.
  */
 const CONTROL_FONT = "font-size: 13.333px; font-family: sans-serif";
-const FIELD = `${CONTROL_FONT}; border: 1px solid #767676; background-color: white`;
-const BUTTON_LIKE = `${CONTROL_FONT}; border: 1px solid #767676; border-radius: 2px; padding: 1px 6px; background-color: #efefef; text-align: center`;
+const FIELD = `${CONTROL_FONT}; color: black; border: 1px solid #767676; background-color: white`;
+const BUTTON_LIKE = `${CONTROL_FONT}; color: black; border: 1px solid #767676; border-radius: 2px; padding: 1px 6px; background-color: #efefef; text-align: center`;
 const UA_CONTROL_DECLARATIONS = Object.freeze({
   textarea: parseDeclarations(`${FIELD}; font-family: monospace; padding: 2px; white-space: pre-wrap; overflow-wrap: break-word; overflow: auto`),
   text: parseDeclarations(`${FIELD}; padding: 1px 2px; white-space: pre; overflow: hidden`),
@@ -1413,6 +1414,10 @@ function setProperty(style, name, value, parentStyle = null) {
       if (["visible", "hidden", "collapse"].includes(value)) style.visibility = value === "collapse" ? "hidden" : value;
       break;
     // SVG-only values (visiblePainted, fill, ...) hit like auto for HTML boxes.
+    case "user-select":
+    case "-webkit-user-select":
+      if (["auto", "none", "text", "all"].includes(value)) style.userSelect = value;
+      break;
     case "pointer-events":
       if (/^[a-z]+$/i.test(value)) style.pointerEvents = value === "none" ? "none" : "auto";
       break;
@@ -2517,6 +2522,7 @@ function cssValue(style, name) {
       : style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
     "list-style-type": style.listStyleType,
     "pointer-events": style.pointerEvents,
+    "user-select": style.userSelect,
     "text-align": style.textAlign,
     "white-space": style.whiteSpace,
   })[name] ?? style[name];

package/package.json

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

package/test/audio-connection-lifetime.test.js

@@ -0,0 +1,46 @@
+import {test, expect} from 'bun:test';
+import {SharedAudioConnection} from '../lib/audio/shared-connection.js';
+
+test('audio connection survives one renderer closing, ends with the last owner, and reconnects', async () => {
+  let opened = 0, closed = 0;
+  const pool = new SharedAudioConnection(async () => ({id:++opened, close(){closed++;}}));
+  const a={}, b={};
+  expect(await pool.acquire(a)).toBe(await pool.acquire(b));
+  pool.release(a); await Promise.resolve();
+  expect(closed).toBe(0);
+  pool.release(b); await Promise.resolve();
+  expect(closed).toBe(1);
+  expect((await pool.acquire(a)).id).toBe(2);
+  pool.release(a); await Promise.resolve();
+  expect(closed).toBe(2);
+});
+
+test('closing during authentication does not close or clear a newer connection', async () => {
+  let resolveOld, closed = 0, calls = 0;
+  const pool = new SharedAudioConnection(() => ++calls===1
+    ? new Promise(resolve=>{resolveOld=resolve;})
+    : {close(){closed++;}});
+  const a={},b={};
+  const old=pool.acquire(a); await Promise.resolve();
+  pool.release(a);
+  const current=await pool.acquire(b);
+  resolveOld({close(){closed++;}}); await old; await Promise.resolve();
+  expect(closed).toBe(1);
+  expect(await pool.acquire(b)).toBe(current);
+  pool.release(b); await Promise.resolve();
+  expect(closed).toBe(2);
+});
+
+test('late authentication failure does not invalidate a newer connection', async () => {
+  let rejectOld, calls=0;
+  const pool=new SharedAudioConnection(()=>++calls===1
+    ? new Promise((_,reject)=>{rejectOld=reject;}) : {close(){}});
+  const a={},b={};
+  const old=pool.acquire(a); await Promise.resolve();
+  pool.release(a);
+  const current=await pool.acquire(b);
+  rejectOld(Error('old auth failed'));
+  await expect(old).rejects.toThrow('old auth failed');
+  expect(await pool.acquire(b)).toBe(current);
+  pool.release(b);
+});

package/test/canvas-paint.test.js

@@ -7,3 +7,11 @@ test("canvas bitmaps paint, update without DOM mutations, scale, reset and survi
   expect(stderr).toBe("");
   expect(exit).toBe(0);
 }, 15_000);
+
+test("canvas damage matches full repaint with transparency, clipping and overlapping content", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/canvas-damage.js", import.meta.url).pathname],
+    { stdout: "pipe", stderr: "pipe" });
+  const [exit, stderr] = await Promise.all([child.exited, new Response(child.stderr).text()]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+}, 15_000);