buninu-browser 0.2.4 → 0.4.0

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,22 @@ 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);
+        const secure = url.protocol === 'https:' || (url.protocol === 'http:' && ['localhost','127.0.0.1','[::1]'].includes(url.hostname));
+        if (!secure || !hooks.clipboardWrite) throw Error('Clipboard unavailable');
+        await hooks.clipboardWrite(text);
+      }
+      catch { throw new DOMException('Clipboard write was not allowed or failed', 'NotAllowedError'); }
+    },
     sendBeacon: (url, data) => {
       network.fetch(url, { method: "POST", body: data, mode: "no-cors", credentials: "include", keepalive: true })
         .catch(() => {});
@@ -2672,7 +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 }) {
+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) => {
@@ -2750,6 +2773,13 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
   }, targetOptions);
   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));
+    },
+  }, targetOptions);
   const Navigator = define("Navigator", {
     userAgent,
     appCodeName: "Mozilla",
@@ -2775,6 +2805,7 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
     ...(NavigatorUAData ? { userAgentData: NavigatorUAData.instance } : {}),
     connection: NetworkInformation.instance,
     permissions: Permissions.instance,
+    clipboard: Clipboard.instance,
     sendBeacon(url, data = null) { return sendBeacon(url, data); },
     javaEnabled() { return false; },
     getGamepads() { return [null, null, null, null]; },

package/lib/renderer/page-renderer.js

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

package/lib/renderer/text-input-paint.js

@@ -0,0 +1,54 @@
+import { computeElementStyle } from '../style/computed-style.js';
+export const inputPresentation = new WeakMap();
+export const inputOwner = new WeakMap();
+
+const spans = new WeakMap();
+const carets = new WeakMap();
+export const inputCaretNode = element => carets.get(element);
+
+// Form controls share native selection and caret presentation across frontends.
+export function textInputSelection(element, text, style, make) {
+  const options=inputPresentation.get(element)||{};
+  const focused=element.ownerDocument.activeElement===element;
+  const value=String(element.value??'');
+  const position=at=>element.type==='password'?[...value.slice(0,at)].length:at;
+  const start=position(element.selectionStart??0),end=position(element.selectionEnd??0);
+  const raw=(focused||options.persistent)&&end>start ? {start,end,background:options.background||'#3874f2',color:options.selectedColor||'white'}:null;
+  const caretAt = (at, selected=false) => {
+    let span=carets.get(element);
+    if(!span){span=element.ownerDocument.createElement('span');carets.set(element,span);inputOwner.set(span,element);}
+    const height=options.height||parseFloat(style.fontSize)||16;
+    const color=options.color||style.color;
+    const on=!selected&&options.on!==false&&options.visible!==false;
+    span.style.cssText=`display:inline-block;width:0;height:${height}px;border-left:1px solid ${on?color:'transparent'};margin-right:-1px;vertical-align:text-bottom;pointer-events:none`;
+    return make('caret','inline-block',{tagName:'SPAN',style:computeElementStyle(span,style),children:Object.freeze([])},span);
+  };
+  if (!raw) {
+    if(!focused||element.disabled||options.visible===false)return null;
+    const node=(part,text)=>make(part,'text',{text,style,valueStart:part==='after'?start:0,pseudo:'value',children:Object.freeze([])},element);
+    return [node('before',text.slice(0,start)),caretAt(start),node('after',text.slice(start))];
+  }
+  const { background, color } = raw;
+  const from = Math.max(0, Math.min(text.length, start)),
+    to = Math.max(from, Math.min(text.length, end));
+  if (from === to) return null;
+  const textNode = (part, text, textStyle = style, domNode = element) => make(part, 'text', {
+    text, style: textStyle, valueStart:part==='selected'?from:part==='after'?to:0, pseudo: 'value', children: Object.freeze([]),
+  }, domNode);
+  let span = spans.get(element);
+  if (!span) { span = element.ownerDocument.createElement('span'); spans.set(element, span); inputOwner.set(span,element); }
+  span.style.pointerEvents = 'none';
+  span.style.backgroundColor = background;
+  span.style.color = color;
+  const selectedStyle = computeElementStyle(span, style);
+  const children = [];
+  if (from) children.push(textNode('before', text.slice(0, from)));
+  if(focused&&element.selectionDirection==='backward')children.push(caretAt(from,true));
+  children.push(make('selection', 'inline', {
+    tagName: 'SPAN', style: selectedStyle,
+    children: Object.freeze([textNode('selected', text.slice(from, to), selectedStyle, span)]),
+  }, span));
+  if(focused&&element.selectionDirection!=='backward')children.push(caretAt(to,true));
+  if (to < text.length) children.push(textNode('after', text.slice(to)));
+  return children;
+}

package/lib/renderer/text-input.js

@@ -0,0 +1,57 @@
+// Shared editing defaults for HTML and QML's real input/textarea elements.
+export function isTextInput(element) {
+  return !!element && !element.disabled && (element.tagName==='TEXTAREA' ||
+    element.tagName==='INPUT' && ['text','search','url','email','tel','password'].includes(element.type));
+}
+export const inputRange = element => ({text:String(element.value),start:element.selectionStart??0,end:element.selectionEnd??0});
+export function selectInput(element,start,end=start) {
+  element.setSelectionRange(Math.min(start,end),Math.max(start,end),end<start?'backward':'forward');
+}
+const columns=new WeakMap();
+export function moveInputSelection(element,event) {
+  if(!isTextInput(element)||event.altKey)return false;
+  const {text,start,end}=inputRange(element),ctrl=event.ctrlKey||event.metaKey,key=event.key;
+  if(ctrl&&key.toLowerCase()==='a'){selectInput(element,0,text.length);return true;}
+  if(!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'].includes(key))return false;
+  let at=element.selectionDirection==='backward'?start:end;
+  const anchor=at===start?end:start,multi=element.tagName==='TEXTAREA';
+  const lineStart=text.lastIndexOf('\n',at-1)+1;
+  if(key==='ArrowUp'||key==='ArrowDown') {
+    if(!multi)return false;
+    const previous=columns.get(element),column=previous?.at===at?previous.column:at-lineStart;
+    if(key==='ArrowUp') {
+      const stop=lineStart-1;at=stop<0?0:Math.min(text.lastIndexOf('\n',stop-1)+1+column,stop);
+    } else {
+      const next=text.indexOf('\n',at),stop=next<0?-1:text.indexOf('\n',next+1);
+      at=next<0?text.length:Math.min(next+1+column,stop<0?text.length:stop);
+    }
+    columns.set(element,{at,column});
+  } else {
+    columns.delete(element);
+    if(key==='Home')at=multi&&!ctrl?lineStart:0;
+    else if(key==='End'){const stop=text.indexOf('\n',at);at=multi&&!ctrl&&stop>=0?stop:text.length;}
+    else if(!event.shiftKey&&start!==end)at=key==='ArrowLeft'?start:end;
+    else if(key==='ArrowLeft') {
+      at-=[...text.slice(0,at)].pop()?.length??0;
+      if(ctrl){while(at>0&&/\s/u.test(text[at]))at--;while(at>0&&/[\p{L}\p{N}_]/u.test(text[at-1]))at--;}
+    } else {
+      at+=text.codePointAt(at)>0xffff?2:at<text.length?1:0;
+      if(ctrl){while(at<text.length&&/[\p{L}\p{N}_]/u.test(text[at]))at++;while(at<text.length&&/\s/u.test(text[at]))at++;}
+    }
+  }
+  selectInput(element,event.shiftKey?anchor:at,at);return true;
+}
+export async function inputClipboard(element,operation,{read,write,replace}) {
+  if(!isTextInput(element)||operation!=='copy'&&element.readOnly)return;
+  const range=inputRange(element);
+  if(operation==='copy'||operation==='cut') {
+    if(element.type==='password'||range.start===range.end)return;
+    await write(range.text.slice(range.start,range.end));
+    if(operation==='copy')return;
+  }
+  let text=operation==='paste'?await read():'';
+  if(String(element.value)!==range.text||element.selectionStart!==range.start||element.selectionEnd!==range.end||element.readOnly||!element.isConnected)return;
+  if(element.tagName!=='TEXTAREA')text=text.replace(/[\r\n]+/g,'');
+  if(element.maxLength>=0)text=text.slice(0,Math.max(0,element.maxLength-(range.text.length-range.end+range.start)));
+  replace(text,operation==='paste'?'insertFromPaste':'deleteByCut');
+}