buninu-browser 0.3.0 → 0.5.0

package/lib/renderer/page-renderer.js

@@ -22,10 +22,28 @@
  * then scripts run. `loadDocument` resolves at the first paint; `whenLoaded`
  * after the load event.
  */
+import {isTextInput, moveInputSelection, inputClipboard, selectInput} from './text-input.js';
+import {inputPresentation, inputOwner, inputCaretNode} from './text-input-paint.js';
 import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
 import { setCanvasKit, canvasResource, observeDocumentCanvases } from "./canvas-2d.js";
 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";
+// qml handle end
+
 import { parseHTMLDocument } from "../happy-dom/parser.js";
 import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
@@ -227,6 +245,9 @@ function buildPageRenderer({
   requestDownload = () => {},
   reportError = () => {},
   pageFetch = () => Promise.reject(new TypeError("network access is not available")),
+  clipboardReadInput = () => clipboardRead(),
+  clipboardWriteInput = text => clipboardWrite(text),
+  clipboardRead = () => Promise.reject(Error("Clipboard unavailable")),
   clipboardWrite = () => Promise.reject(Error("Clipboard unavailable")),
   webSockets = null,
   audio = null,
@@ -242,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,
@@ -252,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 = "";
@@ -315,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",
@@ -505,7 +535,7 @@ function buildPageRenderer({
       const paragraph = makeParagraph(text, computedStyle);
       paragraph.layout(100_000);
       // getLongestLine() drops trailing white space, which line breaking needs.
-      width = paragraph.getMaxIntrinsicWidth();
+      width = {width:paragraph.getMaxIntrinsicWidth(),ascent:paragraph.getAlphabeticBaseline(),height:paragraph.getHeight()};
       paragraph.delete();
       if (++measuredCount > MAX_MEASURED_TEXTS) {
         measuredWidths.clear();
@@ -514,7 +544,7 @@ function buildPageRenderer({
       }
       widths.set(text, width);
     }
-    return width;
+    return width.width;
   }
 
   // Computed styles are immutable and shared, so each one's key is computed once.
@@ -534,8 +564,12 @@ function buildPageRenderer({
   }
 
   const fontMetricsCache = new Map();
-  function fontMetrics(computedStyle = null) {
+  function fontMetrics(computedStyle = null, text = null) {
     const key = fontKeyOf(computedStyle);
+    if(text) {
+      measureText(text,computedStyle);
+      return measuredWidths.get(key).get(text);
+    }
     let metrics = fontMetricsCache.get(key);
     if (!metrics) {
       const paragraph = makeParagraph("Hg", computedStyle);
@@ -570,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.
@@ -637,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() {
@@ -682,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
@@ -693,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();
@@ -703,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;
@@ -713,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,
@@ -788,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. */
@@ -811,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(
@@ -838,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);
@@ -1013,7 +1092,7 @@ function buildPageRenderer({
       } else if (item.op === "drawSvg") {
         drawSvg(item);
       } else if (item.op === "drawText") {
-        const entry = paragraphForPaint(item, scale, pixel(Math.max(1, view.width + view.x - item.x)));
+        const entry = paragraphForPaint(item, scale, pixel(Math.max(1, item.textWidth + 1)));
         try {
           if (item.gradient) {
             // background-clip:text: draw glyphs, then keep the gradient only where they are.
@@ -1027,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();
         }
@@ -1383,6 +1473,14 @@ function buildPageRenderer({
     const traits = selectorTraitsFor(sheets);
     const records = styleChanges.records;
     if (styleChanges.observer) records.push(...styleChanges.observer.takeRecords());
+
+    // qml handle begin: QML visual attributes invalidate retained rendering
+    if (hasQmlDomImages(page.document) && qmlTextureVisibilityChanged(records)) {
+      page.resourcePaintDirty = true;
+      page.needsPaint = true;
+    }
+    // qml handle end
+
     const roots = styleChanges.roots;
     // Explicit roots mean that state-dependent selectors may need restyling;
     // they do not by themselves change render-tree content. DOM mutation
@@ -1549,18 +1647,23 @@ function buildPageRenderer({
 
   function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
     if (page.document) loadImageResource.cancelDocument(page.document);
+    resetInputCaret();
     rasterReadback.dispose();
     clearPaintParagraphs();
     resetDocumentFonts();
     disposeFrames();
     closePiano();
     disposeVideos();
+    // qml handle begin: dispose application resources with their document
+    page.document?.__qmlHost?.dispose();
+    // qml handle end
     page.realm?.dispose();
     page.realm = null;
     page.window?.happyDOM?.close?.();
     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;
@@ -1762,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) {
@@ -1797,8 +1910,23 @@ function buildPageRenderer({
       trace(`${url}: ${name} ${Math.round(now - phaseStart)}ms`);
       phaseStart = now;
     } : () => {};
-    const isHtml = contentType.toLowerCase().includes("html");
-    const parsed = parseHTMLDocument(isHtml ? source : "<body></body>", url, referrer);
+
+    let isHtml = contentType.toLowerCase().includes("html");
+    let parsed;
+
+    // qml handle begin: supply DOM before the default HTML parser
+    if (isQmlDocument(url, contentType)) {
+      const qmlHost = page.scripting === "host" && new URL(url).protocol === "file:" ? createQmlHost(url) : null;
+      parsed = await loadQmlDocument(source, url, {scripting: page.scripting !== "off", fetchResource, importRoots:qmlHost?.importRoots});
+      parsed.document.__qmlHost = qmlHost;
+      if (qmlHost) enableQmlDomImages(parsed.document);
+      if (!current()) {qmlHost?.dispose();return;}
+      // Reuse the existing stylesheet/script/lifecycle pipeline for QML DOM.
+      isHtml = true;
+    }
+    // qml handle end
+
+    parsed ??= parseHTMLDocument(isHtml ? source : "<body></body>", url, referrer);
     phase("parse");
     // Stylesheets block rendering and scripts; images do not (only the
     // window load event waits for them, see whenImagesLoaded): one slow image
@@ -1858,6 +1986,43 @@ function buildPageRenderer({
         mode: page.scripting,
         hooks: realmHooks(generation),
       });
+      // qml handle begin: only a local QML host realm receives this capability
+      if (page.document.__qmlHost) page.realm.pageGlobal.__qmlHost = page.document.__qmlHost;
+      // qml handle end
+
+      // qml handle begin: QML methods/properties adapt shared media and text controls
+      if(page.document.__qmlHost) {
+        const host=page.document.__qmlHost;
+        host.media=element=>{
+          element=qmlBindings.Node.unwrap(element)??element;
+          if(element?.ownerDocument!==page.document||!['VIDEO','AUDIO'].includes(element.tagName))throw Error('Invalid QML media element');
+          return createQmlMediaController(element,{
+            valid:e=>e.ownerDocument===page.document,state:e=>page.media.get(e),
+            close:closeMedia,forget:e=>{page.media.delete(e);page.resources.delete(e);},ensure:mediaStateFor,
+            load:loadMedia,seek:seekMedia,play:playMedia,pause:pauseMedia,
+            snapshot:mediaState,error:mediaError,gains:qmlMediaGains,
+          });
+        };
+
+        host.inputClipboard=(element,operation)=>clipboardForInput(qmlBindings.Node.unwrap(element)??element,operation,{read:()=>host.clipboardRead(),write:text=>host.clipboardWrite(text)});
+        host.inputPresentation=(element,options)=>{
+          element=qmlBindings.Node.unwrap(element)??element;
+          if(element?.ownerDocument!==page.document)return;
+          inputPresentation.set(element,Object.assign(inputPresentation.get(element)||{},options));invalidateInput();
+        };
+      }
+      // 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");
@@ -1957,7 +2122,9 @@ function buildPageRenderer({
   /** Brings style, layout and raster up to date; returns whether it repainted. */
   function refresh() {
     if (disposedRenderer) return false;
+    syncInputCaret();
     if (page.dirty) rebuildRenderTree();
+    if(followCaret) { followCaret=false; revealInputCaret(); }
     if (!page.needsPaint) return false;
     render();
     return true;
@@ -1978,7 +2145,159 @@ function buildPageRenderer({
     if (!prevented && element.tagName === "DETAILS") element.open = !element.open;
   }
 
-  function editFocusedText(text, backspace = false) {
+  // qml handle begin: optional per-player PCM gain
+  const qmlMediaGains=new WeakMap();
+  // qml handle end
+
+  let caretElement, caretKey, caretTimer, followCaret=false;
+  function resetInputCaret() {
+    hostClearInterval(caretTimer);caretTimer=null;caretElement=null;caretKey=null;
+  }
+  function invalidateInput() {
+    page.resourceLayoutDirty=true;page.dirty=true;page.needsPaint=true;scheduleFrame();
+  }
+  function syncInputCaret() {
+    const element=page.document?.activeElement;
+    const valid=isTextInput(element)&&element.isConnected;
+    const key=valid?`${element.selectionStart}:${element.selectionEnd}:${element.value}:${inputPresentation.get(element)?.visible}`:'';
+    if(element===caretElement&&key===caretKey)return;
+    resetInputCaret();caretElement=element;caretKey=key;followCaret=true;
+    if(!valid)return;
+    const options=inputPresentation.get(element)||{};options.on=true;inputPresentation.set(element,options);
+    page.resourceLayoutDirty=true;page.dirty=true;page.needsPaint=true;
+    if(element.selectionStart!==element.selectionEnd||options.visible===false)return;
+    caretTimer=hostSetInterval(()=>{
+      if(page.document?.activeElement!==element||!element.isConnected){resetInputCaret();invalidateInput();return;}
+      options.on=!options.on;invalidateInput();
+    },500);
+    caretTimer.unref?.();
+  }
+  function revealInputCaret() {
+    const element=page.document?.activeElement;
+    if(!isTextInput(element))return;
+    const position=element.selectionDirection==='backward'?element.selectionStart:element.selectionEnd;
+    if(position===0){setElementScroll(element,0,0);return;}
+    const caret=layoutBoxOf(inputCaretNode(element)),field=layoutBoxOf(element),geometry=scrollerGeometry(element);
+    if(!caret||!field||!geometry)return;
+    const [top,, ,left]=field.node.style.borderWidths||[0,0,0,0];
+    const padding=field.node.style.padding||[0,0,0,0];
+    const x=caret.box.x-field.box.x-left,y=caret.box.y-field.box.y-top;
+    const px=Number(padding[3])||0,py=Number(padding[0])||0;
+    let sx=geometry.x,sy=geometry.y;
+    if(x<sx+px)sx=x-px;
+    else if(x+1>sx+geometry.clientWidth-px)sx=x+1-geometry.clientWidth+px;
+    if(y<sy+py)sy=y-py;
+    else if(y+caret.box.height>sy+geometry.clientHeight-py)sy=y+caret.box.height-geometry.clientHeight+py;
+    setElementScroll(element,sx,sy);
+  }
+
+  // Hit the same laid-out/shaped runs that paint the control. This is only
+  // performed on a pointer press, never on the animation/capture path.
+  function inputPositionAtPoint(element,x,y) {
+    if(!String(element.value??''))return 0;
+    let best=null;
+    for(const hit of page.displayList?.hits??[]) {
+      const run=hit.textRun;if(!run)continue;
+      const node=page.renderTree.nodesById.get(hit.nodeId);
+      if((inputOwner.get(node?.domNode)??node?.domNode)!==element)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;
+      }
+      const top=run.y, height=parseFloat(run.style.lineHeight)||parseFloat(run.style.fontSize)||16;
+      const dy=Math.max(top-py,py-top-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 0;
+    const {run,node,px}=best;
+    const paragraph=makeParagraph(run.text,run.style);let at;
+    try{
+      paragraph.layout(Math.max(1,run.width+1));
+      at=paragraph.getGlyphPositionAtCoordinate(px-run.x,0).pos;
+    }finally{paragraph.delete();}
+    let position=(node.valueStart??0)+(run.sourceStart??0)+at;
+    if(element.type==='password')position=[...String(element.value)].slice(0,position).join('').length;
+    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;
+      editFocusedText(text,false,type);syncInputCaret();invalidateInput();
+    }});
+  }
+  function inputDefault(element,event) {
+    if(!isTextInput(element)||event.altKey)return false;
+    if(moveInputSelection(element,event)){syncInputCaret();invalidateInput();return true;}
+    if((event.ctrlKey||event.metaKey)&&['c','x','v'].includes(event.key.toLowerCase())) {
+      let backend;
+
+      // qml handle begin: local applications choose their frontend clipboard transport
+      const host=page.document.__qmlHost;
+      if(host)backend={read:()=>host.clipboardRead(),write:text=>host.clipboardWrite(text)};
+      // qml handle end
+
+      clipboardForInput(element,{c:'copy',x:'cut',v:'paste'}[event.key.toLowerCase()],backend).catch(reportError);
+      return true;
+    }
+    if(event.key==='Delete'&&!element.readOnly) {
+      const at=element.selectionStart;
+      if(at===element.selectionEnd)selectInput(element,at,at+(String(element.value).codePointAt(at)>0xffff?2:1));
+      editFocusedText('',false,'deleteContentForward');invalidateInput();return true;
+    }
+    return false;
+  }
+
+  function editFocusedText(text, backspace = false, inputType = 'insertText') {
     const element = page.document.activeElement;
     if (!element || !["INPUT", "TEXTAREA"].includes(element.tagName) || element.disabled || element.readOnly) return;
     if (element.tagName === "INPUT" && !["text", "search", "url", "email", "tel", "password"].includes(element.type)) return;
@@ -1993,14 +2312,14 @@ function buildPageRenderer({
     if (page.realm) {
       const prevented = page.realm.dispatch(element, new page.window.InputEvent("beforeinput", {
         bubbles: true, cancelable: true, data: backspace ? null : text,
-        inputType: backspace ? "deleteContentBackward" : "insertText",
+        inputType: backspace ? "deleteContentBackward" : inputType,
       }));
       if (prevented) return;
     }
     element.value = value.slice(0, start) + text + value.slice(end);
     markStyleDirty(element); // :placeholder-shown, :valid / :invalid
     element.setSelectionRange?.(start + text.length, start + text.length);
-    if (page.realm) page.realm.dispatch(element, new page.window.Event("input", { bubbles: true }));
+    if (page.realm) page.realm.dispatch(element, new page.window.InputEvent("input", { bubbles: true, inputType:backspace?"deleteContentBackward":inputType, data:backspace?null:text }));
     page.dirty = true;
   }
 
@@ -2064,6 +2383,20 @@ function buildPageRenderer({
       canvasImage(element) {
         if (!element) return null;
         if (element.tagName === "CANVAS") return canvasResource(element);
+
+        // qml handle begin: local QML may draw a DOM subtree into a canvas
+        if (hasQmlDomImages(page.document) && !["IMG", "VIDEO", "AUDIO", "IMAGE"].includes(element.tagName)) {
+          if (page.dirty) rebuildRenderTree();
+          return captureQmlDomImage(element, {
+            document: page.document, tree: page.renderTree, layout: page.layout,
+            resources: page.resources, backgroundResource, scrollOffsetOf,
+            kit: CanvasKit, paint: paintDisplayList, canvasResource,
+            isOriginClean: resource => resource?.originClean ?? Boolean(resource?.url &&
+              (resource.url.startsWith("data:") || originOf(resource.url) === originOf(page.url))),
+          });
+        }
+        // qml handle end
+
         const resource = page.resources.get(element);
         if (!resource?.image) return null;
         const url = resource.url ?? element.src ?? "";
@@ -2105,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");
@@ -2196,6 +2530,7 @@ function buildPageRenderer({
         page.cookie = mergeDocumentCookie(page.cookie, String(value));
         setCookie(String(value));
       },
+      clipboardRead,
       clipboardWrite,
       webSockets,
       pageFetch(request) {
@@ -2533,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();
@@ -2560,7 +2895,11 @@ function buildPageRenderer({
         };
         const prevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keydown", init));
         let activated = false;
-        if (!prevented && !init.ctrlKey && !init.metaKey && !init.altKey) {
+        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;
             if (key === "Enter") activateDisclosure(target);
@@ -2579,7 +2918,7 @@ function buildPageRenderer({
         }
         const upPrevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
         if (activated && key === " " && !upPrevented) activateDisclosure(target);
-        if (refresh() || prevented || activated) return { x: viewport.x, y: viewport.y };
+        if (refresh() || prevented || activated || inputHandled) return { x: viewport.x, y: viewport.y };
       }
       const pageStep = Math.max(31, viewport.height - 31);
       const delta = {
@@ -2629,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;
@@ -2666,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 : 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;
@@ -2679,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"));
@@ -2693,27 +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) focusable.focus();
-      };
-      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();
@@ -2811,12 +3247,16 @@ function buildPageRenderer({
     },
     dispose() {
       if (disposedRenderer) return;
+      resetInputCaret();
       disposedRenderer = true;
       loadGeneration++;
       if (page.document) loadImageResource.cancelDocument(page.document);
       hostClearTimeout(prepaintTimer);
       hostClearTimeout(frameTimer);
       disposeFrames();
+      // qml handle begin: renderer shutdown closes application resources
+      page.document?.__qmlHost?.dispose();
+      // qml handle end
       page.realm?.dispose();
       closePiano();
       disposeVideos();
@@ -2973,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);
@@ -2980,7 +3421,10 @@ function buildPageRenderer({
       requestDownload,
       reportError,
       pageFetch,
+      clipboardRead,
       clipboardWrite,
+      clipboardReadInput,
+      clipboardWriteInput,
       webSockets,
       setCookie,
       consoleMessage,
@@ -3141,6 +3585,12 @@ function buildPageRenderer({
       if (resource) page.resources.set(node.domNode, resource);
       else page.resources.delete(node.domNode);
     }
+
+    // qml handle begin: texture sources keep layout/input but paint through their texture
+    if (hasQmlDomImages(page.document)) return filterQmlTextureSources(
+      buildDisplayList(page.layout, page.renderTree, page.resources, backgroundResource, scrollOffsetOf), page.renderTree);
+    // qml handle end
+
     return buildDisplayList(page.layout, page.renderTree, page.resources, backgroundResource, scrollOffsetOf);
   }
 
@@ -4411,6 +4861,11 @@ function buildPageRenderer({
         sound.history.shift();
       }
       const pcm = floatToS16(taken);
+
+      // qml handle begin: apply QML AudioOutput gain to the output chunk only
+      applyQmlMediaGain(pcm,qmlMediaGains.get(state.element));
+      // qml handle end
+
       audio.write(sound.id, pcm);
       sent += pcm.length;
     }