buninu-browser 0.6.0 → 0.9.0

package/lib/headless-shell.js

@@ -1,3 +1,4 @@
+import {BrowserDialog} from "./browser-dialog.js";
 // qml handle begin: select a dedicated local application renderer
 import {isQmlDocument} from './qml/format.js';
 // Local QML uses a dedicated host renderer.
@@ -15,6 +16,7 @@ import {isQmlDocument} from './qml/format.js';
  * always passes it) but ignored. `--dangerously-allow-host-js` relaxes
  * the renderer sandbox for every page.
  */
+import { parseWindowSize } from "./window-size.js";
 import { CdpServer } from "./cdp-server.js";
 import { DEFAULT_DOWNLOAD_DIR, isAttachment, saveDownload, suggestedFilename } from "./download.js";
 import { audioDemoDocument, displayDocument } from "./document-types.js";
@@ -31,6 +33,7 @@ export const DANGEROUSLY_ALLOW_HOST_JS = "--dangerously-allow-host-js";
 
 export async function runHeadlessShell(args = Bun.argv.slice(2)) {
   installLog(logFileFromEnv());
+  const initialViewport = parseWindowSize(args);
   const allowHostJs = args.includes(DANGEROUSLY_ALLOW_HOST_JS);
   if (args.includes("--no-sandbox")) {
     console.error(`buninu-browser: --no-sandbox is ignored; use ${DANGEROUSLY_ALLOW_HOST_JS} to disable the page sandbox`);
@@ -44,7 +47,7 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
 
   // The endpoint opens while the first renderer starts: a client's first
   // navigation fetches its document meanwhile.
-  const browser = await createBrowser({ allowHostJs, mobile, webkit: webkitFromArgs(args), waitForRenderer: false });
+  const browser = await createBrowser({ initialViewport, allowHostJs, mobile, webkit: webkitFromArgs(args), waitForRenderer: false });
   const portArgument = args.find((argument) => argument.startsWith("--remote-debugging-port="));
   const requestedPort = Number(portArgument?.slice("--remote-debugging-port=".length) ?? 9222);
   const server = CdpServer.create(browser.context).listen(requestedPort, "127.0.0.1");
@@ -85,14 +88,14 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
  * anything that needs a renderer waits for it.
  *
  * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number,
- *   waitForRenderer?: boolean, mobile?: boolean, webkit?: boolean,
+ *   waitForRenderer?: boolean, mobile?: boolean, webkit?: boolean, initialViewport?: {width: number, height: number},
  *   clipboard?: {read: Function, write: Function} }} options
  * WebKit identity defaults on; webkit: false selects Chromium. Mobile takes priority.
  */
 export async function createBrowser({
   allowHostJs = false, spareRenderer = true, network = new NetworkService(), rendererTimeout = 0, mobile = false,
   waitForRenderer = true, webkit = true,
-  clipboard = null,
+  clipboard = null, initialViewport = { width: 800, height: 600 },
 } = {}) {
   // Explicit presentation profiles fix the identity for requests and scripts.
   const initialUserAgent = mobile ? MOBILE_USER_AGENT : webkit ? WEBKIT_USER_AGENT : DESKTOP_USER_AGENT;
@@ -111,12 +114,18 @@ export async function createBrowser({
   let rendererReady = null;
   const documentReady = new WeakMap();
   // Renderer-independent state replayed into every new renderer.
-  const viewport = { width: 800, height: 600, deviceScaleFactor: 1 };
+  const viewport = { ...initialViewport, deviceScaleFactor: 1 };
   let userAgent = webkit ? initialUserAgent : null;
   // Page.addScriptToEvaluateOnNewDocument: source by identifier, run in every new document before its scripts.
   const initScripts = new Map();
   let nextInitScript = 1;
   // Listeners for frame and lifecycle notifications (the CDP server).
+  let dialogHandler = null;
+  const dialogs = new BrowserDialog({viewport:()=>({...viewport}),
+    background:()=>current?.composite('screenshot',{format:'png'}),
+    changed:()=>notify(frameListeners),
+    opened:request=>dialogHandler?.(request),
+    closed:result=>dialogHandler?.(null,result),clipboard});
   const frameListeners = new Set();
   const lifecycleListeners = new Set();
   const downloadListeners = new Set();
@@ -173,6 +182,7 @@ export async function createBrowser({
     // qml handle end
 
     const host = new RendererHost({
+      onDialog: (request,signal) => host===current ? dialogs.open({...request,url:host.documentUrl},signal) : {accept:false},
       // Native frontends supply one clipboard for page APIs and input defaults.
       ...(clipboard?{clipboardRead:()=>clipboard.read(),clipboardWrite:text=>clipboard.write(text)}:{}),
       network,
@@ -327,6 +337,7 @@ export async function createBrowser({
    * restarted renderer).
    */
   async function load(url, invoke = null, downloadName = null, post = null, referrer = null) {
+    dialogs.close();
     const started = performance.now();
     if (downloadName !== null && resource && withoutHash(url) === withoutHash(resource.url)) {
       return download({ url: resource.url, body: resource.body, attributeName: downloadName, totalBytes: resource.body.byteLength });
@@ -428,6 +439,7 @@ export async function createBrowser({
       await call("runJavaScriptURL", resolved);
       return;
     }
+    dialogs.close();
     await rememberScroll();
     let shown = resolved;
     if (!post && downloadName === null && withoutHash(resolved) === withoutHash(currentUrl)) {
@@ -458,6 +470,7 @@ export async function createBrowser({
 
   async function traverseHistory(index) {
     if (index < 0 || index >= history.length || index === historyIndex) return;
+    dialogs.close();
     await rememberScroll();
     historyIndex = index;
     const entry = history[index];
@@ -466,6 +479,10 @@ export async function createBrowser({
   }
 
   const context = {
+    onDialog(handler) { dialogHandler = handler; },
+    get dialogState() { return dialogs.active?.request ?? null; },
+    handleDialog(result) { dialogs.finish(result); },
+    get viewport() { return { ...viewport }; },
     get url() { return currentUrl; },
     navigate,
     get userAgent() { return userAgent ?? initialUserAgent; },
@@ -482,6 +499,7 @@ export async function createBrowser({
     goForward: () => traverseHistory(historyIndex + 1),
     resize(width, height, deviceScaleFactor = 1) {
       Object.assign(viewport, { width, height, deviceScaleFactor });
+      if(dialogs.active){Promise.resolve(applyState("resize",resizeArguments)).catch(()=>{});return dialogs.resize(width,height,deviceScaleFactor);}
       return applyState("resize", resizeArguments);
     },
     setUserAgent(value) {
@@ -501,13 +519,13 @@ export async function createBrowser({
       if (!initScripts.delete(String(identifier))) return;
       applyState("setInitScripts", () => [[...initScripts.values()]]);
     },
-    screenshot: (options = {}) => composite("screenshot", {
+    screenshot: (options = {}) => (dialogs.active ? dialogs.invoke.bind(dialogs) : composite)("screenshot", {
       format: ["jpeg", "webp", "rgba", "bgra"].includes(options.format) ? options.format : "png",
       quality: Number.isFinite(options.quality) ? options.quality : 80,
       optimizeForSpeed: options.optimizeForSpeed === true,
-      clip: options.clip ? {...options.clip,x:options.clip.x/pageScale(),y:options.clip.y/pageScale(),width:options.clip.width/pageScale(),height:options.clip.height/pageScale()} : undefined,
+      clip: options.clip ? {...options.clip,x:options.clip.x/(dialogs.active?1:pageScale()),y:options.clip.y/(dialogs.active?1:pageScale()),width:options.clip.width/(dialogs.active?1:pageScale()),height:options.clip.height/(dialogs.active?1:pageScale())} : undefined,
     }),
-    title: () => call("title"),
+    title: () => dialogs.active ? currentUrl : call("title"),
     /**
      * The document's response body as it arrived (CDP Page.getResourceContent),
      * for the current document's URL with or without its fragment; else null.
@@ -530,6 +548,7 @@ export async function createBrowser({
      * first; the page scrolls when nothing there takes it.
      */
     async scroll(deltaX, deltaY, at = null) {
+      if(dialogs.active)return at?dialogs.invoke("wheel",at.x,at.y,deltaX,deltaY):dialogs.invoke("scroll",deltaX,deltaY);
       const scale = pageScale();
       let left = { x: deltaX / scale, y: deltaY / scale };
       if (at && Number.isFinite(at.x) && Number.isFinite(at.y)) {
@@ -538,9 +557,9 @@ export async function createBrowser({
       }
       return composite("scroll", left.x, left.y);
     },
-    press: (key, options) => call("press", key, options),
-    type: (text) => call("type", text),
-    scrollOffset: () => composite("scrollOffset"),
+    press: (key, options) => dialogs.active ? dialogs.invoke("press",key,options) : call("press", key, options),
+    type: (text) => dialogs.active ? dialogs.invoke("type",text) : call("type", text),
+    scrollOffset: () => dialogs.active ? Promise.resolve({x:0,y:0}) : composite("scrollOffset"),
     /** Calls `listener(frame?)` when the viewport changes, with its measured scroll offset when available. */
     onFrame(listener) {
       frameListeners.add(listener);
@@ -556,12 +575,14 @@ export async function createBrowser({
       return [...reachedLifecycle(committed.host, committed.generation)];
     },
     move(x, y, options = {}) {
+      if(dialogs.active)return dialogs.invoke("move",x,y,options);
       return call("move", x / pageScale(), y / pageScale(), options);
     },
     pointerButton(x, y, button, state, options = {}) {
       return this.click(x, y, {...options, button:button===273?'right':button===274?'middle':'left', phase:state?'down':'up'});
     },
     async click(x, y, options = {}) {
+      if(dialogs.active){await dialogs.invoke("click",x,y,options);return null;}
       const clicked = await call("click", x / pageScale(), y / pageScale(), options);
       const href = typeof clicked === "string" ? clicked : clicked?.url;
       if (typeof href !== "string") return null;
@@ -573,10 +594,10 @@ export async function createBrowser({
         referrer: current.documentUrl });
       return result === null ? null : { url: href, title: await call("title") };
     },
-    evaluate: (expression) => call("evaluate", String(expression)),
+    evaluate: (expression) => dialogs.active ? dialogs.invoke("evaluate",String(expression)) : call("evaluate", String(expression)),
     async cdp(method) {
       if(method==='Page.getLayoutMetrics') {
-        const offset=await composite('scrollOffset');
+        const offset=dialogs.active?{x:0,y:0}:await composite('scrollOffset');
         const visual={pageX:offset.x*pageScale(),pageY:offset.y*pageScale(),offsetX:0,offsetY:0,clientWidth:viewport.width,clientHeight:viewport.height,scale:1,zoom:1};
         return {cssVisualViewport:visual,cssLayoutViewport:visual,visualViewport:visual,layoutViewport:visual};
       }
@@ -612,6 +633,7 @@ export async function createBrowser({
     },
     close() {
       closed = true;
+      dialogs.close();
       cancelSparePreparation();
       current?.close();
       spare?.close();

package/lib/layout/text-layout.js

@@ -179,7 +179,7 @@ function buildBox(node, flags, blockified = false) {
   // by its display: body { display: grid } or flex is common.
   const display = node.type === "root" ? style?.display : node.type;
   const flex = ["flex", "inline-flex"].includes(display)
-    ? style?.flexDirection === "column" ? "column" : "row"
+    ? style?.flexDirection?.startsWith("column") ? "column" : "row"
     : null;
   const grid = ["grid", "inline-grid"].includes(display);
   const table = ["table", "inline-table"].includes(node.type);
@@ -358,6 +358,7 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
     const context = Number.isInteger(style.zIndex);
     ctx.layer = Object.freeze({
       z: context ? style.zIndex : 0,
+      nodeId: box.node.id,
       order: ctx.layerCount++,
       context,
       parent: ctx.stackingContext,
@@ -430,6 +431,7 @@ function cachedBlockResult(ctx, box, key, y, x) {
   for (const layer of cached.layers) {
     layers.push(Object.freeze({
       z: layer.z,
+      nodeId: layer.nodeId,
       order: ctx.layerCount++,
       context: layer.context,
       parent: layer.parent === -1 ? ctx.stackingContext : layers[layer.parent],
@@ -485,7 +487,7 @@ function cacheBlockResult(ctx, box, key, x, y, result, start) {
   for (const layer of ordered) {
     const parent = indices.get(layer.parent) ?? (layer.parent === start.context ? -1 : null);
     if (parent === null) return;
-    layers.push({ z: layer.z, context: layer.context, parent });
+    layers.push({ z: layer.z, nodeId: layer.nodeId, context: layer.context, parent });
   }
   const indexOf = (layer) => layer === start.layer ? -1 : indices.get(layer) ?? null;
   const boxLayers = boxes.map((record) => indexOf(record.layer));
@@ -538,7 +540,7 @@ function layoutAbsolutes(ctx, box, record) {
       const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
         .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
       const margin = style?.margin ?? ZERO_BOX;
-      const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
+      let [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
       const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
       let width;
       if (specifiedWidth == null && left != null && right != null) {
@@ -546,6 +548,19 @@ function layoutAbsolutes(ctx, box, record) {
       } else {
         width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
       }
+      // CSS 2 §10.3.7: with both insets and width resolved, auto margins
+      // absorb the remaining space. Normal-flow margin resolution above is
+      // only used to size the box; its x is not the absolute position.
+      if (specifiedWidth != null && left != null && right != null) {
+        const remaining = containing.width-left-right-width-marginLeft-marginRight;
+        const autoLeft=margin[3]==="auto",autoRight=margin[1]==="auto";
+        if(autoLeft&&autoRight) {
+          if(remaining>=0)marginLeft=marginRight=remaining/2;
+          else if(style.direction==="rtl"){marginLeft=remaining;marginRight=0;}
+          else {marginLeft=0;marginRight=remaining;}
+        }else if(autoLeft)marginLeft=remaining;
+        else if(autoRight)marginRight=remaining;
+      }
       const staticPosition = absolute.staticPosition ?? containing;
       const x = left != null ? containing.x + left + marginLeft
         : right != null ? containing.x + containing.width - right - marginRight - width
@@ -566,6 +581,14 @@ function layoutAbsolutes(ctx, box, record) {
   }
 }
 
+/** CSS Sizing 4: a degenerate ratio behaves as auto; replaced boxes can prefer their natural ratio. */
+function preferredAspectRatio(style, natural = null) {
+  const value = style?.aspectRatio;
+  if (!value || value.auto && natural != null) return natural;
+  const ratio = value.numerator / value.denominator;
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : natural;
+}
+
 /**
  * justify-content in a column flex container (Flexbox §8.2): `free` is the
  * height left over once the items are stacked, as with a min-height or height
@@ -602,12 +625,12 @@ function justifyColumn(ctx, items, justify = "normal", free) {
 }
 
 /** Moves output already produced; records are replaced, as retained ones are frozen and shared. */
-function shiftOutput(ctx, boxStart, fragmentStart, dx, dy) {
-  for (let index = boxStart; index < ctx.boxes.length; index++) {
+function shiftOutput(ctx, boxStart, fragmentStart, dx, dy, boxEnd=ctx.boxes.length, fragmentEnd=ctx.fragments.length) {
+  for (let index = boxStart; index < boxEnd; index++) {
     const record = ctx.boxes[index];
     ctx.boxes[index] = { ...record, x: record.x + dx, y: record.y + dy };
   }
-  for (let index = fragmentStart; index < ctx.fragments.length; index++) {
+  for (let index = fragmentStart; index < fragmentEnd; index++) {
     ctx.fragments[index] = shiftedFragment(ctx.fragments[index], dx, dy);
   }
 }
@@ -674,14 +697,24 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const containingHeight = ctx.containing?.height;
   const resolveHeight = (value) => numberOrNull(resolveLength(value, containingHeight ?? NaN));
   const specifiedHeight = resolveHeight(style?.height);
+  const ratio = preferredAspectRatio(style);
+  // The transferred height uses the box selected by box-sizing. It is
+  // definite for descendants (including percentage heights and grid tracks).
+  let ratioHeight = specifiedHeight == null && forcedHeight == null && ratio != null
+    ? style.boxSizing === "border-box" ? toContentHeight(width / ratio) : contentWidth / ratio
+    : null;
   const minHeight = resolveHeight(style?.minHeight);
   const maxHeight = style?.maxHeight === "none" ? null : resolveHeight(style?.maxHeight);
+  if (ratioHeight != null) {
+    if (maxHeight != null) ratioHeight = Math.min(ratioHeight, toContentHeight(maxHeight));
+    if (minHeight != null) ratioHeight = Math.max(ratioHeight, toContentHeight(minHeight));
+  }
   const previousContaining = ctx.containing;
   ctx.containing = {
     width: contentWidth,
     height: forcedHeight != null
       ? Math.max(0, forcedHeight - border[0] - border[2] - padding[0] - padding[2])
-      : specifiedHeight != null ? toContentHeight(specifiedHeight) : null,
+      : specifiedHeight != null ? toContentHeight(specifiedHeight) : ratioHeight,
   };
 
   if (box.table) {
@@ -743,10 +776,25 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   ctx.containing = previousContaining;
   let contentHeight = Math.max(0, contentBottom - contentTop);
   if (specifiedHeight != null) contentHeight = toContentHeight(specifiedHeight);
+  else if (ratioHeight != null) contentHeight = style.minHeight === "auto" && style.overflowY === "visible"
+    ? Math.max(contentHeight, ratioHeight) : ratioHeight;
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
   if (forcedHeight != null) contentHeight = Math.max(0, forcedHeight - padding[0] - padding[2] - border[0] - border[2]);
-  if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+  if (columnItems?.length) {
+    justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+    if(style?.flexDirection === "column-reverse") {
+      for(const [index,item] of columnItems.entries()){
+        const record=ctx.boxes[item.boxStart];
+        const position=item.mainY+record.y-item.initialY;
+        const delta=2*contentTop+contentHeight-2*position-item.mainHeight;
+        if(index===0&&baseline!=null)baseline+=delta;
+        const next=columnItems[index+1];
+        shiftOutput(ctx,item.boxStart,item.fragmentStart,0,delta,
+          next?.boxStart??ctx.boxes.length,next?.fragmentStart??ctx.fragments.length);
+      }
+    }
+  }
   if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
   record.height = forcedHeight ?? contentHeight + padding[0] + padding[2] + border[0] + border[2];
   // Summary's disclosure marker participates in its inline content.
@@ -840,6 +888,8 @@ function roman(value) {
 
 function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
   const style = box.style;
+  const reverse=style?.flexDirection === "column-reverse";
+  const margins=child=>{const m=child.style?.margin??ZERO_BOX;return reverse?[m[2],m[1],m[0],m[3]]:m;};
   const gap = style?.rowGap ?? style?.gap ?? 0;
   const definiteHeight = ctx.containing?.height;
   // Most column containers have auto height. Without a main-axis constraint
@@ -854,10 +904,11 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
     for (const [index, child] of box.children.entries()) {
       if (index) cursor += gap;
       const horizontal = columnHorizontal(ctx, child, style, x, width);
-      const margin = child.style?.margin ?? ZERO_BOX;
+      const margin = margins(child);
       items.push({boxStart:ctx.boxes.length,fragmentStart:ctx.fragments.length,
         autoTop:margin[0] === "auto",autoBottom:margin[2] === "auto"});
       const result = layoutBlock(ctx, child, horizontal.x, horizontal.width, cursor + numberOrZero(margin[0]));
+      Object.assign(items.at(-1),{mainY:cursor+numberOrZero(margin[0]),mainHeight:result.height,initialY:ctx.boxes[items.at(-1).boxStart].y});
       cursor += numberOrZero(margin[0]) + result.height + numberOrZero(margin[2]);
       baseline ??= result.baseline;
     }
@@ -866,7 +917,7 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
   const items = box.children.map(child => {
     const childStyle = child.style;
     const horizontal = columnHorizontal(ctx, child, style, x, width);
-    const margin = childStyle?.margin ?? ZERO_BOX;
+    const margin = margins(child);
     const padding = paddingBox(childStyle, width);
     const border = borderWidths(childStyle);
     const extra = padding[0] + padding[2] + border[0] + border[2];
@@ -908,6 +959,7 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
     const forcedHeight = item.definite || Math.abs(targetHeight - item.naturalHeight) > 1e-9 ? targetHeight : null;
     const result = layoutBlock(ctx, item.box, item.horizontal.x, item.horizontal.width,
       cursor + item.marginLeft, false, forcedHeight);
+    Object.assign(item,{mainY:cursor+item.marginLeft,mainHeight:result.height,initialY:ctx.boxes[item.boxStart].y});
     cursor += item.marginLeft + result.height + item.marginRight;
     baseline ??= result.baseline;
   }
@@ -932,7 +984,14 @@ function layoutFlexRow(ctx, box, x, width, y) {
   const style = box.style;
   const columnGap = style?.columnGap ?? style?.gap ?? 0;
   const rowGap = style?.rowGap ?? style?.gap ?? 0;
-  const items = box.children.map((child) => flexItem(ctx, child, width));
+  const items = box.children.map((child) => {
+    const item=flexItem(ctx,child,width);
+    if(style?.flexDirection === "row-reverse") {
+      [item.marginLeft,item.marginRight]=[item.marginRight,item.marginLeft];
+      [item.autoLeft,item.autoRight]=[item.autoRight,item.autoLeft];
+    }
+    return item;
+  });
 
   const lines = [];
   let line = [];
@@ -1007,7 +1066,8 @@ function layoutFlexRow(ctx, box, x, width, y) {
       } else if (alignment === "end") {
         itemY += crossSize - outerHeight;
       }
-      const result = layoutBlock(ctx, item.box, mainX, item.target, itemY, false, forcedHeight);
+      const itemX=style?.flexDirection === "row-reverse"?x+width-(mainX-x)-item.target:mainX;
+      const result = layoutBlock(ctx, item.box, itemX, item.target, itemY, false, forcedHeight);
       baseline ??= result.baseline;
       mainX += item.target + item.marginRight + (item.autoRight ? autoShare : 0) + columnGap + between;
     }
@@ -1147,7 +1207,7 @@ function layoutGrid(ctx, box, x, width, y) {
     const measured = dryLayout(ctx, item.box, horizontal.width);
     item.height = measured.height + numberOrZero(margin[0]) + numberOrZero(margin[2]);
   }
-  const rows = sizeGridRows(grid, rowGap);
+  const rows = sizeGridRows(grid, rowGap, ctx.containing?.height, style?.alignContent);
   const rowStarts = trackStarts(rows, [], rowGap, y);
 
   let baseline = null;
@@ -1164,7 +1224,8 @@ function layoutGrid(ctx, box, x, width, y) {
     const contentHeight = item.height - margin.top - margin.bottom;
     let itemY = areaY + margin.top;
     let forcedHeight = null;
-    if (["normal", "stretch"].includes(alignment) && numberOrNull(itemStyle?.height) == null) {
+    if (["normal", "stretch"].includes(alignment) && numberOrNull(itemStyle?.height) == null
+      && (alignment === "stretch" || preferredAspectRatio(itemStyle) == null)) {
       forcedHeight = Math.max(contentHeight, areaHeight - margin.top - margin.bottom);
     } else if (alignment === "center") {
       itemY += (areaHeight - item.height) / 2;
@@ -1756,10 +1817,10 @@ function updateGrowth(track, value) {
 }
 
 /** Row sizing: explicit lengths are fixed; other rows fit their tallest item. */
-function sizeGridRows(grid, gap) {
+function sizeGridRows(grid, gap, available = null, alignment = "normal") {
   const rows = grid.rowTracks.map((track) => {
-    const fixed = numberOrNull(resolveBreadth(track.min, null));
-    const fixedMax = numberOrNull(resolveBreadth(track.max, null));
+    const fixed = numberOrNull(resolveBreadth(track.min, available));
+    const fixedMax = numberOrNull(resolveBreadth(track.max, available));
     return fixed != null && fixedMax != null ? { size: fixedMax, fixed: true } : { size: fixed ?? 0, fixed: false };
   });
   for (const item of grid.items.filter((candidate) => candidate.rowSpan === 1)) {
@@ -1772,6 +1833,34 @@ function sizeGridRows(grid, gap) {
     const flexible = spanned.filter((row) => !row.fixed);
     if (item.height > current && flexible.length) flexible.at(-1).size += item.height - current;
   }
+  // Fractional row tracks consume the definite block-axis space, just as
+  // column fr tracks consume inline space. Empty grid items still stretch
+  // into those tracks (e.g. a 2x2 game board sized by aspect-ratio).
+  const flexible=grid.rowTracks.flatMap((track,index)=>track.max?.fr>0?[index]:[]);
+  if(flexible.length){
+    let fraction=0;
+    if(available!=null){
+      const leftover=available-gap*Math.max(0,rows.length-1)-rows.reduce((sum,row,index)=>sum+(flexible.includes(index)?0:row.size),0);
+      const frozen=new Set();
+      for(let guard=0;guard<=flexible.length;guard++){
+        const active=flexible.filter(index=>!frozen.has(index));
+        const factors=Math.max(1,active.reduce((sum,index)=>sum+grid.rowTracks[index].max.fr,0));
+        const space=leftover-[...frozen].reduce((sum,index)=>sum+rows[index].size,0);
+        fraction=Math.max(0,space/factors);
+        const violators=active.filter(index=>rows[index].size>fraction*grid.rowTracks[index].max.fr);
+        if(!violators.length)break;
+        for(const index of violators)frozen.add(index);
+      }
+    }else fraction=Math.max(...flexible.map(index=>rows[index].size/Math.max(1,grid.rowTracks[index].max.fr)));
+    for(const index of flexible)rows[index].size=Math.max(rows[index].size,fraction*grid.rowTracks[index].max.fr);
+  }
+  // Normal grid content alignment stretches auto tracks to fill a definite
+  // height, so place-items:center centers inside the entire grid area.
+  if (available != null && ["normal", "stretch", undefined].includes(alignment)) {
+    const free = available - rows.reduce((sum, row) => sum + row.size, 0) - gap * Math.max(0, rows.length - 1);
+    const stretchy = rows.filter((row, index) => grid.rowTracks[index].max === "auto");
+    if (free > 0 && stretchy.length) for (const row of stretchy) row.size += free / stretchy.length;
+  }
   return rows.map((row) => row.size);
 }
 
@@ -1838,6 +1927,10 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, perce
   let width;
   if (box.replaced) width = imageDimensions(box.node, containingWidth).width + extra;
   else if (specified != null) width = borderBox(specified);
+  else if (preferredAspectRatio(style) != null && numberOrNull(resolveLength(style?.height, ctx.containing?.height ?? NaN)) != null) {
+    const height = resolveLength(style.height, ctx.containing?.height ?? NaN);
+    width = borderBox(height * preferredAspectRatio(style));
+  }
   else if (shrink) width = Math.min(maxContentWidth(ctx, box), available);
   else width = available;
   const maxWidth = numberOrNull(resolveLength(style?.maxWidth, percentageBasis));
@@ -2735,7 +2828,7 @@ function imageDimensions(node, referenceWidth, referenceHeight = null) {
   const intrinsicWidth = (canvas ? node.widthAttribute : node.resource?.width) ?? node.widthAttribute ?? 300;
   const intrinsicHeight = (canvas ? node.heightAttribute : node.resource?.height) ?? node.heightAttribute ?? 150;
   const emptyCanvas = node.tagName === "CANVAS" && !(intrinsicWidth > 0 && intrinsicHeight > 0);
-  const ratio = emptyCanvas ? null : intrinsicWidth / intrinsicHeight;
+  const ratio = preferredAspectRatio(node.style, emptyCanvas ? null : intrinsicWidth / intrinsicHeight);
   const cssWidth = node.style?.width;
   const cssHeight = node.style?.height;
   let width = cssWidth !== "auto" && cssWidth != null
@@ -2746,7 +2839,7 @@ function imageDimensions(node, referenceWidth, referenceHeight = null) {
     : null;
   if (!Number.isFinite(width)) width = null;
   if (!Number.isFinite(height)) height = null;
-  if (width == null && height == null) [width, height] = [intrinsicWidth, intrinsicHeight];
+  if (width == null && height == null) [width, height] = [intrinsicWidth, ratio == null ? intrinsicHeight : intrinsicWidth / ratio];
   else if (width == null) width = ratio == null ? intrinsicWidth : height * ratio;
   else if (height == null) height = ratio == null ? intrinsicHeight : width / ratio;
   if (node.style?.maxWidth !== "none" && node.style?.maxWidth != null) {

package/lib/media/mp4-frame-times.js

@@ -0,0 +1,93 @@
+// Presentation timestamps for ordinary (nonfragmented) MP4 video. FFmpeg
+// returns decoded pictures in presentation order; average FPS cannot time VFR.
+// Unsupported tables/edits retain the existing decoder clock.
+export function mp4FrameTimes(bytes) {
+  if (!(bytes instanceof Uint8Array)) return null;
+  try {
+    const v=new DataView(bytes.buffer,bytes.byteOffset,bytes.byteLength);
+    let seen=0;
+    const u=(p,end)=>{if(p<0||p+4>end)throw Error('short field');return v.getUint32(p)};
+    const boxes=(start,end)=>{
+      const out=[];
+      for(let p=start;p<end;){
+        if(++seen>32768)throw Error('box limit');
+        let size=u(p,end),header=8;const type=u(p+4,end);
+        if(size===1){size=u(p+8,end)*4294967296+u(p+12,end);header=16}
+        if(size===0)size=end-p;
+        // Progressive files may end inside mdat; timing tables before it
+        // are already complete and do not depend on the arriving payload.
+        if(size>end-p && type===0x6d646174 && start===0)break;
+        if(!Number.isSafeInteger(size)||size<header||size>end-p)throw Error('bad box');
+        out.push({type,p:p+header,end:p+size});p+=size;
+      }return out;
+    };
+    const tag=s=>[...s].reduce((n,c)=>n*256+c.charCodeAt(0),0);
+    const find=(list,name)=>list.find(b=>b.type===tag(name));
+    const children=b=>boxes(b.p,b.end);
+    const top=boxes(0,bytes.length),moov=find(top,'moov');if(!moov)return null;
+    const movie=children(moov);if(find(movie,'mvex'))return null;
+    const tracks=movie.filter(b=>b.type===tag('trak'));
+    let result=null;
+    for(const trak of tracks){
+      const nodes=children(trak),mdia=find(nodes,'mdia');if(!mdia)continue;
+      const media=children(mdia),hdlr=find(media,'hdlr');
+      if(!hdlr||u(hdlr.p+8,hdlr.end)!==tag('vide'))continue;
+      if(result)return null;
+      const mdhd=find(media,'mdhd');if(!mdhd||bytes[mdhd.p]>1)return null;
+      const scale=u(mdhd.p+(bytes[mdhd.p]===1?20:12),mdhd.end);if(!scale)return null;
+      let offset=0;const edts=find(nodes,'edts');
+      if(edts){
+        const edit=find(children(edts),'elst');
+        if(!edit||bytes[edit.p]!==0||u(edit.p+4,edit.end)!==1||u(edit.p+16,edit.end)!==65536)return null;
+        offset=u(edit.p+12,edit.end);if(offset>=2147483648)return null;
+      }
+      const minf=find(media,'minf');if(!minf)return null;
+      const stbl=find(children(minf),'stbl');if(!stbl)return null;
+      const tables=children(stbl),stts=find(tables,'stts'),ctts=find(tables,'ctts');if(!stts||bytes[stts.p]!==0)return null;
+      const times=[],durations=[];let time=0;
+      const runs=u(stts.p+4,stts.end);if(runs>250000)return null;
+      for(let i=0;i<runs;i++){
+        const count=u(stts.p+8+i*8,stts.end),delta=u(stts.p+12+i*8,stts.end);
+        if(!delta||times.length+count>250000)return null;
+        for(let j=0;j<count;j++){times.push(time);durations.push(delta);time+=delta;if(!Number.isSafeInteger(time))return null;}
+      }
+      if(ctts){
+        if(bytes[ctts.p]>1)return null;let index=0;
+        const runs=u(ctts.p+4,ctts.end);if(runs>250000)return null;
+        for(let i=0;i<runs;i++){
+          const count=u(ctts.p+8+i*8,ctts.end);let delta=u(ctts.p+12+i*8,ctts.end);
+          if(bytes[ctts.p]===1)delta|=0;
+          if(index+count>times.length)return null;
+          for(let j=0;j<count;j++)times[index++]+=delta;
+        }if(index!==times.length)return null;
+      }
+      const keys=[];const stss=find(tables,'stss');
+      if(stss){const count=u(stss.p+4,stss.end);if(count>times.length)return null;
+        for(let i=0;i<count;i++){const n=u(stss.p+8+i*4,stss.end);if(!n||n>times.length)return null;keys.push((times[n-1]-offset)/scale)}
+      }else for(const t of times)keys.push((t-offset)/scale);
+      const frames=Float64Array.from(times,t=>(t-offset)/scale);frames.sort();keys.sort((a,b)=>a-b);
+      if(!frames.length||frames[0]<-1e-6)return null;
+      let end=0;for(let i=0;i<times.length;i++)end=Math.max(end,(times[i]+durations[i]-offset)/scale);
+      result={frames,keys,end};
+    }return result;
+  }catch{return null}
+}
+
+export function timeVideoDecoder(decoder,bytes) {
+  const timeline=mp4FrameTimes(bytes);if(!timeline)return decoder;
+  let index=0;
+  return {
+    width:decoder.width,height:decoder.height,fps:decoder.fps,
+    get frameTime(){return timeline.frames[Math.max(0,index-1)]},
+    get nextFrameTime(){return timeline.frames[index]??timeline.end},
+    nextFrame(...args){const pixels=decoder.nextFrame(...args);if(pixels)index++;return pixels},
+    seek(ms){
+      decoder.seek(ms);const target=ms/1000;let key=timeline.keys[0]??0;
+      for(const t of timeline.keys){if(t>target+1e-6)break;key=t}
+      let low=0,high=timeline.frames.length;
+      while(low<high){const mid=(low+high)>>>1;if(timeline.frames[mid]<key-1e-6)low=mid+1;else high=mid}
+      index=low;
+    },
+    close(){decoder.close()},
+  };
+}

package/lib/paint/direct-canvas.ts

@@ -0,0 +1,39 @@
+// Browser adapter only. All pixel composition and sampling use Land unchanged.
+import {createDirectComposer, type DirectSurface} from '../../vendor/land-renderer/direct-compositor.ts';
+export interface CanvasLayer {
+  pixels: Uint8Array; width: number; height: number;
+  x: number; y: number; drawWidth: number; drawHeight: number;
+}
+export class CanvasComposer {
+  private surfaces: DirectSurface[] = [];
+  private positions = new WeakMap<DirectSurface,{x:number;y:number}>();
+  private buffers = new WeakMap<Uint8Array,NonNullable<DirectSurface["pixels"]>>();
+  private base: {key:string;surface:DirectSurface} | null = null;
+  private readonly direct = createDirectComposer({input:{x:0,y:0,pointer:false},wm:{
+    renderSurfaces:()=>this.surfaces,origin:surface=>this.positions.get(surface)!,
+  }});
+  private surface(layer: CanvasLayer): DirectSurface {
+    let pixels=this.buffers.get(layer.pixels);
+    if(!pixels||pixels.width!==layer.width||pixels.height!==layer.height){pixels={bytes:layer.pixels,width:layer.width,height:layer.height,stride:layer.width*4,format:0};this.buffers.set(layer.pixels,pixels);}
+    const surface:DirectSurface={pixels,
+      scale:1,transform:0,viewportDestination:[layer.drawWidth,layer.drawHeight]};
+    this.positions.set(surface,{x:layer.x,y:layer.y});
+    return surface;
+  }
+  compose(width:number,height:number,background:readonly number[],layers:CanvasLayer[]):Uint8Array {
+    const key=[width,height,...background].join('/');
+    if(this.base?.key!==key){
+      const pixels=new Uint8Array(width*height*4);
+      // Browser RGBA and Land BGRA use identical alpha and blend operations.
+      // Supplying an opaque RGBA base also hides Land's default desktop color.
+      const words=new Uint32Array(pixels.buffer);
+      const color=new Uint8Array([background[0]!,background[1]!,background[2]!,255]);
+      words.fill(new Uint32Array(color.buffer)[0]!);
+      this.base={key,surface:this.surface({pixels,width,height,x:0,y:0,drawWidth:width,drawHeight:height})};
+    }
+    this.surfaces=[this.base.surface,...layers.map(layer=>this.surface(layer))];
+    const out=this.direct.compose(width,height);
+    return new Uint8Array(out.buffer,out.byteOffset,out.byteLength);
+  }
+  close():void {this.direct.close();this.surfaces=[];this.base=null;this.positions=new WeakMap();this.buffers=new WeakMap();}
+}