buninu-browser 0.1.0 → 0.2.1

package/lib/layout/text-layout.js

@@ -39,10 +39,11 @@ export function layoutText(tree, options = {}) {
     boxes: [],
     lineHeight: options.lineHeight == null ? null : positiveNumber(options.lineHeight, 31),
     fallbackLineHeight: 31,
-    measure: cachedMeasure(measureText),
-    metrics: cachedMetrics(options.fontMetrics),
-    maxContent: new WeakMap(),
-    minContent: new WeakMap(),
+    measure: options.measureCache ?? cachedMeasure(measureText),
+    metrics: options.metricsCache ?? cachedMetrics(options.fontMetrics),
+    maxContent: options.maxContentCache ?? new WeakMap(),
+    minContent: options.minContentCache ?? new WeakMap(),
+    blockResults: options.blockResultCache ?? null,
     // Paint layers: the root layer holds in-flow content; positioned boxes add
     // more. A layer with an integer z-index is a stacking context; `parent` is
     // the stacking context a layer is painted in (CSS 2 Appendix E).
@@ -50,14 +51,20 @@ export function layoutText(tree, options = {}) {
     stackingContext: ROOT_LAYER,
     layerCount: 1,
     initialContainingBlock: null,
+    // Static positions recorded for out-of-flow boxes, in order (see
+    // cacheBlockResult), and those boxes by node for replays.
+    staticPositions: [],
+    outOfFlowBoxes: new Map(),
   };
 
   containingBlocks = [];
+  outOfFlowBoxes = ctx.outOfFlowBoxes;
   let root;
   try {
     root = buildBox(tree.root, inheritedFlags(tree.root, { preserve: false, wrap: true }));
   } finally {
     containingBlocks = null;
+    outOfFlowBoxes = null;
   }
   const containingWidth = options.measureText || viewportWidth
     ? Math.max(1, (viewportWidth || columns * columnWidth) - x * 2)
@@ -91,12 +98,43 @@ export function layoutText(tree, options = {}) {
   });
 }
 
