buninu-browser 0.7.0 → 0.9.0

package/lib/renderer/page-renderer.js

@@ -1,3 +1,10 @@
+import { timeVideoDecoder } from "../media/mp4-frame-times.js";
+import {createCSSAnimations} from './css-animations.js';
+import { CanvasComposer } from "../paint/direct-canvas.ts";
+import { makeRasterSurface } from "./raster-surface.js";
+import {chooseInputFiles} from './file-input.js';
+import {inverseTransformPoint,transformRect} from '../paint/display-list.js';
+import { HTMLDrag, isDraggable } from './html-drag.js';
 /**
  * The page pipeline of one renderer: parse, style, layout, display list and
  * CanvasKit raster, plus the page-side input helpers (scrolling, hit testing,
@@ -50,7 +57,7 @@ import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { scrollAlignmentDelta } from "./scroll-into-view.js";
 import { elementAtPoint, elementBounds, elementBox, hitTest, interactiveRegions, renderNodeAtPoint } from "../input/hit-test.js";
-import { beginImageLoad, finishImageLoad } from "./image-loading.js";
+import { beginImageLoad, finishImageLoad, imageSourceChanged } from "./image-loading.js";
 import { createImageResourceLoader, imageCrossOrigin, imageRequestKey } from "./image-resources.js";
 import { createResourceElements } from "./resource-elements.js";
 import { DocumentFonts } from "./font-loading.js";
@@ -252,6 +259,7 @@ function buildPageRenderer({
   requestDownload = () => {},
   reportError = () => {},
   pageFetch = () => Promise.reject(new TypeError("network access is not available")),
+  dialog = (type) => type === "confirm" ? false : type === "prompt" ? null : undefined,
   clipboardReadInput = () => clipboardRead(),
   clipboardWriteInput = text => clipboardWrite(text),
   clipboardRead = () => Promise.reject(Error("Clipboard unavailable")),
@@ -314,7 +322,19 @@ function buildPageRenderer({
   }
   const renderTreeBuilder = new RenderTreeBuilder();
   let layoutEngine = new LayoutEngine({ measureText, fontMetrics });
-  const styleEngine = new StyleEngine({ measureText, deferHidden: true });
+  const cssAnimations = createCSSAnimations({
+    invalidate(element) { markStyleDirty(element);page.dirty=true;scheduleFrame(true); },
+    dispatch(element,type,detail) {
+      if(!page.realm||element.ownerDocument!==page.document)return;
+      const event=new page.window.AnimationEvent(type,{bubbles:true,...detail});
+      page.realm.dispatch(element,event);
+      // Legacy event names are aliases for the same CSS animation timeline.
+      if(type!=='animationcancel') {
+        const alias=new page.window.AnimationEvent({animationstart:'webkitAnimationStart',animationiteration:'webkitAnimationIteration',animationend:'webkitAnimationEnd'}[type],{bubbles:true,...detail});page.realm.dispatch(element,alias);
+      }
+    },
+  });
+  const styleEngine = new StyleEngine({ measureText, deferHidden: true, sampleStyle:(element,style)=>cssAnimations.sample(element,style) });
   // Incremental restyle: what may have changed style since the last
   // computation. DOM mutations come from a MutationObserver; state that is
   // not in the DOM tree (checked, value, focus) is marked by the code that
@@ -357,7 +377,9 @@ function buildPageRenderer({
   // The frame keyboard input goes to, after a click into it.
   let focusedFrame = null;
   let pointerButtons = 0, suppressPointerMouse = false;
+  let spaceDisclosureActivation = null;
   const pointerPresses = new Map();
+  let htmlDrag = null;
   let selectionDrag = null;
   let selectionVersion = 0;
   const viewport = new ScrollViewport(800, 600);
@@ -387,6 +409,7 @@ function buildPageRenderer({
     decodedImages: [],
     imageElements: new Set(),
     imagesLoaded: null,
+    scriptImages: new Set(),
     // CSS background images by absolute URL: { resource, loaded } (see queueBackgroundImages).
     backgrounds: new Map(),
     // Scroll offsets of scroll containers, by element (see setElementScroll).
@@ -618,6 +641,7 @@ function buildPageRenderer({
   const captures = new FrameCaptureCache();
   let prepaintTimer = null;
   let frameTimer = null;
+  let lastAnimationPaint = -Infinity;
   let lastRebuildMs = 0;
 
   // What the latest tile was rasterized from. A rebuild that produces the
@@ -632,6 +656,10 @@ function buildPageRenderer({
   let rasterSurfaceHeight = 0;
   let rasterRegion = null;
   const rasterReadback = new RasterReadback(CanvasKit, { shared: Boolean(onFrame), allocate: allocateFramePixels });
+  const canvasComposer = new CanvasComposer();
+  let canvasLayers = null;
+  let canvasPixels = new WeakMap();
+  let clippedCanvasPixels = new WeakMap();
   // A scroll or unrelated DOM update does not change text shaping. Keep a
   // bounded set of visible paragraphs keyed by their complete shaping input.
   // Both limits matter: a page may contain many unique or very long strings.
@@ -744,7 +772,108 @@ function buildPageRenderer({
     schedulePrepaint();
   }
 
-  /** Conservative canvas-only damage, in document CSS pixels. */
+  /** Adapt one or more ordinary Canvas display items to Land surfaces. */
+  function composeCanvasLayers(region,width,height) {
+    const list=page.displayList,background=backgroundBytes(page.backgroundColor);
+    const selection=page.window?.getSelection();
+    if(background[3]!==255||page.hintsVisible||(selection&&!selection.isCollapsed)
+      ||framesVersion||list.items.some(item=>item.op==='drawVideo'))return null;
+    const groups=[],canvases=[];let pending=[];
+    for(const item of list.items){
+      if(item.op!=='drawImage'||page.renderTree.nodesById.get(item.nodeId)?.domNode?.tagName!=='CANVAS'){
+        pending.push(item);continue;
+      }
+      // Complex CSS effects still use the ordinary renderer until their layer
+      // rasterization can preserve those effects independently of composition.
+      if(item.fixed||item.transform
+        ||item.opacity<1||item.radii?.x||item.radii?.y)return null;
+      const resource=list.images[item.image];
+      if(!resource?.image)return null;
+      groups.push(pending);pending=[];canvases.push({item,resource});
+    }
+    if(!canvases.length)return null;
+    groups.push(pending);
+    // Ignore animated Canvas resources in the static layers' cache key.
+    const indices=new Set(canvases.map(({item})=>item.image));
+    const images=list.images.map((resource,index)=>indices.has(index)?null:resource);
+    const key={region,scale:page.deviceScaleFactor,background:page.backgroundColor,
+      scrollX:viewport.x,scrollY:viewport.y,groups};
+    if(!canvasLayers||!Bun.deepEquals(canvasLayers.key,key)
+      ||canvasLayers.images.length!==images.length||images.some((image,index)=>image!==canvasLayers.images[index])){
+      const layers=groups.map(items=>{
+        if(!items.length)return null;
+        const surface=makeRasterSurface(CanvasKit,width,height);
+        if(!surface)throw Error('Unable to rasterize Canvas DOM layer');
+        try{
+          const canvas=surface.getCanvas();canvas.clear(CanvasKit.TRANSPARENT);
+          paintDisplayList(canvas,{...list,images:list.images,items},region,page.deviceScaleFactor);
+          surface.flush();const image=surface.makeImageSnapshot();
+          try{
+            const pixels=rasterReadback.read(image,width,height,{premultiplied:true,allocate:bytes=>new Uint8Array(bytes)});
+            // Cache just the painted bounds, not a viewport-sized transparent
+            // surface for a tiny marker. Land then visits only this small layer.
+            const words=new Uint32Array(pixels.buffer,pixels.byteOffset,pixels.byteLength/4);
+            let left=width,top=height,right=0,bottom=0;
+            for(let y=0,at=0;y<height;y++)for(let x=0;x<width;x++,at++)if(words[at]>>>24){
+              if(x<left)left=x;if(y<top)top=y;if(x>=right)right=x+1;if(y>=bottom)bottom=y+1;
+            }
+            if(right<=left||bottom<=top)return null;
+            const w=right-left,h=bottom-top;
+            const cropped=cropViewport({pixels,pixelWidth:width,pixelHeight:height,x:0,y:0,width,height,scale:1},left,top,w,h);
+            return {pixels:cropped.pixels,width:w,height:h,x:left,y:top,drawWidth:w,drawHeight:h};
+          }finally{image.delete();}
+        }finally{surface.dispose();}
+      });
+      canvasLayers={key,images,layers};
+      trace?.(`${page.url}: direct canvas DOM layers rebuilt`);
+    }
+    const layers=[];
+    for(let i=0;i<groups.length;i++){
+      const layer=canvasLayers.layers[i];
+      if(layer)layers.push(layer);
+      if(i===canvases.length)continue;
+      const {item,resource}=canvases[i];
+      const r=item.rect,scale=page.deviceScaleFactor;
+      const x=Math.round((r.x-region.x)*scale),y=Math.round((r.y-region.y)*scale);
+      const drawWidth=Math.round(r.width*scale),drawHeight=Math.round(r.height*scale);
+      if(drawWidth<=0||drawHeight<=0)continue;
+      if(item.clipRect||item.roundedClips?.length){
+        // Preserve CSS clipping with Skia on this Canvas layer alone. The DOM
+        // layers remain cached and Land still performs final composition.
+        // Align the local raster to the global device grid, including at DPR
+        // fractions; rounding the clip in a different origin changes its edge.
+        const view={x:region.x+x/scale,y:region.y+y/scale,width:drawWidth/scale,height:drawHeight/scale};
+        const key={view,scale,clipRect:item.clipRect,roundedClips:item.roundedClips};
+        let cached=clippedCanvasPixels.get(resource);
+        if(!cached||!Bun.deepEquals(cached.key,key)){
+          const surface=makeRasterSurface(CanvasKit,drawWidth,drawHeight);
+          if(!surface) return null;
+          try{
+            const canvas=surface.getCanvas();canvas.clear(CanvasKit.TRANSPARENT);
+            paintDisplayList(canvas,{...list,images:list.images,items:[item]},view,scale);
+            surface.flush();
+            const image=surface.makeImageSnapshot();
+            try{cached={key,pixels:rasterReadback.read(image,drawWidth,drawHeight,
+              {premultiplied:true,allocate:bytes=>new Uint8Array(bytes)})};}
+            finally{image.delete();}
+          }finally{surface.dispose();}
+          clippedCanvasPixels.set(resource,cached);
+        }
+        layers.push({pixels:cached.pixels,width:drawWidth,height:drawHeight,x,y,drawWidth,drawHeight});
+      }else{
+        let source=canvasPixels.get(resource);
+        if(!source){source=rasterReadback.read(resource.image,resource.width,resource.height,
+          {premultiplied:true,allocate:bytes=>new Uint8Array(bytes)});canvasPixels.set(resource,source);}
+        layers.push({pixels:source,width:resource.width,height:resource.height,x,y,drawWidth,drawHeight});
+      }
+    }
+    const composed=canvasComposer.compose(width,height,background,layers);
+    const pixels=allocateFramePixels?.(composed.length)
+      ??new Uint8Array(onFrame?new SharedArrayBuffer(composed.length):new ArrayBuffer(composed.length));
+    pixels.set(composed);return pixels;
+  }
+
+  /** Conservative canvas and plain-text 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.
@@ -754,9 +883,31 @@ function buildPageRenderer({
       || 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)
+      || old.items.length !== next.items.length
       || next.items.some(item => item.op === 'drawVideo')) return null;
     let damage = null;
+    const include = (r, pad = 1) => {
+      if (!r || ![r.x,r.y,r.width,r.height,pad].every(Number.isFinite) || r.width < 0 || r.height < 0) return false;
+      const left=r.x-pad,top=r.y-pad,right=r.x+r.width+pad,bottom=r.y+r.height+pad;
+      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 true;
+    };
+    for(let i=0;i<next.items.length;i++){
+      const before=old.items[i],after=next.items[i];
+      if(Bun.deepEquals(before,after))continue;
+      // Only the text and its measured width may change. Keep line position,
+      // font, clips and every effect identical; reflow/other changes repaint fully.
+      if(before.op!=='drawText'||after.op!=='drawText'||before.fixed||after.fixed
+        ||before.transform||after.transform||before.gradient||after.gradient)return null;
+      const {text:bt,textWidth:bw,bounds:bb,nodeId:bi,...a}=before;
+      const {text:at,textWidth:aw,bounds:ab,nodeId:ai,...b}=after;
+      if(!Bun.deepEquals(a,b))return null;
+      // Include overhangs and antialiasing outside advance widths, as well as
+      // the previous glyphs when the replacement string becomes shorter.
+      const pad=Math.max(2,before.font.size*2);
+      if(!include(bb,pad)||!include(ab,pad))return 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);
@@ -785,6 +936,18 @@ 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));
+    // Canvas snapshots are layers in Land's unmodified TS compositor. Static
+    // DOM below/above them is rasterized only when its own inputs change.
+    const direct = composeCanvasLayers(region,pixelWidth,pixelHeight);
+    if(direct){
+      rasterRegion=null;
+      page.needsPaint=false;
+      rasterized={list:page.displayList,overlay:overlayKey(),background:page.backgroundColor,scale,
+        scrollX:viewport.x,scrollY:viewport.y,frames:framesVersion};
+      trace?.(`${page.url}: direct canvas composition ${pixelWidth}x${pixelHeight}`);
+      return {pixels:direct,pixelWidth,pixelHeight,x:region.x,y:region.y,width:region.width,height:region.height,
+        scale,background:backgroundBytes(page.backgroundColor),videoLayer:null};
+    }
     // The independent compositor already reconstructs an opaque video from
     // black/white masks. Reuse that path for the ordinary tile too, avoiding
     // a large Skia image upscale and a second black pass on each UI repaint.
@@ -794,7 +957,7 @@ function buildPageRenderer({
     if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
       // MakeSurface owns a malloc-backed pixel buffer; delete() alone leaks it.
       rasterSurface?.dispose();
-      rasterSurface = CanvasKit.MakeSurface(pixelWidth, pixelHeight);
+      rasterSurface = makeRasterSurface(CanvasKit,pixelWidth,pixelHeight);
       rasterSurfaceWidth = pixelWidth;
       rasterSurfaceHeight = pixelHeight;
     }
@@ -817,7 +980,14 @@ function buildPageRenderer({
     surface.flush();
     const image = surface.makeImageSnapshot();
     let pixels;
-    try { pixels = rasterReadback.read(image, pixelWidth, pixelHeight); }
+    try {
+      const left=damage?Math.max(0,Math.floor((damage.x-region.x)*scale)):0;
+      const top=damage?Math.max(0,Math.floor((damage.y-region.y)*scale)):0;
+      const right=damage?Math.min(pixelWidth,Math.ceil((damage.right-region.x)*scale)):pixelWidth;
+      const bottom=damage?Math.min(pixelHeight,Math.ceil((damage.bottom-region.y)*scale)):pixelHeight;
+      pixels = rasterReadback.read(image, pixelWidth, pixelHeight, damage && lastTile
+        ? {previous:lastTile.pixels,region:{x:left,y:top,width:right-left,height:bottom-top}} : undefined);
+    }
     finally { image.delete(); }
     const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight, pixels, blackPlan?.resource);
     if (blackPlan && !videoLayer) {
@@ -920,7 +1090,7 @@ function buildPageRenderer({
   }
 
   /** A rendering opportunity for DOM changes nobody has asked to see yet. */
