buninu-browser 0.2.4 → 0.4.0

package/lib/layout/text-layout.js

@@ -236,9 +236,9 @@ function blockChildren(node, flags) {
       children.push(buildBox(child, inheritedFlags(child, childFlags)));
       for (const open of openInlines) items.push({ kind: "open", node: open, style: open.style ?? null });
     } else if (child.type === "image") {
-      items.push({ kind: "image", node: child });
+      items.push({ kind: "image", node: child, wrap:childFlags.wrap });
     } else if (isAtomic(child)) {
-      items.push({ kind: "atomic", node: child, box: buildBox(child, inheritedFlags(child, childFlags)) });
+      items.push({ kind: "atomic", node: child, wrap:childFlags.wrap, box: buildBox(child, inheritedFlags(child, childFlags)) });
     } else {
       items.push({ kind: "open", node: child, style: child.style ?? null });
       openInlines.push(child);
@@ -2117,11 +2117,13 @@ function buildParagraph(ctx, ifc) {
       let value = String(item.text).replace(/\r\n?/g, "\n");
       if (item.preserve) {
         const pieces = value.split("\n");
+        let sourceStart=0;
         pieces.forEach((piece, index) => {
           if (index > 0) forced.set(text.length, (forced.get(text.length) ?? 0) + 1);
           if (piece) {
-            pushRun({ kind: "text", nodeId: item.node.id, style: item.style, collapsible: false, wrap: item.wrap }, piece);
+            pushRun({ kind: "text", nodeId: item.node.id, style: item.style, collapsible: false, wrap: item.wrap, sourceStart }, piece);
           }
+          sourceStart+=piece.length+1;
         });
         afterSpace = false;
       } else {
@@ -2137,7 +2139,7 @@ function buildParagraph(ctx, ifc) {
       forced.set(text.length, (forced.get(text.length) ?? 0) + 1);
       afterSpace = true;
     } else if (item.kind === "image" || item.kind === "atomic") {
-      pushRun({ kind: item.kind, nodeId: item.node.id, style: item.node.style ?? null, node: item.node, box: item.box, wrap: true }, "");
+      pushRun({ kind: item.kind, nodeId: item.node.id, style: item.node.style ?? null, node: item.node, box: item.box, wrap: item.wrap!==false }, "");
       afterSpace = false;
     }
   }
@@ -2158,7 +2160,7 @@ function buildParagraph(ctx, ifc) {
     const end = index + segment.length;
     if (!run) continue;
     if (run.collapsible && run.wrap && segment === " ") opportunities.add(end);
-    else if (run.kind === "image" || run.kind === "atomic") {
+    else if (run.wrap && (run.kind === "image" || run.kind === "atomic")) {
       opportunities.add(index);
       opportunities.add(end);
     } else if (run.wrap && run.kind === "text" && (Bun.stringWidth(segment) > 1 || (!run.collapsible && segment === " "))) {
@@ -2404,7 +2406,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       ascent = Math.max(ascent, atomAscent);
       descent = Math.max(descent, atom.marginTop + atom.height + atom.marginBottom - atomAscent);
     } else {
-      segment.metrics = textMetrics(ctx, run.style);
+      segment.metrics = textMetrics(ctx, run.style, paragraph.text.slice(segment.start,segment.end));
       ascent = Math.max(ascent, segment.metrics.ascent);
       descent = Math.max(descent, segment.metrics.descent);
     }
@@ -2461,6 +2463,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
     const common = {
       nodeId: run.nodeId,
       text: run.kind === "text" ? paragraph.text.slice(segment.start, segment.end) : "",
+      sourceStart:(run.sourceStart??0)+segment.start-run.start,
       start: segment.start - line.start,
       end: segment.end - line.start,
       style: run.style ?? style,
@@ -2598,8 +2601,8 @@ function measureAtomic(ctx, box, availableWidth) {
   };
 }
 
-function textMetrics(ctx, style) {
-  const font = ctx.metrics(style);
+function textMetrics(ctx, style, text = null) {
+  const font = ctx.metrics(style,text);
   // `line-height: normal` (null) uses the font's own content height.
   const lineHeight = ctx.lineHeight ?? (style ? style.lineHeight ?? font.height : ctx.fallbackLineHeight);
   const halfLeading = (lineHeight - font.height) / 2;
@@ -2668,7 +2671,12 @@ function cachedMetrics(fontMetrics) {
     }
     return metrics;
   };
-  return (style) => {
+  return (style,text=null) => {
+    // Fallback fonts can be taller than the Latin strut. Use the same glyphs
+    // measured for this run rather than assuming every character uses "Hg".
+    if(text && /[^\x00-\x7f]/.test(text) && typeof fontMetrics==='function') {
+      const measured=fontMetrics(style,text);if(measured?.height>0)return measured;
+    }
     if (style === null || typeof style !== "object") return metricsFor(style);
     let metrics = byStyle.get(style);
     if (!metrics) byStyle.set(style, metrics = metricsFor(style));

package/lib/paint/display-list.js

@@ -193,6 +193,9 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         rect: effect.transform ? transformRect(effect.transform, hitRect) : hitRect,
         clipRect: effect.clipRect,
         fixed: effect.fixed,
+        // Preserve text geometry for form-control caret hit testing, including
+        // whitespace runs which intentionally have no painted glyphs.
+        ...(tree?.nodesById.get(run.nodeId)?.pseudo==='value'?{textRun:run,transform:effect.transform}:{}),
       });
       reach(effect, hitRect);
       paintRun(fragment, run);
@@ -234,6 +237,7 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         op: "drawText",
         nodeId: run.nodeId,
         text: run.text,
+        textWidth: run.width,
         x: run.x,
         y,
         font: {
@@ -411,7 +415,7 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
               radii = insetRadii(radii, style.borderWidths ?? [0, 0, 0, 0]);
             }
             clips.push([node, clip, radii]);
-            if (isScroller(style)) {
+            if (isScroller(style) && boxes.has(node.id)) {
               if (!scrolledBy.size) outOfFlow = positionedOut;
               scrolledBy.add(node);
             }

package/lib/paint/frame.js

@@ -15,10 +15,10 @@
  * 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 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
@@ -115,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/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});
+  }
+}