+/**
+ * Long-lived layout entry point. Expensive shaping measurements are valid as
+ * long as their immutable computed-style identity is valid, so retain them
+ * across incremental updates instead of starting cold on every reflow.
+ * Formatting-context result caches are added to this same owner.
+ */
+export class LayoutEngine {
+  #measure;
+  #metrics;
+  #maxContent = new WeakMap();
+  #minContent = new WeakMap();
+  #blockResults = new WeakMap();
+
+  constructor({ measureText = (text) => Bun.stringWidth(text) * 13, fontMetrics = null } = {}) {
+    this.#measure = cachedMeasure(measureText);
+    this.#metrics = cachedMetrics(fontMetrics);
+  }
+
+  layout(tree, options = {}) {
+    return layoutText(tree, {
+      ...options,
+      measureCache: this.#measure,
+      metricsCache: this.#metrics,
+      maxContentCache: this.#maxContent,
+      minContentCache: this.#minContent,
+      blockResultCache: this.#blockResults,
+    });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Box tree construction
 
 // Absolutely positioned boxes register with their containing block while the
 // box tree is built. Building is synchronous and scoped to layoutText.
 let containingBlocks = null;
+let outOfFlowBoxes = null;
 
 // Text nodes carry their parent's style, so only element boxes can be positioned.
 const UNPOSITIONABLE = new Set(["root", "text", "line-break"]);
@@ -115,6 +153,7 @@ function outOfFlowBox(node, flags) {
   const box = buildBox(node, inheritedFlags(node, flags), true);
   box.outOfFlow = true;
   holder.absolutes.push(box);
+  outOfFlowBoxes?.set(node, box);
   return box;
 }
 
@@ -123,10 +162,13 @@ function buildBox(node, flags, blockified = false) {
   if (node.type === "image") {
     return { kind: "block", node, style, replaced: true, bfc: true, children: [], absolutes: [] };
   }
-  const flex = ["flex", "inline-flex"].includes(node.type)
+  // The root (<body>) keeps its own node type, but lays its children out
+  // 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"
     : null;
-  const grid = ["grid", "inline-grid"].includes(node.type);
+  const grid = ["grid", "inline-grid"].includes(display);
   const table = ["table", "inline-table"].includes(node.type);
   const box = {
     kind: "block",
@@ -275,9 +317,13 @@ function hasInlineContent(items) {
  * then applies relative offsets and translations to everything it produced.
  */
 function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
+  const cached = cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight);
+  if (cached) return cached;
   const style = box.style;
   const boxStart = ctx.boxes.length;
   const fragmentStart = ctx.fragments.length;
+  const layerStart = ctx.layerCount;
+  const staticStart = ctx.staticPositions.length;
   const previousLayer = ctx.layer;
   const previousContext = ctx.stackingContext;
   // Anonymous boxes reuse their container's node but are never positioned themselves.
@@ -311,9 +357,122 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
   if (dx || dy) shiftOutput(ctx, boxStart, fragmentStart, dx, dy);
   ctx.layer = previousLayer;
   ctx.stackingContext = previousContext;
+  cacheBlockResult(ctx, box, width, x, y, absorbTop, forcedHeight, result, {
+    boxStart, fragmentStart, layerStart, staticStart, layer: previousLayer, context: previousContext,
+  });
   return result;
 }
 
+function blockCacheKey(width, absorbTop, forcedHeight) {
+  return `${width}\n${absorbTop ? 1 : 0}\n${forcedHeight ?? "auto"}`;
+}
+
+/** Where an out-of-flow box would have been in flow; recorded so that a replayed block sets it again. */
+function setStaticPosition(ctx, box, position) {
+  box.staticPosition = position;
+  ctx.staticPositions.push({ node: box.node, position });
+}
+
+/** Replays a retained formatting-context result at its new flow position. */
+function cachedBlockResult(ctx, box, width, y, x, absorbTop, forcedHeight) {
+  if (!ctx.blockResults || box.anonymous) return null;
+  const cached = ctx.blockResults.get(box.node)?.get(blockCacheKey(width, absorbTop, forcedHeight));
+  if (!cached) return null;
+  const dx = x - cached.x;
+  const dy = y - cached.y;
+  // The block's own paint layers are made again, in their order, after the
+  // layers laid out before it; -1 is the layer and stacking context it is in.
+  const layers = [];
+  for (const layer of cached.layers) {
+    layers.push(Object.freeze({
+      z: layer.z,
+      order: ctx.layerCount++,
+      context: layer.context,
+      parent: layer.parent === -1 ? ctx.stackingContext : layers[layer.parent],
+    }));
+  }
+  const layerAt = (index) => index === -1 ? ctx.layer : layers[index];
+  // Retained output is frozen: where it neither moved nor changed layer, the
+  // same objects are output again.
+  const moved = dx !== 0 || dy !== 0;
+  cached.boxes.forEach((record, index) => {
+    const layer = layerAt(cached.boxLayers[index]);
+    ctx.boxes.push(!moved && record.layer === layer ? record : { ...record, x: record.x + dx, y: record.y + dy, layer });
+  });
+  cached.fragments.forEach((fragment, index) => {
+    const layer = layerAt(cached.fragmentLayers[index]);
+    ctx.fragments.push(!moved && fragment.layer === layer ? fragment : { ...shiftedFragment(fragment, dx, dy), layer });
+  });
+  // Out-of-flow boxes whose containing block is outside this one still need their static positions.
+  for (const { node, x: staticX, y: staticY } of cached.staticPositions) {
+    const outOfFlow = ctx.outOfFlowBoxes.get(node);
+    const position = { x: staticX + dx, y: staticY + dy };
+    if (outOfFlow) outOfFlow.staticPosition = position;
+    ctx.staticPositions.push({ node, position });
+  }
+  return {
+    height: cached.result.height,
+    baseline: cached.result.baseline == null ? null : cached.result.baseline + dy,
+  };
+}
+
+/**
+ * Retains a block's output for replay (cachedBlockResult). Positioned boxes
+ * inside it make paint layers of their own; those are kept by creation
+ * order relative to the layer and stacking context the block is in, and the
+ * static positions it recorded go along. Output in a layer made before the
+ * block (which should not occur) is not retained.
+ */
+function cacheBlockResult(ctx, box, width, x, y, absorbTop, forcedHeight, result, start) {
+  if (!ctx.blockResults || box.anonymous) return;
+  const boxes = ctx.boxes.slice(start.boxStart);
+  const fragments = ctx.fragments.slice(start.fragmentStart);
+  const local = new Set();
+  const collect = (layer) => {
+    if (layer === start.layer || layer === start.context || local.has(layer)) return true;
+    if (!layer || layer.order < start.layerStart) return false;
+    local.add(layer);
+    return collect(layer.parent);
+  };
+  if (!boxes.every((record) => collect(record.layer)) || !fragments.every((fragment) => collect(fragment.layer))) return;
+  const ordered = [...local].sort((left, right) => left.order - right.order);
+  const indices = new Map(ordered.map((layer, index) => [layer, index]));
+  const layers = [];
+  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 });
+  }
+  const indexOf = (layer) => layer === start.layer ? -1 : indices.get(layer) ?? null;
+  const boxLayers = boxes.map((record) => indexOf(record.layer));
+  const fragmentLayers = fragments.map((fragment) => indexOf(fragment.layer));
+  if (boxLayers.includes(null) || fragmentLayers.includes(null)) return;
+  let entries = ctx.blockResults.get(box.node);
+  if (!entries) ctx.blockResults.set(box.node, entries = new Map());
+  // A node normally sees one containing width. Bound unusual cases such as a
+  // reused table cell so the retained cache cannot grow without limit.
+  if (!entries.has(blockCacheKey(width, absorbTop, forcedHeight)) && entries.size >= 4) {
+    entries.delete(entries.keys().next().value);
+  }
+  entries.set(blockCacheKey(width, absorbTop, forcedHeight), {
+    x,
+    y,
+    result: { ...result },
+    layers,
+    boxes: boxes.map(retained),
+    boxLayers,
+    fragments: fragments.map(retained),
+    fragmentLayers,
+    staticPositions: ctx.staticPositions.slice(start.staticStart)
+      .map(({ node, position }) => ({ node, x: position.x, y: position.y })),
+  });
+}
+
+/** An output record as retained: frozen (records replayed from a retained block already are). */
+function retained(record) {
+  return Object.isFrozen(record) ? record : Object.freeze({ ...record });
+}
+
 /** CSS 2 §10.3.7/§10.6.4 absolute placement against the padding box. */
 function layoutAbsolutes(ctx, box, record) {
   const border = borderWidths(box.style);
@@ -338,7 +497,7 @@ function layoutAbsolutes(ctx, box, record) {
     if (specifiedWidth == null && left != null && right != null) {
       width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
     } else {
-      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true).width;
+      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
     }
     const staticPosition = absolute.staticPosition ?? containing;
     const x = left != null ? containing.x + left + marginLeft
@@ -357,27 +516,59 @@ function layoutAbsolutes(ctx, box, record) {
   }
 }
 