-  function scheduleFrame() {
+  function scheduleFrame(animation = false) {
     if (disposedRenderer || !onFrame || frameTimer || page.loading) return;
     frameTimer = hostSetTimeout(() => {
       frameTimer = null;
@@ -928,7 +1098,11 @@ function buildPageRenderer({
     // 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(renderMinInterval, lastRebuildMs * 2));
+    // A previous expensive reflow must not permanently throttle Canvas-only
+    // animation, which does not need another layout pass.
+    // CSS animation samples are already paced and must not inherit the
+    // mutation-settling delay, which skips most of a short drop/bounce.
+    }, Math.max(renderMinInterval, !animation && page.dirty ? lastRebuildMs * 2 : 0));
   }
 
   /** The viewport as an encoded image (base64), cut from the latest tile. */
@@ -988,8 +1162,8 @@ function buildPageRenderer({
         }
         // A scale in document space, as a device-space matrix around the item's device coordinates.
         if (item.transform) {
-          const { a, d, e, f } = item.transform;
-          canvas.concat([a, 0, ((a - 1) * view.x + e) * scale, 0, d, ((d - 1) * view.y + f) * scale, 0, 0, 1]);
+          const { a, b=0, c=0, d, e, f } = item.transform;
+          canvas.concat([a, c, ((a - 1) * view.x + c*view.y + e) * scale, b, d, (b*view.x + (d - 1) * view.y + f) * scale, 0, 0, 1]);
         }
         if (item.opacity < 1) {
           const layer = new CanvasKit.Paint();
@@ -1718,7 +1892,9 @@ function buildPageRenderer({
     if (page.document) loadImageResource.cancelDocument(page.document);
     resourceElements?.dispose();
     resetInputCaret();
+    lastAnimationPaint=-Infinity;
     rasterReadback.dispose();
+    canvasComposer.close();canvasLayers=null;canvasPixels=new WeakMap();clippedCanvasPixels=new WeakMap();
     clearPaintParagraphs();
     resetDocumentFonts();
     disposeFrames();
@@ -1727,13 +1903,14 @@ function buildPageRenderer({
     // qml handle begin: dispose application resources with their document
     page.document?.__qmlHost?.dispose();
     // qml handle end
+    cssAnimations.dispose();
     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;
+    pointerButtons = 0; suppressPointerMouse = false; pointerPresses.clear(); selectionDrag=null; htmlDrag=null;spaceDisclosureActivation=null;
     page.document = parsed.document;
     resourceElements = createResourceElements(parsed.document);
     computedSheets = null;
@@ -1750,11 +1927,13 @@ function buildPageRenderer({
     page.styleSheets = styleSheets;
     page.linkSheets = linkSheets;
     page.resources = imageResources.map;
+    for(const {element,src,resource} of imageResources.entries)finishImageLoad(element,src,resource);
     initializeVideos(parsed.document, page.resources);
     page.decodedImages = imageResources.decoded;
     page.imageElements = new Set(imageResources.entries.map(entry => entry.element));
     page.resourcePaintDirty = false;
     page.imagesLoaded = null;
+    page.scriptImages.clear();
     imageRequests = new WeakMap();
     page.elementScroll = new Map();
     const timing = styleAndLayout();
@@ -1808,6 +1987,7 @@ function buildPageRenderer({
       lastStyleParts = `changes ${Math.round(taken - started)}, no invalidation`;
       return { style: Math.round(taken - started), layout: 0, skipped: true, geometryUnchanged: true };
     }
+    cssAnimations.setSheets(sheets,environment);
     styleEngine.compute(page.document, sheets, environment, fullStyle ? null : changes?.roots ?? null, changes?.self ?? null);
     computedSheets = sheets;
     computedEnvironment = environmentKey;
@@ -1949,6 +2129,7 @@ function buildPageRenderer({
   function loadDocument(document) {
     if (disposedRenderer) return Promise.reject(new Error("Renderer has been disposed"));
     const generation = ++loadGeneration;
+    clipboardActivationUntil = 0;
     let commit;
     const committed = new Promise((resolve, reject) => {
       commit = { resolve: () => resolve(generation), reject };
@@ -1999,9 +2180,9 @@ function buildPageRenderer({
     }
     if (url === "about:blank") {
       replaceDocument("", url);
-      // An iframe's blank document is scripted from its page (through
-      // contentWindow and contentDocument), so it has a realm.
-      if (embedded && page.scripting !== "off") {
+      // Blank documents also need a realm for javascript: URLs, CDP evaluation
+      // and parent access through iframe.contentWindow/contentDocument.
+      if (page.scripting !== "off") {
         page.realm = createPageRealm({ window: page.window, document: page.document, mode: page.scripting, hooks: realmHooks(generation) });
         render();
         commit.resolve();
@@ -2379,6 +2560,30 @@ function buildPageRenderer({
     return to>from?{from,to}:null;
   }
 
+  let clipboardActivationUntil = 0;
+  let executingCopy = false;
+  function execCommand(command) {
+    if (command !== 'copy' || executingCopy || Date.now() > clipboardActivationUntil) return false;
+    executingCopy = true;
+    try {
+      const element = page.document.activeElement;
+      const target = element ?? page.document.body;
+      const event = new page.window.Event('copy', {bubbles:true,cancelable:true});
+      target?.dispatchEvent(event);
+      if (event.defaultPrevented) return true;
+      // Capture synchronously: the caller can remove its temporary textarea
+      // immediately after execCommand returns. Reuse the established frontend
+      // clipboard transport, which retains the host's user-action checks.
+      const text = isTextInput(element) && element.type !== 'password'
+        ? String(element.value).slice(element.selectionStart, element.selectionEnd)
+        : page.window.getSelection().toString();
+      if (!text) return false;
+      clipboardActivationUntil = 0;
+      Promise.resolve(clipboardWriteInput(text)).catch(reportError);
+      return true;
+    } finally { executingCopy = false; }
+  }
+
   function clipboardForInput(element,operation,backend={read:clipboardReadInput,write:clipboardWriteInput}) {
     return inputClipboard(element,operation,{...backend,replace:(text,type)=>{
       if(page.document.activeElement!==element)return;
@@ -2466,6 +2671,7 @@ function buildPageRenderer({
 
   function realmHooks(generation) {
     return {
+      decodeAudio: videoDecoder ? bytes => videoDecoder.decodeAudio(bytes) : null,
       frames: {
         self: ownWindow,
         parent: ownWindow.parent(),
@@ -2481,6 +2687,10 @@ function buildPageRenderer({
         scheduleFrame();
       },
       touch(node = null, stateFeatures = []) {
+        if(node?.tagName==='IMG')imageSourceChanged(node);
+        // HTML images load even when scripts keep them outside the DOM (e.g.
+        // canvas and WebGL textures). They remain document-owned resources.
+        if(node?.tagName==='IMG'&&!node.isConnected&&node.getAttribute('src'))page.scriptImages.add(node);
         if (stateFeatures.length) markStyleDirty(node, stateFeatures);
         page.dirty = true;
         scheduleFrame();
@@ -2526,6 +2736,7 @@ function buildPageRenderer({
         return renderCanvasText({ ...request, style,
           settings: { ...request.settings, direction: style.direction } });
       },
+      audio,
       mediaState,
       playMedia,
       pauseMedia,
@@ -2553,10 +2764,32 @@ function buildPageRenderer({
       whenImagesLoaded: () => Promise.all([page.imagesLoaded, documentFonts.ready(), ...[...page.backgrounds.values()].map((entry) => entry.loaded)]),
       selectionChanged(){selectionVersion++;page.needsPaint=true;scheduleFrame();},
       afterTask() {},
+      afterAnimationFrame() {
+        if(disposedRenderer||page.loading||!onFrame||page.dirty||!page.resourcePaintDirty||!page.needsPaint)return;
+        const now=hostPerformance.now();
+        if(now-lastAnimationPaint<renderMinInterval)return;
+        lastAnimationPaint=now;
+        hostClearTimeout(frameTimer);frameTimer=null;
+        refresh();
+      },
+      pickFile(element){void chooseInputFiles(element,dialog?.pickFiles,page.window).catch(error=>console.error(error));},
+      layoutBounds(element){if(page.dirty)rebuildRenderTree("script read layout geometry");const box=elementBox(page.renderTree,page.layout,element)?.box;return box?{left:box.x,top:box.y,width:box.width,height:box.height}:null;},
       boundsOf(element) {
         if (page.dirty) rebuildRenderTree("script read geometry");
         return viewportBounds(element);
       },
+      mouseOffset(target, x, y) {
+        if (page.dirty) rebuildRenderTree("script read mouse offset");
+        const element = target?.nodeType === 1 ? target : target?.parentElement;
+        const geometry=element && elementBox(page.renderTree,page.layout,element);
+        const hit=geometry && page.displayList?.hits.find(h=>h.nodeId===geometry.node.id && h.localRect);
+        const rect = element && viewportBounds(element);
+        if (!rect) return null;
+        if(hit?.transform){const p=inverseTransformPoint(hit.transform,x+(hit.fixed?0:viewport.x),y+(hit.fixed?0:viewport.y));x=p.x;y=p.y;rect.left=hit.localRect.x;rect.top=hit.localRect.y;}
+        // Offset coordinates are in the target's untransformed padding box.
+        const borders = styleEngine.get(element)?.borderWidths ?? [0, 0, 0, 0];
+        return { x: x - rect.left - borders[3], y: y - rect.top - borders[0] };
+      },
       viewport: () => ({
         width: page.width,
         height: page.height,
@@ -2645,6 +2878,9 @@ function buildPageRenderer({
       setDocumentCookie(value) {
         documentCookies.set(cookieUrl(), value);
       },
+      dialog,
+      execCommand,
+      copyEnabled: () => Date.now() <= clipboardActivationUntil,
       clipboardRead,
       clipboardWrite,
       webSockets,
@@ -2712,7 +2948,10 @@ function buildPageRenderer({
 
   /** The border box of an element's layout box in viewport coordinates. */
   function viewportBounds(element) {
-    const box = elementBox(page.renderTree, page.layout, element)?.box;
+    const geometry = elementBox(page.renderTree, page.layout, element);
+    const box = geometry?.box;
+    const hit=geometry && page.displayList?.hits.find(h=>h.nodeId===geometry.node.id && h.localRect);
+    if(hit?.transform){const r=transformRect(hit.transform,hit.localRect);return {left:r.x-(hit.fixed?0:viewport.x),top:r.y-(hit.fixed?0:viewport.y),width:r.width,height:r.height};}
     const content = box ? null : elementBounds(page.renderTree, page.layout, element);
     if (!box && !content) return null;
     let fixed = false;
@@ -2997,8 +3236,30 @@ function buildPageRenderer({
       return { x: viewport.x, y: viewport.y };
     },
     press(key, options = {}) {
+      clipboardActivationUntil = Date.now() + 5000;
+      if(key==='Escape' && htmlDrag?.active){htmlDrag.end(undefined,undefined,options,true);htmlDrag=null;pointerButtons=0;pointerPresses.clear();selectionDrag=null;suppressPointerMouse=false;refresh();return {x:viewport.x,y:viewport.y};}
       if (focusedFrame?.renderer) return focusedFrame.renderer.press(key, options);
-      refresh();
+      // A CDP key-up is an independent task, not another synthetic key press.
+      if (options.eventType === "keyup") {
+        const target=page.document?.activeElement??page.document?.body;
+        if(target&&page.realm){
+          const modifiers=Number(options.modifiers)||0;
+          const prevented=page.realm.dispatch(target,new page.window.KeyboardEvent("keyup",{
+            ...keyboardInput(key,options),bubbles:true,cancelable:true,
+            altKey:!!(modifiers&1),ctrlKey:!!(modifiers&2),metaKey:!!(modifiers&4),shiftKey:!!(modifiers&8),
+          }));
+          if(key===' '){
+            if(spaceDisclosureActivation?.deref()===target&&!prevented)activateDisclosure(target);
+            spaceDisclosureActivation=null;
+          }
+          if(page.dirty)refresh();
+          else if(page.needsPaint)scheduleFrame();
+        }
+        return {x:viewport.x,y:viewport.y};
+      }
+      // A held key's arrival must not force a second raster pass over an
+      // otherwise current Canvas-only page before delivering the event.
+      if(options.eventType!=="keydown"||page.dirty)refresh();
       const pianoInput = page.document?.activeElement;
       if (handlePianoInput(pianoInput, { ...options, key }, audio ? playPiano : null)) {
         return { x: viewport.x, y: viewport.y };
@@ -3036,10 +3297,23 @@ function buildPageRenderer({
           }
           else if (String(key).length === 1) editFocusedText(String(key));
         }
-        const upPrevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
-        if (activated && key === " " && !upPrevented) activateDisclosure(target);
+        if(options.eventType==='keydown'){
+          if(key===' ')spaceDisclosureActivation=activated?new WeakRef(target):null;
+        }else{
+          const upPrevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
+          if (activated && key === " " && !upPrevented) activateDisclosure(target);
+        }
+        if(options.eventType==='keydown'&&prevented&&!page.dirty){
+          if(page.needsPaint)scheduleFrame();
+          return {x:viewport.x,y:viewport.y};
+        }
         if (refresh() || prevented || activated || inputHandled) return { x: viewport.x, y: viewport.y };
       }
+      // CSS Overflow §3.3: root overflow applies to the viewport, with the
+      // HTML body's overflow propagated when the root has visible overflow.
+      // Hidden/clip must suppress keyboard scrolling, while scrollTo remains
+      // available for hidden overflow. A game's Space key is not special.
+      if (!viewportAllowsUserScroll("y")) return {x:viewport.x,y:viewport.y};
       const pageStep = Math.max(31, viewport.height - 31);
       const delta = {
         ArrowUp: -31,
@@ -3113,6 +3387,11 @@ function buildPageRenderer({
       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);
+      if (htmlDrag?.move(target,Number(x),Number(y),options)) {
+        selectionDrag=null;
+        if(page.dirty || page.needsPaint)scheduleFrame();
+        return;
+      }
       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();
@@ -3127,6 +3406,7 @@ function buildPageRenderer({
       return this.click(x, y, {...options, button: button === 273 ? 'right' : button === 274 ? 'middle' : 'left', phase: state ? 'down' : 'up'});
     },
     click(x, y, options = {}) {
+      clipboardActivationUntil = Date.now() + 5000;
       const detail = Number.isInteger(options.clickCount) && options.clickCount > 0 ? options.clickCount : 1;
       refresh();
       let region = hitTest(page.renderTree, page.layout, x, y, viewport, viewport);
@@ -3211,13 +3491,24 @@ function buildPageRenderer({
             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 === 0 && !prevented) {
+                focus();
+                let source=target;
+                while(source && !isDraggable(source))source=source.parentElement;
+                if(source)htmlDrag=new HTMLDrag(page.window,page.realm,source,Number(x),Number(y));
+              }
             }
             if (mouseButton === 2) page.realm.dispatch(target,new Pointer('contextmenu',pointer));
           } else if (mouseButton === 0) focus();
           refresh();
           return null;
         }
+        if(mouseButton===0 && htmlDrag){
+          const drag=htmlDrag;htmlDrag=null;
+          if(drag.end(Number(x),Number(y),options)){
+            pointerPresses.delete(mouseButton);selectionDrag=null;suppressPointerMouse=false;refresh();return null;
+          }
+        }
         let selectedByDrag=false;
         if(mouseButton===0){
           if(selectionDrag){extendDrag(x,y);selectedByDrag=!selectionDrag?.element&&!page.window.getSelection().isCollapsed;}
@@ -3287,6 +3578,7 @@ function buildPageRenderer({
         if (prevented) return null;
       }
       if (options.selectionDragged) return null;
+      if(target.tagName==='INPUT'&&target.type==='file'){void chooseInputFiles(target,dialog?.pickFiles,page.window).catch(error=>console.error(error));return null;}
       if (generatedDisclosure) {
         target.open = !target.open;
         refresh();
@@ -3386,6 +3678,7 @@ function buildPageRenderer({
       if (disposedRenderer) return;
       resetInputCaret();
       disposedRenderer = true;
+      cssAnimations.dispose();
       resourceElements?.dispose();
       resourceElements = null;
       loadGeneration++;
@@ -3402,6 +3695,7 @@ function buildPageRenderer({
       rasterSurface?.dispose();
       rasterSurface = null;
       rasterReadback.dispose();
+      canvasComposer.close();canvasLayers=null;canvasPixels=new WeakMap();clippedCanvasPixels=new WeakMap();
       clearPaintParagraphs();
       documentFonts.dispose();
       page.window?.happyDOM?.close?.();
@@ -3490,7 +3784,8 @@ function buildPageRenderer({
       beginImageLoad(element, src);
       try {
         const resource = await loadImageResource(document, new URL(src, element.baseURI || documentUrl).href, imageCrossOrigin(element));
-        finishImageLoad(element, src, resource);
+        // decode() resolves only once the renderer has installed these pixels
+        // (replaceParsedDocument/awaitImages), so drawImage can use them then.
         map.set(element, resource);
         decoded.push(resource.image);
         entries.push({ element, src, resource });
@@ -3562,6 +3857,7 @@ function buildPageRenderer({
       requestDownload,
       reportError,
       pageFetch,
+      dialog,
       clipboardRead,
       clipboardWrite,
       clipboardReadInput,
@@ -3738,6 +4034,15 @@ function buildPageRenderer({
     return buildDisplayList(page.layout, page.renderTree, page.resources, backgroundResource, scrollOffsetOf);
   }
 
+  function viewportAllowsUserScroll(axis) {
+    const root=styleEngine.get(page.document?.documentElement);
+    const body=styleEngine.get(page.document?.body);
+    const style=root?.overflowX==="visible"&&root?.overflowY==="visible"&&body?.display!=="none" ? body??root : root;
+    const overflow=axis==="x"?style?.overflowX:style?.overflowY;
+    const scrolling=axis==="x"?style?.overflowScrollX:style?.overflowScrollY;
+    return overflow!=="clip"||scrolling==="auto";
+  }
+
   function scrollOffsetOf(element) {
     return element ? page.elementScroll.get(element) ?? null : null;
   }
@@ -3954,7 +4259,7 @@ function buildPageRenderer({
   function mediaState(element) {
     const state = page.media.get(element);
     const decoder = state?.video?.decoder;
-    return { paused: !state?.playing, ended: Boolean(state?.ended), currentTime: state ? mediaTime(state) : 0,
+    return { paused: !state?.playing, ended: Boolean(state?.ended), currentTime: state ? presentedMediaTime(state) : 0,
       duration: state?.duration ?? NaN, videoWidth: decoder?.width || 0, videoHeight: decoder?.height || 0 };
   }
 
@@ -4162,6 +4467,15 @@ function buildPageRenderer({
     return Number.isFinite(state.duration) ? Math.min(state.duration, time) : time;
   }
 
+  // Keep the decode target clock separate from the observable playback
+  // position. A silent software decoder may lag behind real time; controls
+  // must describe the picture actually presented, not its catch-up target.
+  function presentedMediaTime(state) {
+    const target = mediaTime(state);
+    if (!state.playing || state.hasAudio || !state.video) return target;
+    return Math.min(target, Math.max(state.base, state.video.shownTime ?? state.base));
+  }
+
   /** Fires a media event (play, pause, ended, seeked, timeupdate...) at the element. */
   function mediaEvent(state, type) {
     if (state.document !== page.document || !page.realm) return;
@@ -4179,8 +4493,11 @@ function buildPageRenderer({
       && [...page.media.values()].some(state => state.video?.presentation && state.playing)) {
       // Another media element can still own a native progress/control bar.
       // Its mutable resource time is not a DOM mutation, so invalidate paint.
-      if (page.displayList?.items.some(item => item.op === "drawAudio"
-        || (item.op === "drawVideo" && item.controls))) {
+      const controlsTime = hostPerformance.now();
+      if (controlsTime - (page.lastMediaControlsPaint ?? -Infinity) >= 250
+        && page.displayList?.items.some(item => item.op === "drawAudio"
+          || (item.op === "drawVideo" && item.controls))) {
+        page.lastMediaControlsPaint = controlsTime;
         rasterized.list = null;
         page.needsPaint = true;
       }
@@ -4254,7 +4571,7 @@ function buildPageRenderer({
     void (async () => {
       let decoder;
       try {
-        decoder = await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url));
+        decoder = timeVideoDecoder(await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url)), bytes);
         if (!current()) { decoder.close(); decoder = null; failVideoContinuation(state, p); return; }
         if (decoder.width !== video.decoder.width || decoder.height !== video.decoder.height || decoder.fps !== video.decoder.fps)
           throw new Error("video snapshot configuration changed");
@@ -4301,7 +4618,7 @@ function buildPageRenderer({
     const state = [...page.media.values()].find(state => state.resource === resource);
     const frame = state?.video?.presentation?.frame;
     if (!frame?.opaque || !state.playing || state.video.done || state.buffering || state.presentationFailed
-      || state.document !== page.document || !state.element.isConnected || item.controls || item.fixed) return null;
+      || state.document !== page.document || !state.element.isConnected || item.fixed) return null;
     if (!videoLayerGeometry(item,region,page.deviceScaleFactor).replayable) return null;
     return {resource,frame};
   }
@@ -4312,9 +4629,9 @@ function buildPageRenderer({
     const item = items.length === 1 ? items[0] : null;
     const resource = item && page.displayList.images[item.image];
     const state = [...page.media.values()].find(state => state.resource === resource);
-    const eligible = state?.playing && state.video && !state.video.done && !state.buffering
-      && !state.presentationFailed && !item.controls && !item.fixed
-      && (!item.transform || (item.transform.a > 0 && item.transform.d > 0));
+    const eligible = state?.playing && state.video && Number.isFinite(state.video.shownTime) && !state.video.done && !state.buffering
+      && !state.presentationFailed && !item.fixed
+      && (!item.transform || (item.transform.a > 0 && item.transform.d > 0 && !item.transform.b && !item.transform.c));
     for (const other of page.media.values()) if (!eligible || other !== state) stopVideoPresentation(other);
     if (!eligible) return null;
     const video = state.video;
@@ -4615,13 +4932,17 @@ function buildPageRenderer({
     const bytes = selected?.bytes ?? snapshot(pipe, state.bytes);
     if (!bytes?.byteLength) throw new Error(`media ${state.url}: no video bytes`);
     state.video?.decoder.close();
-    const decoder = await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url));
+    const decoder = timeVideoDecoder(await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url)), bytes);
     state.video = { decoder, bytes, frameTime: selected?.startTime ?? 0, done: false, pipe, openedGeneration: generation,
       snapshotId: selected?.id, startTime: selected?.startTime ?? 0, endTime: selected?.endTime ?? Infinity };
     trace?.(`video decoded ${state.url}: ${decoder.width}x${decoder.height}`);
     if (state.resource.width !== decoder.width || state.resource.height !== decoder.height) {
-      state.resource.width = decoder.width;
-      state.resource.height = decoder.height;
+      // Intrinsic layout caches key resources by identity. Publish a new
+      // record on a size change; ordinary video-frame updates stay mutable.
+      state.resource = {...state.resource, width:decoder.width, height:decoder.height};
+      page.resources.set(state.element,state.resource);
+      // Metadata changes intrinsic sizing even when no DOM/CSS changed.
+      page.resourceLayoutDirty = true;
       page.dirty = true;
       refresh();
     }
@@ -4790,7 +5111,7 @@ function buildPageRenderer({
   function pauseMedia(element) {
     const state = page.media.get(element);
     if (!state?.playing) return;
-    state.base = mediaTime(state);
+    state.base = presentedMediaTime(state);
     trace?.(`media pause at ${state.base.toFixed(3)}s`);
     stopClock(state);
     state.needsPosition = true;
@@ -4823,7 +5144,7 @@ function buildPageRenderer({
       return;
     }
     if (wasPlaying && state.playing && state.document === page.document) startMedia(state);
-    state.resource.time = mediaTime(state);
+    state.resource.time = presentedMediaTime(state);
     repaintMedia();
     mediaEvent(state, "seeked");
     mediaEvent(state, "timeupdate");
@@ -5003,7 +5324,11 @@ function buildPageRenderer({
     } else if (video && !video.done && video.frameTime <= now) {
       // Late frames are decoded but only the newest is shown.
       const decodeDeadline = hostPerformance.now() + 100;
-      while (video.frameTime <= mediaTime(state) && !video.done) {
+      // A silent video uses a duration-clamped wall clock. Once it reaches
+      // the advertised duration, finish decoding rather than abandoning the
+      // tail (or waiting forever on rounding beyond that clock).
+      const drainSilentTail=!state.hasAudio&&Number.isFinite(state.duration)&&now>=state.duration;
+      while ((video.frameTime <= mediaTime(state)||drainSilentTail) && !video.done) {
         const current = mediaTime(state);
         const nextIsLate = video.frameTime + 1 / (video.decoder.fps || 30) <= current;
         // If this tick has spent its decode budget, decode one final frame
@@ -5016,7 +5341,7 @@ function buildPageRenderer({
         const reached = video.frameTime + 1e-6 >= (video.hideUntil ?? 0);
         let step;
         try {
-          step = drawVideoFrame(state, reached && (!nextIsLate || yielding));
+          step = drawVideoFrame(state, reached && (!Number.isFinite(video.shownTime) || !nextIsLate || yielding));
         } catch (error) {
           failMedia(state, error, 3);
           return;
@@ -5029,17 +5354,18 @@ function buildPageRenderer({
         // Keep tasks responsive even when software decoding is slower than
         // real time. The zero-delay continuation resumes catching up against
         // a freshly read clock instead of accumulating this task's duration.
-        if (yielding && video.frameTime <= mediaTime(state)) break;
+        if (yielding && (video.frameTime <= mediaTime(state)||drainSilentTail)) break;
       }
     }
-    state.resource.time = now;
+    const presented = presentedMediaTime(state);
+    state.resource.time = presented;
     if (!state.buffering && !state.awaitingAudio) {
       playbackEvent(state, "playing", mediaEvent);
       if (!state.playing) return;
     }
     repaintMedia();
-    if (Math.floor(now * 4) !== state.lastTimeUpdate) {
-      state.lastTimeUpdate = Math.floor(now * 4);
+    if (Math.floor(presented * 4) !== state.lastTimeUpdate) {
+      state.lastTimeUpdate = Math.floor(presented * 4);
       mediaEvent(state, "timeupdate");
     }
     const videoFinished = !video || video.done;
@@ -5062,7 +5388,9 @@ function buildPageRenderer({
       void refillMedia(state, stalled);
       return;
     }
-    if ((videoFinished && soundFinished) || (pastEnd && soundFinished)) return endMedia(state);
+    // Silent software decoding can lag behind wall time. Do not replace an
+    // unfinished picture with ended solely because its duration elapsed.
+    if ((videoFinished && soundFinished) || (pastEnd && soundFinished && state.hasAudio)) return endMedia(state);
     const delay = video && !video.done ? Math.max(0, (video.frameTime - mediaTime(state)) * 1000) : 250;
     state.timer = hostSetTimeout(() => mediaTick(state), delay);
   }
@@ -5085,11 +5413,22 @@ function buildPageRenderer({
       if (needsMore(video)) return "stall";
       throw error;
     }
-    if (!pixels) return needsMore(video) ? "stall" : false;
-    const shownTime = state.video.frameTime;
-    state.video.frameTime += 1 / (decoder.fps || 30);
-    if (!show) return true;
-    state.video.shownTime = shownTime;
+    if (!pixels) {
+      if(needsMore(video))return "stall";
+      // Late intermediate frames may be skipped, but EOF must retain the
+      // last decoded picture rather than whichever older frame was painted.
+      if(video.pendingFrame){paintDecodedVideoFrame(state,video.pendingFrame);video.pendingFrame=null;}
+      return false;
+    }
+    const shownTime = decoder.frameTime ?? state.video.frameTime;
+    state.video.frameTime = decoder.nextFrameTime ?? (state.video.frameTime + 1 / (decoder.fps || 30));
+    if (!show) {video.pendingFrame={pixels,width,height,time:shownTime};return true;}
+    video.pendingFrame=null;
+    return paintDecodedVideoFrame(state,{pixels,width,height,time:shownTime});
+  }
+
+  function paintDecodedVideoFrame(state,{pixels,width,height,time}) {
+    state.video.shownTime = time;
     const image = CanvasKit.MakeImage({ width, height, alphaType: CanvasKit.AlphaType.Unpremul,
       colorType: CanvasKit.ColorType.RGBA_8888, colorSpace: CanvasKit.ColorSpace.SRGB }, pixels, width * 4);
     if (!image) return true;
@@ -5438,6 +5777,11 @@ function buildPageRenderer({
 
   function endMedia(state) {
     stopClock(state);
+    // Ended elements can remain reachable indefinitely (e.g. game effects).
+    // Keep metadata and the final video image, but release the bounded WASM
+    // audio session; loadMedia recreates it for a later play or seek.
+    state.sound?.decoder.close();
+    state.sound = null;
     state.ended = true;
     state.base = Number.isFinite(state.duration) ? state.duration : state.base;
     setMediaPlaying(state, false);
@@ -5448,7 +5792,7 @@ function buildPageRenderer({
   function setMediaPlaying(state, playing) {
     state.playing = playing;
     state.resource.playing = playing;
-    state.resource.time = mediaTime(state);
+    state.resource.time = presentedMediaTime(state);
     if (state.document === page.document) repaintMedia();
   }
 
@@ -5548,7 +5892,7 @@ function buildPageRenderer({
     // Infinite feeds remove old DOM images without navigating. The resource
     // WeakMap alone cannot release their explicitly-owned Skia handles.
     for (const element of page.imageElements) {
-      if (element.isConnected && element.ownerDocument === document && element.getAttribute("src")) continue;
+      if ((element.isConnected || page.scriptImages.has(element)) && element.ownerDocument === document && element.getAttribute("src")) continue;
       const image = page.resources.get(element)?.image;
       if (image) {
         staleImages.push(image);
@@ -5558,13 +5902,17 @@ function buildPageRenderer({
       page.imageElements.delete(element);
       imageRequests.delete(element);
     }
-    for (const element of resourceElements.get("images")) {
+    for (const element of new Set([...resourceElements.get("images"),...page.scriptImages])) {
       const src = element.getAttribute("src");
       const credentials = imageCrossOrigin(element);
       const key = imageRequestKey(src, credentials);
       if (!src || imageRequests.get(element) === key) continue;
       let url;
-      try { url = new URL(src, element.baseURI || page.url).href; } catch { continue; }
+      try { url = new URL(src, element.baseURI || page.url).href; } catch {
+        imageRequests.set(element,key);
+        finishImageLoad(element,src,null,type=>element.dispatchEvent(new page.window.Event(type)));
+        continue;
+      }
       const existing = page.resources.get(element);
       if (existing?.requestedURL === url && existing.crossOrigin === credentials) {
         imageRequests.set(element, key);