buninu-browser 0.2.3 → 0.3.0

package/lib/paint/display-list.js

@@ -16,6 +16,7 @@
  * array so `JSON.stringify(displayList)` stays a plain debug/reftest dump.
  */
 import { backgroundLayers, gradientLayers, isGradient, resolveGradient, splitTopLevel } from "./gradient.js";
+import { insetRadii, mapRadii, resolveCornerRadii as cornerRadii, scaleRadii } from "./rounded-rect.js";
 
 const TRANSPARENT = "rgba(0, 0, 0, 0)";
 const CSS_URL = /^url\(\s*(["']?)(.*?)\1\s*\)$/is;
@@ -126,9 +127,8 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         op: "drawShadow",
         nodeId: box.nodeId,
         rect: shadowRect,
-        radii: radii.x > 0 || radii.y > 0
-          ? { x: Math.max(0, radii.x + shadow.spread), y: Math.max(0, radii.y + shadow.spread) }
-          : radii,
+        radii: mapRadii(radii, (x, y) => x > 0 || y > 0
+          ? [Math.max(0, x + shadow.spread), Math.max(0, y + shadow.spread)] : [x, y]),
         blur: shadow.blur,
         color: shadow.color,
         // The shadow is clipped out of the casting box's own border box.
@@ -240,6 +240,8 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
           family: run.style?.fontFamily ?? ["sans-serif"],
           size: run.style?.fontSize ?? 16,
           weight: run.style?.fontWeight ?? 400,
+          style: run.style?.fontStyle ?? "normal",
+          stretch: run.style?.fontStretch ?? 100,
         },
         color: run.style?.color ?? "rgba(0, 0, 0, 1)",
         ...(run.style?.textDecorations ? { decoration: run.style.textDecorations } : {}),
@@ -404,11 +406,9 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
           const positioned = style.position && style.position !== "static";
           if (!escaping || positioned) {
             const clip = overflowClip(node);
-            const radii = clip ? cornerRadii(style, boxes.get(node.id)) : null;
+            let radii = clip ? cornerRadii(style, boxes.get(node.id)) : null;
             if (radii) {
-              const [top, right, bottom, left] = style.borderWidths ?? [0, 0, 0, 0];
-              radii.x = Math.max(0, radii.x - Math.max(left, right));
-              radii.y = Math.max(0, radii.y - Math.max(top, bottom));
+              radii = insetRadii(radii, style.borderWidths ?? [0, 0, 0, 0]);
             }
             clips.push([node, clip, radii]);
             if (isScroller(style)) {
@@ -443,8 +443,7 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
         const rect = clip && matrix ? transformRect(matrix, clip) : clip;
         clipRect = intersectRects(clipRect, rect);
         if (rect && radii && (radii.x > 0 || radii.y > 0)) {
-          roundedClips.push({ rect, radii: matrix
-            ? { x: radii.x * Math.abs(matrix.a), y: radii.y * Math.abs(matrix.d) } : radii });
+          roundedClips.push({ rect, radii: matrix ? scaleRadii(radii, matrix.a, matrix.d) : radii });
         }
       }
       // The owner's own box moves with every scroll container above it, not with its own.
@@ -531,25 +530,6 @@ export function visibleItems(displayList, rect, fixedOffset = { x: 0, y: 0 }) {
   });
 }
 
-/**
- * Resolves border-radius to one elliptical radius for every corner.
- * Percentages refer to the border box's width (x) and height (y); radii that
- * would overlap are scaled down together (CSS Backgrounds 3 §5.5).
- */
-function cornerRadii(style, rect) {
-  const value = style?.borderRadius;
-  let x = 0;
-  let y = 0;
-  if (value?.unit === "%") {
-    x = rect.width * value.value / 100;
-    y = rect.height * value.value / 100;
-  } else if (value > 0) {
-    x = y = value;
-  }
-  const scale = Math.min(1, x > 0 ? rect.width / (2 * x) : 1, y > 0 ? rect.height / (2 * y) : 1);
-  return { x: x * scale, y: y * scale };
-}
-
 /**
  * Where one background image layer's tiles go (CSS Backgrounds 3 §3): sized
  * and positioned in the padding box, repeated per background-repeat, painted

package/lib/paint/frame-cache.js

@@ -0,0 +1,25 @@
+/**
+ * Retains one encoded frame, including an encode still in progress. Multiple
+ * CDP clients asking for the same frame share that work. Older encodes may
+ * finish after a newer one, but must not replace its cache entry.
+ */
+export class FrameCaptureCache {
+  #entry = null;
+
+  get(key, capture) {
+    if (this.#entry?.key === key) return this.#entry.promise;
+    const entry = { key, promise: null };
+    this.#entry = entry;
+    try {
+      entry.promise = Promise.resolve(capture());
+    } catch (error) {
+      entry.promise = Promise.reject(error);
+    }
+    entry.promise = entry.promise.catch((error) => {
+      // A transient encoder failure must not poison subsequent captures.
+      if (this.#entry === entry) this.#entry = null;
+      throw error;
+    });
+    return entry.promise;
+  }
+}

package/lib/paint/frame.js

@@ -11,21 +11,32 @@
  * The viewport's device pixels at a scroll position. Parts of the viewport
  * the tile does not cover show the page background, as Chrome's compositor
  * shows a checkerboard until the missing tiles are rasterized.
+ * The returned pixels may be a view of the immutable tile. Callers must not
+ * modify them, including while an asynchronous image encoder is using them.
  * @returns {{ pixels: Uint8Array, width: number, height: number }}
  */
-export function cropViewport(tile, scrollX, scrollY, viewportWidth, viewportHeight) {
+export function cropViewport(tile, scrollX, scrollY, viewportWidth, viewportHeight, exact = false) {
   const scale = tile.scale;
-  const width = Math.max(1, Math.round(Math.floor(viewportWidth) * scale));
-  const height = Math.max(1, Math.round(Math.floor(viewportHeight) * scale));
-  const pixels = new Uint8Array(width * height * 4);
-  const [red, green, blue, alpha] = tile.background ?? [255, 255, 255, 255];
-  const fill = new Uint8Array([red, green, blue, alpha]);
+  const width = Math.max(1, Math.round((exact ? viewportWidth : Math.floor(viewportWidth)) * scale));
+  const height = Math.max(1, Math.round((exact ? viewportHeight : Math.floor(viewportHeight)) * scale));
   const offsetX = Math.round((scrollX - tile.x) * scale);
   const offsetY = Math.round((scrollY - tile.y) * scale);
+  // Raster tiles are normally viewport-wide. A full-width crop is already
+  // contiguous RGBA, including a viewport cut out of a taller prepaint tile.
+  if (offsetX === 0 && width === tile.pixelWidth && offsetY >= 0 && offsetY + height <= tile.pixelHeight) {
+    const start = offsetY * width * 4;
+    return { pixels: tile.pixels.subarray(start, start + width * height * 4), width, height };
+  }
+  const pixels = new Uint8Array(width * height * 4);
   const fromX = Math.max(0, -offsetX);
   const toX = Math.min(width, tile.pixelWidth - offsetX);
-  const rowFill = new Uint8Array(width * 4);
-  for (let index = 0; index < width; index++) rowFill.set(fill, index * 4);
+  // Background is only needed when the crop extends outside the raster tile.
+  let rowFill = null;
+  if (fromX > 0 || toX < width || offsetY < 0 || offsetY + height > tile.pixelHeight) {
+    const fill = new Uint8Array(tile.background ?? [255, 255, 255, 255]);
+    rowFill = new Uint8Array(width * 4);
+    new Uint32Array(rowFill.buffer).fill(new Uint32Array(fill.buffer)[0]);
+  }
   for (let row = 0; row < height; row++) {
     const sourceRow = row + offsetY;
     const target = row * width * 4;
@@ -44,15 +55,33 @@ const IMAGE_FORMATS = new Set(["png", "jpeg", "webp"]);
 
 /**
  * Encodes RGBA pixels with Bun.Image. Bun.Image does not read raw pixels, so
- * they are wrapped in an uncompressed BMP first (header only, no copying of
- * rows or channels).
- * @param {{ format?: "png" | "jpeg" | "webp", quality?: number }} options
+ * they are wrapped in an uncompressed BMP first. This copies the contiguous
+ * pixel bytes once to add the header, without converting channels or rows.
+ * @param {{ format?: "png" | "jpeg" | "webp", quality?: number, optimizeForSpeed?: boolean }} options
  */
-export async function encodeImage(pixels, width, height, { format = "png", quality = 80 } = {}) {
-  const image = new Bun.Image(rgbaBitmap(pixels, width, height));
-  const kind = IMAGE_FORMATS.has(format) ? format : "png";
-  const level = Math.min(100, Math.max(0, Number.isFinite(quality) ? quality : 80));
-  return kind === "png" ? image.png().bytes() : image[kind]({ quality: level }).bytes();
+export async function encodeImage(pixels, width, height, { format = "png", quality = 80, optimizeForSpeed = false } = {}) {
+  return encodePixels(pixels, width, height, format, quality, optimizeForSpeed, "bytes");
+}
+
+/** CDP needs base64; let Bun produce it without copying encoded bytes into a Buffer. */
+export async function encodeImageBase64(pixels, width, height, { format = "png", quality = 80, optimizeForSpeed = false } = {}) {
+  return encodePixels(pixels, width, height, format, quality, optimizeForSpeed, "toBase64");
+}
+
+async function encodePixels(pixels, width, height, format, quality, optimizeForSpeed, terminal) {
+  const bitmap = rgbaBitmap(pixels, width, height);
+  try {
+    const image = new Bun.Image(bitmap);
+    const kind = IMAGE_FORMATS.has(format) ? format : "png";
+    const level = Math.min(100, Math.max(0, Number.isFinite(quality) ? quality : 80));
+    const pipeline = kind === "png" ? image.png(optimizeForSpeed ? { compressionLevel: 3 } : undefined) : image[kind]({ quality: level });
+    return await pipeline[terminal]();
+  } finally {
+    // Bun.Image borrows input until its terminal settles. Release only this
+    // owned temporary afterwards, instead of waiting for a large-heap GC.
+    // The caller's pixels and the encoded output remain independent.
+    bitmap.buffer.transfer(0);
+  }
 }
 
 /** A 32-bit BMP (BITMAPV4HEADER, BI_BITFIELDS in RGBA byte order, top-down rows) around RGBA pixels. */
@@ -86,3 +115,35 @@ export function backgroundBytes(color) {
   if (!match) return [255, 255, 255, 255];
   return [Number(match[1]), Number(match[2]), Number(match[3]), Math.round(Number(match[4] ?? 1) * 255)];
 }
+
+/** Raw screenshot payload, owned independently of a recyclable raster tile. */
+export function rawFrame(pixels, width, height, format) {
+  if (!['rgba', 'bgra'].includes(format) || width * height > 16777216) throw Error('Invalid raw screenshot');
+  const data = new Uint8Array(pixels);
+  if (format === 'bgra') {
+    for (let i=0; i<data.length; i+=4) { const red=data[i]; data[i]=data[i+2]; data[i+2]=red; }
+  }
+  return {format, width, height, pixels:data};
+}
+
+// CDP clip coordinates are document CSS pixels, not viewport-relative pixels.
+export function captureViewport(tile, x, y, width, height, clip) {
+  if (!clip) return cropViewport(tile,x,y,width,height);
+  if (![clip.x,clip.y,clip.width,clip.height,clip.scale].every(Number.isFinite)
+      || clip.width<=0 || clip.height<=0 || clip.scale<=0 || clip.scale>8)
+    throw Error('Invalid screenshot clip');
+  const w=Math.max(1,Math.round(clip.width*tile.scale*clip.scale));
+  const h=Math.max(1,Math.round(clip.height*tile.scale*clip.scale));
+  const sourceW=Math.max(1,Math.round(clip.width*tile.scale));
+  const sourceH=Math.max(1,Math.round(clip.height*tile.scale));
+  if(Math.max(w,h,sourceW,sourceH)>8192 || w*h>16777216 || sourceW*sourceH>16777216)
+    throw Error('Invalid screenshot clip size');
+  const frame=cropViewport(tile,clip.x,clip.y,clip.width,clip.height,true);
+  if(clip.scale===1)return frame;
+  const pixels=new Uint8Array(w*h*4);
+  for(let row=0;row<h;row++)for(let col=0;col<w;col++) {
+    const from=(Math.min(frame.height-1,Math.floor(row/clip.scale))*frame.width+Math.min(frame.width-1,Math.floor(col/clip.scale)))*4;
+    pixels.set(frame.pixels.subarray(from,from+4),(row*w+col)*4);
+  }
+  return {pixels,width:w,height:h};
+}

package/lib/paint/paragraph-text.js

@@ -0,0 +1,24 @@
+// SkParagraph can shape a whole text run in one call. Only emoji need a
+// different fallback order; ordinary text must stay together for shaping.
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const hasEmojiPresentation = /\p{Emoji_Presentation}|\uFE0F/u;
+const startsEmojiPresentation = /^\p{Emoji_Presentation}/u;
+
+/** Append text with the emoji font preference applied to entire graphemes. */
+export function appendParagraphText(builder, text, emojiStyle) {
+  text ||= " ";
+  if (!hasEmojiPresentation.test(text)) {
+    builder.addText(text);
+    return;
+  }
+  let start = 0;
+  for (const { segment, index } of graphemes.segment(text)) {
+    if (!startsEmojiPresentation.test(segment) && !segment.includes("\uFE0F")) continue;
+    if (index > start) builder.addText(text.slice(start, index));
+    builder.pushStyle(emojiStyle());
+    builder.addText(segment);
+    builder.pop();
+    start = index + segment.length;
+  }
+  if (start < text.length) builder.addText(text.slice(start));
+}

package/lib/paint/raster-readback.js

@@ -0,0 +1,41 @@
+/**
+ * A reusable native readback buffer and immutable JavaScript pixel snapshots.
+ * Shared snapshots cross the renderer/compositor worker boundary without
+ * copying another full raster tile. Each snapshot owns its buffer: encoding
+ * an old frame can safely overlap painting the next one.
+ */
+export class RasterReadback {
+  #kit;
+  #shared;
+  #scratch = null;
+  #allocate;
+
+  constructor(kit, { shared = false, allocate = null } = {}) {
+    this.#kit = kit;
+    this.#shared = shared;
+    this.#allocate = allocate;
+  }
+
+  read(image, width, height) {
+    const kit = this.#kit;
+    const bytes = width * height * 4;
+    if (!this.#scratch || this.#scratch.length < bytes) {
+      this.dispose();
+      this.#scratch = kit.Malloc(Uint8Array, bytes);
+    }
+    const native = image.readPixels(0, 0, {
+      width, height, colorType: kit.ColorType.RGBA_8888,
+      alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB,
+    }, this.#scratch, width * 4);
+    if (!native) throw new Error("Unable to read raster pixels");
+    const pixels = this.#allocate ? this.#allocate(bytes)
+      : new Uint8Array(this.#shared ? new SharedArrayBuffer(bytes) : new ArrayBuffer(bytes));
+    pixels.set(native.subarray(0, bytes));
+    return pixels;
+  }
+
+  dispose() {
+    if (this.#scratch) this.#kit.Free(this.#scratch);
+    this.#scratch = null;
+  }
+}

package/lib/paint/raw-frames.js

@@ -0,0 +1,47 @@
+import {mkdtempSync,writeFileSync,readdirSync,statSync,unlinkSync,rmSync,realpathSync} from 'node:fs';
+import {join} from 'node:path';
+import {tmpdir} from 'node:os';
+
+// The producer owns the directory; Kitty t=t consumers unlink individual frames.
+// A worker borrows a directory owned by its parent, so terminating the worker
+// cannot skip cleanup. No pixel data is encoded into the CDP response.
+export class RawFrames {
+  constructor({directory,ownsDirectory=true}={}) {
+    this.externalDirectory=directory;this.ownsDirectory=ownsDirectory;
+    this.sequence=0;this.closed=false;
+    this.onExit=()=>this.close();
+  }
+  get directory() {
+    if(this.closed)throw Error('Raw frame store is closed');
+    if(!this.path){
+      this.path=this.externalDirectory ? this.externalDirectory() : realpathSync(mkdtempSync(join(tmpdir(),'tty-graphics-protocol-browser-')));
+      if(!this.path)throw Error('Missing raw frame directory');
+      if(this.ownsDirectory)process.once('exit',this.onExit);
+    }
+    return this.path;
+  }
+  write(bytes,width,height,format) {
+    if (!['rgba','bgra'].includes(format) || !Number.isInteger(width) || !Number.isInteger(height)
+        || width<1 || height<1 || width*height>16777216 || !(bytes instanceof Uint8Array)
+        || bytes.byteLength!==width*height*4) throw Error('Invalid raw frame');
+    const directory=this.directory;
+    let count=0,total=0;
+    for(const name of readdirSync(directory)){
+      const path=join(directory,name);
+      try{
+        const stat=statSync(path);
+        if(Date.now()-stat.mtimeMs>60000){unlinkSync(path);continue;}
+        count++;total+=stat.size;
+      }catch(error){if(error.code!=='ENOENT')throw error;}
+    }
+    if(count>=16||total+bytes.byteLength>128*1024*1024)throw Error('Raw frame consumer stalled');
+    const path=join(directory,`${++this.sequence}.${format}`);
+    writeFileSync(path,bytes,{flag:'wx',mode:0o600});
+    return JSON.stringify({version:1,transport:'file',path,width,height,stride:width*4,format,bytes:bytes.byteLength});
+  }
+  close(){
+    if(this.closed)return;this.closed=true;
+    process.removeListener('exit',this.onExit);
+    if(this.ownsDirectory&&this.path)rmSync(this.path,{recursive:true,force:true});
+  }
+}

package/lib/paint/rounded-rect.js

@@ -0,0 +1,82 @@
+const FIELDS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"];
+const SQUARE = Object.freeze({ x: 0, y: 0 });
+
+/** Clockwise corner pairs, starting at the top left. */
+export function radiusPairs(radii) {
+  return radii?.corners ?? Array.from({ length: 4 }, () => [radii?.x ?? 0, radii?.y ?? 0]);
+}
+
+function compact(pairs) {
+  const [x, y] = pairs[0];
+  return pairs.every(pair => pair[0] === x && pair[1] === y) ? { x, y }
+    : { x: Math.max(...pairs.map(pair => pair[0])), y: Math.max(...pairs.map(pair => pair[1])), corners: pairs };
+}
+
+export function mapRadii(radii, map) {
+  return compact(radiusPairs(radii).map(([x, y], index) => map(x, y, index)));
+}
+
+export function insetRadii(radii, [top, right, bottom, left]) {
+  if (!radii || !(radii.x > 0 || radii.y > 0)) return SQUARE;
+  const horizontal = [left, right, right, left], vertical = [top, top, bottom, bottom];
+  return mapRadii(radii, (x, y, index) => [Math.max(0, x - horizontal[index]),
+    Math.max(0, y - vertical[index])]);
+}
+
+export function scaleRadii(radii, x, y) {
+  let pairs = radiusPairs(radii).map(pair => [pair[0] * Math.abs(x), pair[1] * Math.abs(y)]);
+  if (x < 0) pairs = [pairs[1], pairs[0], pairs[3], pairs[2]];
+  if (y < 0) pairs = [pairs[3], pairs[2], pairs[1], pairs[0]];
+  return compact(pairs);
+}
+
+/** CanvasKit's twelve-float rounded rectangle, with independent elliptic corners. */
+export function roundedRect(rect, radii, scale = 1) {
+  const result = new Float32Array(12);
+  result.set(rect);
+  if (!radii?.corners) {
+    const x = (radii?.x ?? 0) * scale, y = (radii?.y ?? 0) * scale;
+    for (let i = 4; i < 12; i += 2) { result[i] = x; result[i + 1] = y; }
+    return result;
+  }
+  const pairs = radii.corners;
+  for (let i = 0; i < 4; i++) {
+    result[4 + i * 2] = pairs[i][0] * scale;
+    result[5 + i * 2] = pairs[i][1] * scale;
+  }
+  return result;
+}
+
+/** CSS Backgrounds §5.5: all radii share one overlap-reduction factor. */
+export function resolveCornerRadii(style, rect) {
+  const first = style?.[FIELDS[0]];
+  if (first && FIELDS.every(field => style[field] === first)) {
+    const x = Math.max(0, length(first[0], rect.width));
+    const y = Math.max(0, length(first[1], rect.height));
+    if (!(x > 0 || y > 0)) return SQUARE;
+    const factor = Math.min(1, ratio(rect.width, x * 2), ratio(rect.height, y * 2));
+    return { x: x * factor, y: y * factor };
+  }
+  const pairs = FIELDS.map(field => {
+    const [x, y] = style?.[field] ?? [style?.borderRadius ?? 0, style?.borderRadius ?? 0];
+    return [Math.max(0, length(x, rect.width)), Math.max(0, length(y, rect.height))];
+  });
+  const [tl, tr, br, bl] = pairs;
+  const factor = Math.min(1, ratio(rect.width, tl[0] + tr[0]), ratio(rect.width, bl[0] + br[0]),
+    ratio(rect.height, tl[1] + bl[1]), ratio(rect.height, tr[1] + br[1]));
+  return compact(pairs.map(pair => pair.map(value => value * factor)));
+}
+
+const ratio = (size, sum) => sum > 0 ? Math.max(0, size) / sum : 1;
+function length(value, reference) {
+  if (typeof value === "number") return value;
+  if (value?.unit === "%") return reference * value.value / 100;
+  if (value?.unit === "math") {
+    if (value.kind === "calc") return value.px + reference * value.percent / 100;
+    const values = value.values.map(part => length(part, reference));
+    if (value.kind === "min") return Math.min(...values);
+    if (value.kind === "max") return Math.max(...values);
+    if (value.kind === "clamp") return Math.max(values[0], Math.min(values[1], values[2]));
+  }
+  return 0;
+}

package/lib/paint/shared-frame-pool.js

@@ -0,0 +1,105 @@
+/**
+ * Pixel buffers may be reused only after both the renderer's current tile and
+ * every compositor lease have let go. The idle cache is bounded; in-flight
+ * screenshots keep their own leases until their asynchronous encoder finishes.
+ */
+export class SharedFramePool {
+  #records = new WeakMap();
+  #leases = new Map();
+  #current = null;
+  #idle = [];
+  #idleBytes = 0;
+  #maxBuffers;
+  #maxBytes;
+
+  constructor({ maxBuffers = 3, maxBytes = 64 * 1024 * 1024 } = {}) {
+    this.#maxBuffers = maxBuffers;
+    this.#maxBytes = maxBytes;
+  }
+
+  acquire(bytes) {
+    let index = this.#idle.findIndex(record => record.buffer.byteLength === bytes);
+    if (index < 0) index = this.#idle.findIndex(record => record.buffer.byteLength >= bytes && record.buffer.byteLength <= bytes * 2);
+    let record;
+    if (index >= 0) {
+      [record] = this.#idle.splice(index, 1);
+      this.#idleBytes -= record.buffer.byteLength;
+      record.idle = false;
+    } else {
+      record = { buffer: new SharedArrayBuffer(bytes), leases: 0, idle: false };
+      this.#records.set(record.buffer, record);
+    }
+    return new Uint8Array(record.buffer, 0, bytes);
+  }
+
+  publish(serial, pixels) {
+    const record = this.#records.get(pixels.buffer);
+    if (!record) throw new Error("Published pixels do not belong to the shared frame pool");
+    const previous = this.#current;
+    this.#current = record;
+    record.leases++;
+    this.#leases.set(serial, record);
+    if (previous !== record) this.#recycle(previous);
+  }
+
+  release(serial) {
+    const record = this.#leases.get(serial);
+    if (!record) return;
+    this.#leases.delete(serial);
+    record.leases--;
+    this.#recycle(record);
+  }
+
+  #recycle(record) {
+    if (!record || record === this.#current || record.leases || record.idle) return;
+    if (this.#maxBuffers <= 0 || record.buffer.byteLength > this.#maxBytes) return;
+    // Keep the sizes the renderer is using now. Startup/small viewport
+    // buffers must not permanently occupy every slot after a resize.
+    while (this.#idle.length >= this.#maxBuffers || this.#idleBytes + record.buffer.byteLength > this.#maxBytes) {
+      const old = this.#idle.shift();
+      old.idle = false;
+      this.#idleBytes -= old.buffer.byteLength;
+    }
+    record.idle = true;
+    this.#idle.push(record);
+    this.#idleBytes += record.buffer.byteLength;
+  }
+
+  clear() {
+    // Dropping an owner never makes outstanding pixels available for reuse.
+    this.#records = new WeakMap();
+    this.#leases.clear();
+    this.#current = null;
+    this.#idle = [];
+    this.#idleBytes = 0;
+  }
+}
+
+/** Compositor-side leases, independent of renderer frame acknowledgement. */
+export class FrameLeaseTracker {
+  #current = null;
+  #released;
+
+  constructor(released) { this.#released = released; }
+
+  replace(serial, frame) {
+    const previous = this.#current;
+    this.#current = { serial, frame, readers: 0, retired: false };
+    if (previous) { previous.retired = true; this.#release(previous); }
+  }
+
+  async capture(read) {
+    const lease = this.#current;
+    if (!lease) return read(null);
+    lease.readers++;
+    try { return await read(lease.frame); }
+    finally { lease.readers--; this.#release(lease); }
+  }
+
+  #release(lease) {
+    if (lease.retired && !lease.readers) {
+      lease.retired = false;
+      this.#released(lease.serial);
+    }
+  }
+}

package/lib/render-tree/index.js

@@ -1,8 +1,10 @@
 import { extractSvg } from "./svg.js";
-import { controlKind } from "../style/computed-style.js";
+import { computeElementStyle, controlKind } from "../style/computed-style.js";
 
 const PLACEHOLDER_COLOR = "rgba(117, 117, 117, 1)";
 const CHECKED_COLOR = "rgba(0, 117, 255, 1)";
+const DEFAULT_SUMMARY = Object.freeze({ tagName: "SUMMARY", getAttribute: () => null, hasAttribute: () => false });
+const CONTENTS_HIDDEN_ELEMENTS = new Set(["BR", "IMG", "CANVAS", "VIDEO", "AUDIO", "IFRAME", "OBJECT", "EMBED", "INPUT", "TEXTAREA", "SELECT"]);
 const NON_RENDERED_ELEMENTS = new Set([
   "BASE",
   "BASEFONT",
@@ -168,9 +170,10 @@ export class RenderTreeBuilder {
 
   #element(element, nodesById, isRoot = false, styleEngine = null, resources = null) {
     const style = styleEngine?.get(element) ?? null;
-    if (!isRoot && (style?.display === "none" || NON_RENDERED_ELEMENTS.has(element.tagName) || element.hasAttribute("hidden"))) {
+    if (!isRoot && (style?.display === "none" || NON_RENDERED_ELEMENTS.has(element.tagName) || (!style && element.hasAttribute("hidden")))) {
       return null;
     }
+    if (style?.display === "contents" && CONTENTS_HIDDEN_ELEMENTS.has(element.tagName)) return null;
     if (element.tagName === "BR") {
       return this.#node(element, "line-break", nodesById, {
         tagName: "BR",
@@ -180,7 +183,7 @@ export class RenderTreeBuilder {
     }
     if (element.localName === "svg") {
       // Inline SVG is a replaced element; its shapes are drawn into its box.
-      const svg = extractSvg(element, style?.color ?? "rgba(0, 0, 0, 1)");
+      const svg = extractSvg(element, style?.color ?? "rgba(0, 0, 0, 1)", styleEngine);
       const [, , viewWidth, viewHeight] = svg.viewBox ?? [];
       return this.#node(element, "image", nodesById, {
         tagName: "SVG",
@@ -220,13 +223,13 @@ export class RenderTreeBuilder {
         children: Object.freeze([]),
       });
     }
-    if (element.tagName === "IMG" || element.tagName === "VIDEO") {
+    if (element.tagName === "IMG" || element.tagName === "VIDEO" || element.tagName === "CANVAS") {
       return this.#node(element, "image", nodesById, {
         tagName: element.tagName,
         style,
         resource: resources?.get(element) ?? null,
-        widthAttribute: positiveDimension(element.getAttribute("width")),
-        heightAttribute: positiveDimension(element.getAttribute("height")),
+        widthAttribute: element.tagName === "CANVAS" ? element.width : positiveDimension(element.getAttribute("width")),
+        heightAttribute: element.tagName === "CANVAS" ? element.height : positiveDimension(element.getAttribute("height")),
         children: Object.freeze([]),
       });
     }
@@ -237,9 +240,37 @@ export class RenderTreeBuilder {
     }
 
     const children = [];
+    if (element.tagName === "SUMMARY" && style?.display === "list-item"
+      && ["disclosure-open", "disclosure-closed"].includes(style.listStyleType)) {
+      let keys = this.#pseudoKeys.get(element);
+      if (!keys) this.#pseudoKeys.set(element, keys = { before: {}, after: {}, beforeText: {}, afterText: {} });
+      keys.marker ??= {};
+      children.push(this.#node(element, "text", nodesById, {
+        text: style.listStyleType === "disclosure-open" ? "▼ " : "▶ ",
+        style, pseudo: "marker", children: Object.freeze([]),
+      }, keys.marker));
+    }
     const before = this.#pseudo(element, "before", styleEngine, nodesById);
     if (before) children.push(before);
+    const details = element.tagName === "DETAILS";
+    const summary = details ? [...element.children].find((child) => child.tagName === "SUMMARY") : null;
+    const closed = details && !element.hasAttribute("open");
+    if (details && !summary) {
+      let keys = this.#pseudoKeys.get(element);
+      if (!keys) this.#pseudoKeys.set(element, keys = { before: {}, after: {}, beforeText: {}, afterText: {} });
+      keys.summary ??= {};
+      keys.summaryText ??= {};
+      const summaryStyle = Object.freeze({ ...computeElementStyle(DEFAULT_SUMMARY, style),
+        display: "list-item", listStyleType: closed ? "disclosure-closed" : "disclosure-open" });
+      const text = this.#node(element, "text", nodesById, {
+        text: closed ? "▶ Details" : "▼ Details", style: summaryStyle, pseudo: "summary", children: Object.freeze([]),
+      }, keys.summaryText);
+      children.push(this.#node(element, "block", nodesById, {
+        tagName: "SUMMARY", pseudo: "summary", style: summaryStyle, children: Object.freeze([text]),
+      }, keys.summary));
+    }
     for (const child of element.childNodes) {
+      if (closed && child !== summary) continue;
       let rendered = null;
       if (child.nodeType === 3) {
         rendered = this.#node(child, "text", nodesById, {
@@ -304,6 +335,7 @@ function sameSvg(left, right) {
 
 function boxType(style, tagName = null) {
   const display = style?.display;
+  if (display === "contents") return "contents";
   if (display === "-webkit-box") return "block";
   if (display === "-webkit-inline-box") return "inline-block";
   if (["flex", "inline-flex", "inline-block", "grid", "inline-grid"].includes(display)) return display;