+/**
+ * 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
+ * taller than them. Each item's output moves by its share; shifts are applied
+ * item by item because shiftOutput moves everything after a start index.
+ */
+function justifyColumn(ctx, items, justify = "normal", free) {
+  if (!(free > 0) || ["normal", "start", "flex-start", "stretch"].includes(justify)) return;
+  const count = items.length;
+  const offset = (index) => {
+    switch (justify) {
+      case "center": return free / 2;
+      case "end": case "flex-end": return free;
+      case "space-between": return count > 1 ? free * index / (count - 1) : 0;
+      case "space-around": return free / count * (index + 0.5);
+      case "space-evenly": return free / (count + 1) * (index + 1);
+      default: return 0;
+    }
+  };
+  let applied = 0;
+  items.forEach((item, index) => {
+    const delta = offset(index) - applied;
+    if (delta) shiftOutput(ctx, item.boxStart, item.fragmentStart, 0, delta);
+    applied += delta;
+  });
+}
+
+/** 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++) {
-    ctx.boxes[index].x += dx;
-    ctx.boxes[index].y += dy;
+    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++) {
-    const fragment = ctx.fragments[index];
-    ctx.fragments[index] = {
-      ...fragment,
-      x: fragment.x + dx,
-      y: fragment.y + dy,
-      baseline: fragment.baseline == null ? null : fragment.baseline + dy,
-      runs: Object.freeze(fragment.runs.map((run) => Object.freeze({
-        ...run,
-        x: run.x + dx,
-        y: run.y == null ? run.y : run.y + dy,
-      }))),
-    };
+    ctx.fragments[index] = shiftedFragment(ctx.fragments[index], dx, dy);
   }
 }
 
+function shiftedFragment(fragment, dx, dy) {
+  if (dx === 0 && dy === 0) return fragment;
+  return {
+    ...fragment,
+    x: fragment.x + dx,
+    y: fragment.y + dy,
+    baseline: fragment.baseline == null ? null : fragment.baseline + dy,
+    runs: Object.freeze(fragment.runs.map((run) => Object.freeze({
+      ...run,
+      x: run.x + dx,
+      y: run.y == null ? run.y : run.y + dy,
+    }))),
+  };
+}
+
 function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
   const style = box.style;
   const border = borderWidths(style);
@@ -401,6 +592,7 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
       height: dimensions.height,
       resource: box.node.resource,
       video: box.node.tagName === "VIDEO",
+      audio: box.node.tagName === "AUDIO",
       svg: box.node.svg ?? null,
     }], imageX, imageY, dimensions.width, dimensions.height));
     record.height = dimensions.height + padding[0] + padding[2] + border[0] + border[2];
@@ -412,6 +604,9 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const contentTop = y + border[0] + padding[0];
   const firstFragment = ctx.fragments.length;
   let contentBottom = contentTop;
+  // Column flex items and grid rows, aligned once the height is known.
+  let columnItems = null;
+  let gridResult = null;
   let baseline = null;
 
   if (box.table) {
@@ -419,9 +614,9 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     contentBottom = result.bottom;
     baseline = result.baseline;
   } else if (box.grid) {
-    const result = layoutGrid(ctx, box, contentX, contentWidth, contentTop);
-    contentBottom = result.bottom;
-    baseline = result.baseline;
+    gridResult = layoutGrid(ctx, box, contentX, contentWidth, contentTop);
+    contentBottom = gridResult.bottom;
+    baseline = gridResult.baseline;
   } else if (box.flex === "row") {
     const result = layoutFlexRow(ctx, box, contentX, contentWidth, contentTop);
     contentBottom = result.bottom;
@@ -429,8 +624,10 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   } else if (box.flex === "column") {
     const gap = style?.rowGap ?? style?.gap ?? 0;
     let cursor = contentTop;
+    columnItems = [];
     box.children.forEach((child, index) => {
       if (index > 0) cursor += gap;
+      columnItems.push({ boxStart: ctx.boxes.length, fragmentStart: ctx.fragments.length });
       if (child.kind === "ifc") {
         const result = layoutInline(ctx, child, contentX, contentWidth, cursor);
         cursor = result.bottom;
@@ -461,7 +658,7 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     let firstInFlow = true;
     box.children.forEach((child) => {
       if (child.kind === "placeholder") {
-        child.box.staticPosition = { x: contentX, y: cursor + strutValue(pending ?? ZERO_STRUT) };
+        setStaticPosition(ctx, child.box, { x: contentX, y: cursor + strutValue(pending ?? ZERO_STRUT) });
         return;
       }
       const first = firstInFlow;
@@ -499,6 +696,8 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
   const minHeight = numberOrNull(style?.minHeight);
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
+  if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+  if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
   record.height = forcedHeight ?? contentHeight + padding[0] + padding[2] + border[0] + border[2];
   if (style?.display === "list-item") placeListMarker(ctx, box, contentX, contentTop, firstFragment);
   return { height: record.height, baseline };
@@ -812,7 +1011,9 @@ function layoutGrid(ctx, box, x, width, y) {
   const rowStarts = trackStarts(rows, [], rowGap, y);
 
   let baseline = null;
+  const placements = [];
   for (const item of grid.items) {
+    const placement = { row: item.row, boxStart: ctx.boxes.length, fragmentStart: ctx.fragments.length };
     const areaY = rowStarts[item.row];
     const areaHeight = spanSize(rows, [], rowGap, item.row, item.rowSpan);
     const itemStyle = item.box.style;
@@ -832,9 +1033,41 @@ function layoutGrid(ctx, box, x, width, y) {
     }
     const result = layoutBlock(ctx, item.box, item.horizontal.x, item.horizontal.width, itemY, false, forcedHeight);
     baseline ??= result.baseline;
+    placements.push(Object.assign(placement, { boxEnd: ctx.boxes.length, fragmentEnd: ctx.fragments.length }));
   }
   const height = rows.reduce((sum, size) => sum + size, 0) + rowGap * Math.max(0, rows.length - 1);
-  return { bottom: y + height, baseline };
+  return { bottom: y + height, baseline, placements, rowCount: rows.length };
+}
+
+/**
+ * align-content for a grid taller than its rows (CSS Box Alignment 3 §5.3):
+ * the free space goes before, between or around the rows. Each item moves
+ * with its (first) row.
+ */
+function alignGridContent(ctx, grid, alignment = "normal", free) {
+  if (!(free > 0) || !grid.rowCount || ["normal", "start", "stretch"].includes(alignment)) return;
+  const count = grid.rowCount;
+  const offset = (row) => {
+    switch (alignment) {
+      case "center": return free / 2;
+      case "end": return free;
+      case "space-between": return count > 1 ? free * row / (count - 1) : 0;
+      case "space-around": return free / count * (row + 0.5);
+      case "space-evenly": return free / (count + 1) * (row + 1);
+      default: return 0;
+    }
+  };
+  for (const placement of grid.placements) {
+    const dy = offset(placement.row);
+    if (!dy) continue;
+    for (let index = placement.boxStart; index < placement.boxEnd; index++) {
+      const record = ctx.boxes[index];
+      ctx.boxes[index] = { ...record, y: record.y + dy };
+    }
+    for (let index = placement.fragmentStart; index < placement.fragmentEnd; index++) {
+      ctx.fragments[index] = shiftedFragment(ctx.fragments[index], 0, dy);
+    }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -1426,7 +1659,7 @@ function dryLayout(ctx, box, width) {
 }
 
 /** Resolves the used border-box width and horizontal margins of a block-level box. */
-function resolveHorizontal(ctx, box, containingX, containingWidth, shrink) {
+function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, percentageBasis = containingWidth) {
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
@@ -1435,15 +1668,15 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink) {
   let marginLeft = numberOrZero(margin[3]);
   let marginRight = numberOrZero(margin[1]);
   const available = Math.max(0, containingWidth - marginLeft - marginRight);
-  const specified = numberOrNull(resolveLength(style?.width, containingWidth));
+  const specified = numberOrNull(resolveLength(style?.width, percentageBasis));
   let width;
   if (box.replaced) width = imageDimensions(box.node, containingWidth).width + extra;
   else if (specified != null) width = borderBox(specified);
   else if (shrink) width = Math.min(maxContentWidth(ctx, box), available);
   else width = available;
-  const maxWidth = numberOrNull(resolveLength(style?.maxWidth, containingWidth));
+  const maxWidth = numberOrNull(resolveLength(style?.maxWidth, percentageBasis));
   if (maxWidth != null) width = Math.min(width, borderBox(maxWidth));
-  const minWidth = numberOrNull(resolveLength(style?.minWidth, containingWidth));
+  const minWidth = numberOrNull(resolveLength(style?.minWidth, percentageBasis));
   if (minWidth != null) width = Math.max(width, borderBox(minWidth));
   width = Math.max(width, extra);
 
@@ -1460,7 +1693,8 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink) {
 }
 
 function maxContentWidth(ctx, box) {
-  const cached = ctx.maxContent.get(box);
+  const cacheKey = box.node ?? box;
+  const cached = ctx.maxContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
@@ -1496,12 +1730,13 @@ function maxContentWidth(ctx, box) {
   }
   const maxWidth = numberOrNull(style?.maxWidth);
   if (maxWidth != null) width = Math.min(width, style.boxSizing === "border-box" ? maxWidth : maxWidth + extra);
-  ctx.maxContent.set(box, width);
+  ctx.maxContent.set(cacheKey, width);
   return width;
 }
 
 function minContentWidth(ctx, box) {
-  const cached = ctx.minContent.get(box);
+  const cacheKey = box.node ?? box;
+  const cached = ctx.minContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
@@ -1528,7 +1763,7 @@ function minContentWidth(ctx, box) {
       ? inlineMinContentWidth(ctx, child)
       : outer(child))) + extra;
   }
-  ctx.minContent.set(box, width);
+  ctx.minContent.set(cacheKey, width);
   return width;
 }
 
