buninu-browser 0.3.0 → 0.4.0

package/lib/renderer/host.js

@@ -1,4 +1,4 @@
-import {writeClipboard} from '../clipboard.js';
+import {writeClipboard, readClipboard} from '../clipboard.js';
 /**
  * Controller-side handle for a renderer process.
  *
@@ -55,11 +55,13 @@ const LIFECYCLE_NAMES = new Set(["DOMContentLoaded", "load"]);
 const DEFAULT_ENTRY = Bun.fileURLToPath(new URL("./main.js", import.meta.url));
 
 export class RendererHost {
+  #clipboardRead = readClipboard;
   #clipboardWrite = writeClipboard;
   #clipboardUntil = 0;
   #clipboardPending = false;
   #rawFrames = null;
   #startEpoch = 0;
+  #closed = false;
   #rejectStartup = null;
   #entry;
   #args;
@@ -114,8 +116,10 @@ export class RendererHost {
     network = new NetworkService({ fetch: fetchImpl }), onFrame = null, onLifecycle = null,
     // A dedicated loopback socket works independently of the main thread on all platforms.
     compositor = entry === DEFAULT_ENTRY,
+    clipboardRead = readClipboard,
     clipboardWrite = writeClipboard,
   } = {}) {
+    this.#clipboardRead = clipboardRead;
     this.#clipboardWrite = clipboardWrite;
     this.#onFrame = onFrame;
     this.#onLifecycle = onLifecycle;
@@ -131,6 +135,7 @@ export class RendererHost {
 
   /** Starts the renderer if it is not running and waits until it is ready. */
   start() {
+    if (this.#closed) return Promise.reject(Error("Renderer is closed"));
     if (this.#ready) return this.#ready;
     let resolveReady;
     let rejectReady;
@@ -149,13 +154,19 @@ export class RendererHost {
         ()=>this.#closeChannel(channel));
       if (epoch !== this.#startEpoch) { channel?.transport.close(); throw Error('Renderer startup cancelled'); }
       this.#channel = channel;
+      // No inherited environment: nothing from the controller leaks in.
+      // Windows programs need SystemRoot to load system libraries.
+      let env = process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {};
+
+      // qml handle begin: applications need HOME/PATH/runtime paths, web pages do not
+      if (this.#args.includes("--buninu-qml-host")) env = { ...process.env };
+      // qml handle end
+
       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 } : {},
+        env,
         // With BUNINU_LOG, output goes through the controller into the log file.
         stdio: ["ignore", logging ? "pipe" : "inherit", logging ? "pipe" : "inherit"],
         serialization: "advanced",
@@ -297,6 +308,7 @@ export class RendererHost {
   }
 
   close() {
+    this.#closed = true;
     this.#startEpoch++;
     this.#rejectStartup?.(Error("Renderer closed during startup")); this.#rejectStartup=null;
     this.#rawFrames?.close(); this.#rawFrames=null;
@@ -313,6 +325,7 @@ export class RendererHost {
   }
 
   async #call(method, params, timeout = this.#timeout) {
+    if (this.#closed) throw Error("Renderer is closed");
     if (!this.#child) await this.#restart();
     await this.start();
     const child = this.#child;
@@ -365,11 +378,23 @@ 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)) {
+    } else if (['clipboard-read','clipboard-read-input'].includes(message.type) && Number.isInteger(message.id)) {
+      const reply = (text, error) => {if(this.#child===child) child.send({type:'clipboard-result',id:message.id,text,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 && !message.type.endsWith('-input')) || Date.now()>this.#clipboardUntil || this.#clipboardPending) {
+        reply(undefined,'Clipboard read requires a recent user action in a secure document'); return;
+      }
+      this.#clipboardUntil=0; this.#clipboardPending=true;
+      Promise.resolve().then(()=>this.#clipboardRead()).then(text=>{
+        if(typeof text!=='string'||Buffer.byteLength(text)>1024*1024)throw Error('Clipboard text exceeds limit');
+        reply(text);
+      }).catch(()=>reply(undefined,'Unable to read system clipboard')).finally(()=>{this.#clipboardPending=false;});
+    } else if (['clipboard-write','clipboard-write-input'].includes(message.type) && 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
+      if ((!secure && !message.type.endsWith('-input')) || 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;
       }

package/lib/renderer/main.js

@@ -241,12 +241,13 @@ async function startScriptRewriter() {
 
 let nextClipboardId=1;
 const clipboardWrites=new Map();
-function clipboardWrite(text) {
+function clipboardRead() { return clipboardWrite(undefined, 'clipboard-read'); }
+function clipboardWrite(text, type = 'clipboard-write') {
   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});
+    process.send({type,id,text});
   });
 }
 
@@ -256,7 +257,10 @@ const renderer = await createPageRenderer({
   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,
+  clipboardRead,
   clipboardWrite,
+  clipboardReadInput:()=>clipboardWrite(undefined,'clipboard-read-input'),
+  clipboardWriteInput:text=>clipboardWrite(text,'clipboard-write-input'),
   webSockets,
   audio,
   setCookie: (value) => process.send({ type: "cookie", value }),
@@ -281,11 +285,20 @@ const renderer = await createPageRenderer({
   videoDecoder: wasmpeg,
 });
 await warmUp();
-const allowHostJs = process.argv.includes(DANGEROUSLY_ALLOW_HOST_JS);
+let allowHostJs = process.argv.includes(DANGEROUSLY_ALLOW_HOST_JS);
+let hostReason = `disabled by ${DANGEROUSLY_ALLOW_HOST_JS}`;
+
+// qml handle begin: controller-selected local QML application process
+if (process.argv.includes("--buninu-qml-host")) {
+  allowHostJs = true;
+  hostReason = "local QML application renderer";
+}
+// qml handle end
+
 const seccomp = allowHostJs
-  ? { installed: false, reason: `disabled by ${DANGEROUSLY_ALLOW_HOST_JS}` }
+  ? { installed: false, reason: hostReason }
   : installSeccomp();
-const ses = allowHostJs ? { installed: false, reason: `disabled by ${DANGEROUSLY_ALLOW_HOST_JS}` } : lockdownRealm();
+const ses = allowHostJs ? { installed: false, reason: hostReason } : lockdownRealm();
 renderer.setScripting(allowHostJs ? "host" : ses.installed ? "ses" : "off");
 
 /** Hardens the JavaScript realm so page scripts can run in SES compartments. */
@@ -340,7 +353,7 @@ 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();
+    if(message.error)pending.reject(Error(String(message.error)));else pending.resolve(message.text);
     return;
   }
 

package/lib/renderer/page-realm.js

@@ -192,6 +192,13 @@ const INTERFACE_MEMBERS = {
   alt: ["HTMLImageElement", "HTMLAreaElement", "HTMLInputElement"],
   placeholder: ["HTMLInputElement", "HTMLTextAreaElement"],
   readOnly: ["HTMLInputElement", "HTMLTextAreaElement"],
+  maxLength: ["HTMLInputElement", "HTMLTextAreaElement"],
+  selectionStart: ["HTMLInputElement", "HTMLTextAreaElement"],
+  selectionEnd: ["HTMLInputElement", "HTMLTextAreaElement"],
+  selectionDirection: ["HTMLInputElement", "HTMLTextAreaElement"],
+  setSelectionRange: ["HTMLInputElement", "HTMLTextAreaElement"],
+  setRangeText: ["HTMLInputElement", "HTMLTextAreaElement"],
+  select: ["HTMLInputElement", "HTMLTextAreaElement"],
   required: ["HTMLInputElement", "HTMLTextAreaElement", "HTMLSelectElement"],
   min: ["HTMLInputElement", "HTMLMeterElement"], max: ["HTMLInputElement", "HTMLMeterElement", "HTMLProgressElement"],
   step: ["HTMLInputElement"],
@@ -1590,6 +1597,13 @@ 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() },
+    clipboardRead: async () => {
+      try {
+        const url=new URL(document.URL);
+        if (!(url.protocol==='https:' || (url.protocol==='http:' && ['localhost','127.0.0.1','[::1]'].includes(url.hostname))) || !hooks.clipboardRead) throw Error('Clipboard unavailable');
+        return await hooks.clipboardRead();
+      } catch {throw new DOMException('Clipboard read was not allowed or failed','NotAllowedError');}
+    },
     clipboardWrite: async text => {
       try {
         const url = new URL(document.URL);
@@ -2681,7 +2695,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, clipboardWrite }) {
+function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile, viewport, performance, storages, sendBeacon, clipboardWrite, clipboardRead }) {
   const EventTargetPrototype = eventTargets.EventTarget.prototype;
   // An instance an event target's listeners can be added to.
   const eventTarget = (prototype) => {
@@ -2760,6 +2774,7 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
   const NavigatorUAData = userAgentDataMembers ? define("NavigatorUAData", userAgentDataMembers) : null;
   const languages = Object.freeze(["en-US"]);
   const Clipboard = define('Clipboard', {
+    readText() { return clipboardRead(); },
     writeText(text) {
       if (arguments.length===0) return Promise.reject(new TypeError('writeText requires text'));
       return clipboardWrite(String(text));

package/lib/renderer/page-renderer.js

@@ -22,10 +22,22 @@
  * 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 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 {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 +239,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,
@@ -505,7 +520,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 +529,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 +549,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);
@@ -1013,7 +1032,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.
@@ -1383,6 +1402,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,12 +1576,16 @@ 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?.();
@@ -1797,8 +1828,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 +1904,33 @@ 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
+
       await page.realm.runDocumentScripts();
       if (!current()) return;
       phase("scripts");
@@ -1957,7 +2030,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 +2053,111 @@ 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 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 +2172,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 +2243,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 ?? "";
@@ -2196,6 +2389,7 @@ function buildPageRenderer({
         page.cookie = mergeDocumentCookie(page.cookie, String(value));
         setCookie(String(value));
       },
+      clipboardRead,
       clipboardWrite,
       webSockets,
       pageFetch(request) {
@@ -2560,7 +2754,8 @@ 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 (!inputHandled && !prevented && !init.ctrlKey && !init.metaKey && !init.altKey) {
           if ((key === "Enter" || key === " ") && isDisclosureControl(target)) {
             activated = true;
             if (key === "Enter") activateDisclosure(target);
@@ -2579,7 +2774,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 = {
@@ -2666,7 +2861,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 = forwarded ? region.element : inputOwner.get(precise) ?? precise ?? region?.element ?? null;
       const generatedDisclosure = hitNode?.pseudo === "summary" && target?.tagName === "DETAILS";
       if (!target) {
         focusedFrame = null;
@@ -2696,7 +2891,11 @@ function buildPageRenderer({
       // 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 (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();
       else {
@@ -2811,12 +3010,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();
@@ -2980,7 +3183,10 @@ function buildPageRenderer({
       requestDownload,
       reportError,
       pageFetch,
+      clipboardRead,
       clipboardWrite,
+      clipboardReadInput,
+      clipboardWriteInput,
       webSockets,
       setCookie,
       consoleMessage,
@@ -3141,6 +3347,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 +4623,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;
     }