@@ -1724,7 +1959,7 @@ function buildParagraph(ctx, ifc) {
   const runAt = new Array(text.length);
   for (const run of visibleRuns) for (let index = run.start; index < run.end; index++) runAt[index] = run;
   const opportunities = new Set();
-  const graphemes = [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text)];
+  const graphemes = [...GRAPHEME_SEGMENTER.segment(text)];
   for (const { segment, index } of graphemes) {
     const run = runAt[index];
     const end = index + segment.length;
@@ -2005,6 +2240,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
         height: segment.dimensions.height,
         resource: run.node.resource,
         video: run.node.tagName === "VIDEO",
+        audio: run.node.tagName === "AUDIO",
         svg: run.node.svg ?? null,
       });
     } else if (run.kind === "atomic") {
@@ -2124,13 +2360,15 @@ function borderWidths(style) {
   return style?.borderWidths ?? ZERO_BOX;
 }
 
+// Not frozen: intrinsic sizing lays lines out many times over, and freezing
+// every run was the largest single cost of layout. Nothing mutates them.
 function lineFragment(style, text, nodeIds, runs, x, y, width, height, baseline = null) {
   return {
     type: "line",
     baseline,
     text,
-    nodeIds: Object.freeze(nodeIds),
-    runs: Object.freeze(runs.map((run) => Object.freeze(run))),
+    nodeIds,
+    runs,
     x,
     y,
     width,
@@ -2142,12 +2380,15 @@ function lineFragment(style, text, nodeIds, runs, x, y, width, height, baseline
 // ---------------------------------------------------------------------------
 // Shared helpers
 
+const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
 function cachedMeasure(measureText) {
-  const byStyle = new Map();
+  const byStyle = new WeakMap();
+  const defaultStyle = new Map();
   return (text, style) => {
     if (!text) return 0;
-    let cache = byStyle.get(style ?? null);
-    if (!cache) byStyle.set(style ?? null, cache = new Map());
+    let cache = style && typeof style === "object" ? byStyle.get(style) : defaultStyle;
+    if (!cache) byStyle.set(style, cache = new Map());
     let width = cache.get(text);
     if (width === undefined) cache.set(text, width = measureText(text, style ?? null));
     return width;
@@ -2156,7 +2397,9 @@ function cachedMeasure(measureText) {
 
 function cachedMetrics(fontMetrics) {
   const cache = new Map();
-  return (style) => {
+  // Computed styles are frozen and shared, so most lookups hit by identity.
+  const byStyle = new WeakMap();
+  const metricsFor = (style) => {
     const fontSize = style?.fontSize ?? 16;
     const key = `${fontSize}/${style?.fontWeight ?? 400}/${style?.fontFamily?.join(",")}`;
     let metrics = cache.get(key);
@@ -2169,6 +2412,12 @@ function cachedMetrics(fontMetrics) {
     }
     return metrics;
   };
+  return (style) => {
+    if (style === null || typeof style !== "object") return metricsFor(style);
+    let metrics = byStyle.get(style);
+    if (!metrics) byStyle.set(style, metrics = metricsFor(style));
+    return metrics;
+  };
 }
 
 function imageDimensions(node, referenceWidth) {